sudoxreboot/audiobookshelf-atv
1
0
Fork 0
mirror of https://github.com/sudoxnym/audiobookshelf-atv.git synced 2026-04-14 11:36:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix tab focus for appbar and sidenav, add tabindex to book card

Browse source
This commit is contained in:
advplyr 2025-08-31 16:41:13 -05:00
parent 48a299de45
commit 95bf28d7c6
3 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/app/Appbar.vue
View file

@ -4,14 +4,14 @@
<nuxt-link v-show="!showBack" to="/" class="mr-3"> <nuxt-link v-show="!showBack" to="/" class="mr-3">
<img src="/Logo.png" class="h-10 w-10" /> <img src="/Logo.png" class="h-10 w-10" />
</nuxt-link> </nuxt-link>
<a v-if="showBack" @click="back" class="rounded-full h-10 w-10 flex items-center justify-center mr-2 cursor-pointer"> <a v-if="showBack" @click="back" aria-label="Back" class="rounded-full h-10 w-10 flex items-center justify-center mr-2 cursor-pointer">
<span class="material-symbols text-3xl text-fg">arrow_back</span> <span class="material-symbols text-3xl text-fg">arrow_back</span>
</a> </a>
<div v-if="user && currentLibrary"> <div v-if="user && currentLibrary">
<div class="pl-1.5 pr-2.5 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal"> <button type="button" aria-label="Show library modal" class="pl-1.5 pr-2.5 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
<ui-library-icon :icon="currentLibraryIcon" :size="4" font-size="base" /> <ui-library-icon :icon="currentLibraryIcon" :size="4" font-size="base" />
<p class="text-sm leading-4 ml-2 mt-0.5 max-w-24 truncate">{{ currentLibraryName }}</p> <p class="text-sm leading-4 ml-2 mt-0.5 max-w-24 truncate">{{ currentLibraryName }}</p>
</div> </button>
</div> </div>
<widgets-connection-indicator /> <widgets-connection-indicator />
@ -21,19 +21,19 @@
<widgets-download-progress-indicator /> <widgets-download-progress-indicator />
<!-- Must be connected to a server to cast, only supports media items on server --> <!-- Must be connected to a server to cast, only supports media items on server -->
<div v-show="isCastAvailable && user" class="mx-2 cursor-pointer flex items-center" @click="castClick"> <button type="button" aria-label="Cast" v-show="isCastAvailable && user" class="mx-2 cursor-pointer flex items-center" @click="castClick">
<span class="material-symbols text-2xl leading-none"> <span class="material-symbols text-2xl leading-none">
{{ isCasting ? 'cast_connected' : 'cast' }} {{ isCasting ? 'cast_connected' : 'cast' }}
</span> </span>
</div> </button>
<nuxt-link v-if="user" class="mx-1.5 flex items-center h-10" to="/search"> <nuxt-link v-if="user" class="mx-1.5 flex items-center h-10" to="/search" aria-label="Search">
<span class="material-symbols text-2xl leading-none">search</span> <span class="material-symbols text-2xl leading-none">search</span>
</nuxt-link> </nuxt-link>
<div class="h-7 mx-1.5"> <button type="button" aria-label="Toggle side drawer" class="h-7 mx-1.5" @click="clickShowSideDrawer">
<span class="material-symbols" style="font-size: 1.75rem" @click="clickShowSideDrawer">menu</span> <span class="material-symbols" style="font-size: 1.75rem">menu</span>
</div> </button>
</div> </div>
</div> </div>
</template> </template>

4
components/app/SideDrawer.vue
View file

@ -11,11 +11,11 @@
<div class="w-full overflow-y-auto"> <div class="w-full overflow-y-auto">
<template v-for="item in navItems"> <template v-for="item in navItems">
<button v-if="item.action" :key="item.text" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg-muted" @click="clickAction(item.action)"> <button v-if="item.action" :key="item.text" :tabindex="show ? 0 : -1" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg-muted" @click="clickAction(item.action)">
<span class="material-symbols fill text-lg">{{ item.icon }}</span> <span class="material-symbols fill text-lg">{{ item.icon }}</span>
<p class="pl-4">{{ item.text }}</p> <p class="pl-4">{{ item.text }}</p>
</button> </button>
<nuxt-link v-else :to="item.to" :key="item.text" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg-hover/50' : 'text-fg-muted'"> <nuxt-link v-else :to="item.to" :key="item.text" :tabindex="show ? 0 : -1" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg-hover/50' : 'text-fg-muted'">
<span class="material-symbols fill text-lg">{{ item.icon }}</span> <span class="material-symbols fill text-lg">{{ item.icon }}</span>
<p class="pl-4">{{ item.text }}</p> <p class="pl-4">{{ item.text }}</p>
</nuxt-link> </nuxt-link>

2
components/cards/LazyBookCard.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @click="clickCard"> <div ref="card" tabindex="0" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @click="clickCard">
<!-- When cover image does not fill --> <!-- When cover image does not fill -->
<div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary"> <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
<div class="absolute cover-bg" ref="coverBg" /> <div class="absolute cover-bg" ref="coverBg" />