chore(a11y): improve component roles

This commit is contained in:
liyasthomas
2022-03-01 12:11:53 +05:30
parent b3d0d4d86b
commit 9bd55b6db5
39 changed files with 498 additions and 420 deletions

View File

@@ -1,24 +1,28 @@
<template>
<aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
<NuxtLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
:to="localePath(navigation.target)"
class="nav-link"
tabindex="0"
>
<div v-if="navigation.svg">
<SmartIcon :name="navigation.svg" class="svg-icons" />
</div>
<span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
<tippy
v-if="!EXPAND_NAVIGATION"
:placement="mdAndLarger ? 'right' : 'bottom'"
theme="tooltip"
:content="navigation.title"
/>
</NuxtLink>
<ul>
<li>
<NuxtLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
:to="localePath(navigation.target)"
class="nav-link"
tabindex="0"
>
<div v-if="navigation.svg">
<SmartIcon :name="navigation.svg" class="svg-icons" />
</div>
<span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
<tippy
v-if="!EXPAND_NAVIGATION"
:placement="mdAndLarger ? 'right' : 'bottom'"
theme="tooltip"
:content="navigation.title"
/>
</NuxtLink>
</li>
</ul>
</nav>
</aside>
</template>