zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat(a11y): improve focus state (#116)

Browse source
This commit is contained in:
Lucie 2022-11-25 18:46:25 -05:00 • committed by GitHub
parent 2cf970225f
commit 1ad3fcf20c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 56 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/nav/NavSide.vue
View file

@ -4,58 +4,58 @@
<template>
<div px3 py4 flex="~ col gap2" text-lg>
<template v-if="currentUser">
<NuxtLink to="/home" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
<NuxtLink to="/home" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
<div i-ri:home-5-line />
<span>Home</span>
</div>
</NuxtLink>
<NuxtLink to="/notifications" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
<NuxtLink to="/notifications" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
<div i-ri:notification-4-line />
<span>Notifications</span>
</div>
</NuxtLink>
</template>
<NuxtLink to="/explore" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
<NuxtLink to="/explore" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
<div i-ri:hashtag />
<span>Explore</span>
</div>
</NuxtLink>
<NuxtLink group to="/public/local" active-class="text-primary">
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
<NuxtLink to="/public/local" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
<div i-ri:group-2-line />
<span>Local</span>
</div>
</NuxtLink>
<NuxtLink to="/public" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
<NuxtLink to="/public" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
<div i-ri:earth-line />
<span>Federated</span>
</div>
</NuxtLink>
<template v-if="currentUser">
<NuxtLink to="/conversations" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
<NuxtLink to="/conversations" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
<div i-ri:at-line />
<span>Conversations</span>
</div>
</NuxtLink>
<NuxtLink to="/favourites" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
<NuxtLink to="/favourites" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
<div i-ri:heart-3-line />
<span>Favorites</span>
</div>
</NuxtLink>
<NuxtLink to="/bookmarks" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
<NuxtLink to="/bookmarks" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
<div i-ri:bookmark-line />
<span>Bookmarks</span>
</div>
</NuxtLink>
<NuxtLink :to="getAccountPath(currentUser.account)" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active>
<NuxtLink :to="getAccountPath(currentUser.account)" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active group-focus-visible:ring="2 current">
<AccountAvatar :account="currentUser.account" h="1.2em" />
<span>Profile</span>
</div>

2
components/nav/NavTitle.vue
View file

@ -1,6 +1,6 @@
<template>
<!-- Use external to force refresh page and jump to top of timeline -->
<NuxtLink flex items-center text-2xl gap-2 to="/" external>
<NuxtLink flex px3 py2 items-center text-2xl gap-2 hover:bg-active focus-visible:ring="2 current" rounded-full to="/" external>
<img aria-label="Elk Logo" src="/logo.svg" w-10 h-10>
<div>
Elk <sup text-sm italic op50 mt-1>alpha</sup>