From 63cf27a63a54011aa5d0dec53fafd31fba60671f Mon Sep 17 00:00:00 2001
From: sudoxnym <76703581+sudoxnym@users.noreply.github.com>
Date: Sat, 13 Sep 2025 19:47:59 -0600
Subject: [PATCH] feat(tv): improve toolbar accessibility

---
 components/home/BookshelfToolbar.vue | 38 ++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/components/home/BookshelfToolbar.vue b/components/home/BookshelfToolbar.vue
index 5e48b3f4..092f00ee 100644
--- a/components/home/BookshelfToolbar.vue
+++ b/components/home/BookshelfToolbar.vue
@@ -5,16 +5,44 @@
         <p v-show="!selectedSeriesName" class="pt-1">{{ $formatNumber(totalEntities) }} {{ entityTitle }}</p>
         <p v-show="selectedSeriesName" class="ml-2 pt-1">{{ selectedSeriesName }} ({{ $formatNumber(totalEntities) }})</p>
         <div class="flex-grow" />
-        <span v-if="page == 'library' || seriesBookPage" class="material-symbols text-2xl px-2" @click="changeView">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
+        <span
+          v-if="page == 'library' || seriesBookPage"
+          class="material-symbols text-2xl px-2"
+          tabindex="0"
+          @click="changeView"
+          @keyup.enter="changeView"
+        >{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
         <template v-if="page === 'library'">
           <div class="relative flex items-center px-2">
-            <span class="material-symbols text-2xl" @click="showFilterModal = true">filter_alt</span>
+            <span
+              class="material-symbols text-2xl"
+              tabindex="0"
+              @click="showFilterModal = true"
+              @keyup.enter="showFilterModal = true"
+            >filter_alt</span>
             <div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
           </div>
-          <span class="material-symbols text-2xl px-2" @click="showSortModal = true">sort</span>
+          <span
+            class="material-symbols text-2xl px-2"
+            tabindex="0"
+            @click="showSortModal = true"
+            @keyup.enter="showSortModal = true"
+          >sort</span>
         </template>
-        <span v-if="seriesBookPage" class="material-symbols text-2xl px-2" @click="downloadSeries">download</span>
-        <span v-if="(page == 'library' && isBookLibrary) || seriesBookPage" class="material-symbols text-2xl px-2" @click="showMoreMenuDialog = true">more_vert</span>
+        <span
+          v-if="seriesBookPage"
+          class="material-symbols text-2xl px-2"
+          tabindex="0"
+          @click="downloadSeries"
+          @keyup.enter="downloadSeries"
+        >download</span>
+        <span
+          v-if="(page == 'library' && isBookLibrary) || seriesBookPage"
+          class="material-symbols text-2xl px-2"
+          tabindex="0"
+          @click="showMoreMenuDialog = true"
+          @keyup.enter="showMoreMenuDialog = true"
+        >more_vert</span>
       </div>
     </div>