chore(a11y): improve component roles
This commit is contained in:
liyasthomas
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
|
||||
role="alert"
|
||||
>
|
||||
<i class="mr-2 material-icons">info_outline</i>
|
||||
<span class="text-secondaryDark">
|
||||
|
||||
@@ -59,6 +59,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.d="documentation.$el.click()"
|
||||
@keyup.s="shortcuts.$el.click()"
|
||||
@keyup.c="chat.$el.click()"
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
svg="user"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex flex-col px-2 text-tiny">
|
||||
<div class="flex flex-col px-2 text-tiny" role="menu">
|
||||
<span class="inline-flex font-semibold truncate">
|
||||
{{ currentUser.displayName }}
|
||||
</span>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<aside class="flex justify-between h-full md:flex-col">
|
||||
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
|
||||
<ul>
|
||||
<li>
|
||||
<NuxtLink
|
||||
v-for="(navigation, index) in primaryNavigation"
|
||||
:key="`navigation-${index}`"
|
||||
@@ -19,6 +21,8 @@
|
||||
:content="navigation.title"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
:disabled="disabled"
|
||||
:tabindex="loading ? '-1' : '0'"
|
||||
:type="type"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
v-if="!loading"
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
]"
|
||||
:disabled="disabled"
|
||||
:tabindex="loading ? '-1' : '0'"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
v-if="!loading"
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="(team, index) in myTeams"
|
||||
:key="`team-${index}`"
|
||||
@@ -55,6 +56,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</SmartIntersection>
|
||||
</SmartTab>
|
||||
|
||||
@@ -60,6 +60,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
icon="assignment_returned"
|
||||
:label="t('import.from_gist')"
|
||||
@@ -54,6 +55,7 @@
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.d="duplicate.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -78,6 +78,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.d="duplicate.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -79,6 +79,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -58,6 +58,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.d="duplicate.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.d="duplicate.$el.click()"
|
||||
@keyup.delete="
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
icon="assignment_returned"
|
||||
:label="t('import.from_gist')"
|
||||
@@ -54,6 +55,7 @@
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
:label="`${$t('environment.no_environment')}`"
|
||||
:info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
|
||||
@@ -45,6 +46,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
<div class="flex justify-between flex-1 border-b border-dividerLight">
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
label="None"
|
||||
:icon="
|
||||
@@ -97,6 +98,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
@@ -204,6 +206,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
:icon="
|
||||
addTo === 'Headers'
|
||||
@@ -234,6 +237,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
:label="$t('state.none').toLowerCase()"
|
||||
:info-icon="contentType === null ? 'done' : ''"
|
||||
@@ -46,6 +47,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
:placeholder="`${t('action.search')}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="codegen in filteredCodegenDefinitions"
|
||||
:key="codegen.name"
|
||||
|
||||
@@ -26,12 +26,14 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="(method, index) in methods"
|
||||
:key="`method-${index}`"
|
||||
:label="method"
|
||||
@click.native="onSelectMethod(method)"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</label>
|
||||
</div>
|
||||
@@ -69,6 +71,7 @@
|
||||
ref="sendTippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.c="curl.$el.click()"
|
||||
@keyup.s="show.$el.click()"
|
||||
@keyup.delete="clearAll.$el.click()"
|
||||
@@ -150,6 +153,7 @@
|
||||
ref="saveTippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.c="copyRequestAction.$el.click()"
|
||||
@keyup.s="saveRequestAction.$el.click()"
|
||||
@keyup.escape="saveOptions.tippy().hide()"
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
<div
|
||||
v-if="noEnvSelected && !globalHasAdditions"
|
||||
class="flex p-4 bg-error text-secondaryDark"
|
||||
role="alert"
|
||||
>
|
||||
<i class="mr-4 material-icons"> warning </i>
|
||||
<div class="flex flex-col">
|
||||
|
||||
@@ -51,19 +51,23 @@
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<div v-if="item.kind === 'RootObject'" class="outline">{}</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="outline">[]</div>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="outline">
|
||||
<div v-if="item.kind === 'RootObject'" class="outline-item">{}</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="outline-item">
|
||||
{{ item.index }}
|
||||
</div>
|
||||
<div v-if="item.kind === 'ObjectMember'" class="outline">
|
||||
<div v-if="item.kind === 'ObjectMember'" class="outline-item">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
|
||||
>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="flex flex-col">
|
||||
<div
|
||||
v-if="item.kind === 'ArrayMember'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
v-for="(arrayMember, astIndex) in item.astParent.values"
|
||||
:key="`ast-${astIndex}`"
|
||||
@@ -76,7 +80,11 @@
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.kind === 'ObjectMember'" class="flex flex-col">
|
||||
<div
|
||||
v-if="item.kind === 'ObjectMember'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
v-for="(objectMember, astIndex) in item.astParent.members"
|
||||
:key="`ast-${astIndex}`"
|
||||
@@ -90,7 +98,11 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.kind === 'RootObject'" class="flex flex-col">
|
||||
<div
|
||||
v-if="item.kind === 'RootObject'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
label="{}"
|
||||
@click.native="
|
||||
@@ -101,7 +113,11 @@
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="flex flex-col">
|
||||
<div
|
||||
v-if="item.kind === 'RootArray'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
label="[]"
|
||||
@click.native="
|
||||
@@ -206,7 +222,7 @@ const outlinePath = computed(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.outline {
|
||||
.outline-item {
|
||||
@apply cursor-pointer;
|
||||
@apply flex-grow-0 flex-shrink-0;
|
||||
@apply text-secondaryLight;
|
||||
|
||||
@@ -43,12 +43,14 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="(_, version) in socketIoClients"
|
||||
:key="`client-${version}`"
|
||||
:label="`Client ${version}`"
|
||||
@click.native="onSelectVersion(version)"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</label>
|
||||
<input
|
||||
@@ -109,6 +111,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
label="None"
|
||||
:icon="
|
||||
@@ -139,6 +142,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<NuxtLink
|
||||
v-for="(locale, index) in $i18n.locales"
|
||||
:key="`locale-${index}`"
|
||||
@@ -27,6 +28,7 @@
|
||||
:info-icon="$i18n.locale === locale.code ? 'done' : null"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
|
||||
role="checkbox"
|
||||
:aria-checked="on"
|
||||
@click="$emit('change')"
|
||||
>
|
||||
<input
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
v-if="show"
|
||||
dialog
|
||||
:title="$t('modal.confirm')"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="(size, index) in fontSizes"
|
||||
:key="`size-${index}`"
|
||||
@@ -30,6 +31,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
]"
|
||||
:disabled="disabled"
|
||||
:tabindex="loading ? '-1' : '0'"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
v-if="!loading"
|
||||
|
||||
@@ -28,6 +28,7 @@ const SmartLink = {
|
||||
switch (tag) {
|
||||
case ANCHOR_TAG:
|
||||
attrs["aria-label"] = "Link"
|
||||
attrs.role = "link"
|
||||
|
||||
// Map `to` prop to the correct attribute
|
||||
attrs.href = context.props.to
|
||||
@@ -56,6 +57,7 @@ const SmartLink = {
|
||||
|
||||
default:
|
||||
attrs["aria-label"] = "Button"
|
||||
attrs.role = "button"
|
||||
break
|
||||
}
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
<div
|
||||
ref="modal"
|
||||
class="fixed inset-0 z-10 z-50 overflow-y-auto transition hide-scrollbar"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen text-center sm:block"
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
value === selected ? 'radio_button_checked' : 'radio_button_unchecked'
|
||||
"
|
||||
:active="value === selected"
|
||||
role="radio"
|
||||
:aria-checked="value === selected"
|
||||
@click.native="$emit('change', value)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
class="tab"
|
||||
:class="[{ active: tab.active }, { vertical: vertical }]"
|
||||
:aria-label="tab.label"
|
||||
role="button"
|
||||
@keyup.enter="selectTab(tab)"
|
||||
@click="selectTab(tab)"
|
||||
>
|
||||
|
||||
@@ -104,6 +104,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
label="OWNER"
|
||||
:icon="
|
||||
@@ -149,6 +150,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
|
||||
@@ -160,6 +160,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
label="OWNER"
|
||||
:icon="
|
||||
@@ -205,6 +206,7 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
|
||||
@@ -86,6 +86,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
|
||||
@keyup.x="
|
||||
!(team.myRole === 'OWNER' && team.ownersCount == 1)
|
||||
|
||||
Reference in New Issue
Block a user