chore: Make it minimally accessible by tab (#757)

music-assistant · Dec 20, 2024 · e69b5bb · e69b5bb
1 parent f903933
commit e69b5bb
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 47 deletions.
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
@@ -1,19 +1,25 @@
 <template>
   <v-toolbar :color="color" class="header">
     <template v-if="icon" #prepend>
-      <v-btn :icon="icon" size="large" @click="emit('iconClicked')" />
+      <v-btn
+        v-if="iconAsButton"
+        :icon="icon"
+        size="large"
+        @click="emit('iconClicked')"
+      />
+      <v-icon v-else :icon="icon" size="large" />
     </template>
 
     <template v-if="title" #title>
-      <div @click="emit('titleClicked')">
+      <button @click="emit('titleClicked')">
         {{ title }}
         <v-badge
           v-if="count && getBreakpointValue('bp4')"
           color="grey"
           :content="count"
           inline
         />
-      </div>
+      </button>
     </template>
 
     <template v-if="menuItems?.length" #append>
@@ -183,6 +189,7 @@ export interface Props {
   menuItems?: ToolBarMenuItem[];
   enforceOverflowMenu?: boolean;
   showLoading?: boolean;
+  iconAsButton?: boolean;
 }
 withDefaults(defineProps<Props>(), {
   color: "transparent",
@@ -192,6 +199,7 @@ withDefaults(defineProps<Props>(), {
   menuItems: undefined,
   enforceOverflowMenu: false,
   showLoading: undefined,
+  iconAsButton: false,
 });
 
 // emitters

diff --git a/src/layouts/default/BottomNavigation.vue b/src/layouts/default/BottomNavigation.vue
@@ -4,52 +4,46 @@
     grow
     elevation="15"
     style="border-top: 1px solid #20202035"
+    role="navigation"
   >
-    <!-- full menu -->
-    <v-tabs
-      v-if="getBreakpointValue('tablet')"
-      stacked
-      grow
-      :show-arrows="false"
-      :model-value="activeTab"
-      color="accent"
-      center-active
-    >
-      <v-tab
+    <!-- Full menu for larger screens -->
+    <template v-if="getBreakpointValue('tablet')">
+      <v-btn
         v-for="menuItem of menuItems"
         :key="menuItem.label"
         :to="menuItem.path"
-        :value="menuItem.label"
+        :aria-label="$t(menuItem.label)"
+        tabindex="0"
       >
         <v-icon size="xx-large">{{ menuItem.icon }}</v-icon>
         <span class="menuButton">{{ $t(menuItem.label) }}</span>
-      </v-tab>
-    </v-tabs>
-    <!-- compact menu -->
-    <v-tabs
-      v-else
-      stacked
-      grow
-      :show-arrows="false"
-      :model-value="activeTab"
-      color="accent"
-    >
-      <v-tab
+      </v-btn>
+    </template>
+
+    <!-- Compact menu for smaller screens -->
+    <template v-else>
+      <v-btn
         v-for="menuItem of menuItems.filter((x) => !x.isLibraryNode)"
         :key="menuItem.label"
         :to="menuItem.path"
-        :value="menuItem.label"
+        :aria-label="$t(menuItem.label)"
+        tabindex="0"
       >
         <v-icon size="xx-large">{{ menuItem.icon }}</v-icon>
         <span class="menuButton">{{ $t(menuItem.label) }}</span>
-      </v-tab>
+      </v-btn>
 
       <v-menu>
         <template #activator="{ props }">
-          <v-tab key="library" v-bind="props" value="library">
+          <v-btn
+            v-bind="props"
+            aria-haspopup="true"
+            :aria-expanded="isLibraryOpen.toString()"
+            aria-label="Open library menu"
+          >
             <v-icon size="xx-large">mdi-bookshelf</v-icon>
             <span class="menuButton">{{ $t("library") }}</span>
-          </v-tab>
+          </v-btn>
         </template>
 
         <v-list>
@@ -62,13 +56,12 @@
           />
         </v-list>
       </v-menu>
-    </v-tabs>
+    </template>
   </v-bottom-navigation>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import router from "@/plugins/router";
+import { ref } from "vue";
 import { getMenuItems } from "./DrawerNavigation.vue";
 import { getBreakpointValue } from "@/plugins/breakpoint";
 
@@ -79,27 +72,22 @@ defineProps<Props>();
 
 const menuItems = getMenuItems();
 
-const activeTab = computed(() => {
-  for (const menuItem of menuItems) {
-    if (router.currentRoute.value.path.startsWith(menuItem.path)) {
-      if (!getBreakpointValue("tablet") && menuItem.isLibraryNode) {
-        return "library";
-      }
-      return menuItem.label;
-    }
-  }
-  return "";
-});
+const isLibraryOpen = ref(false);
 </script>
 
-<style>
+<style scoped>
 .menuButton {
   font-weight: 350;
   font-size: x-small;
   font-stretch: condensed;
   text-transform: none;
   margin-top: 5px;
 }
+
+.v-btn--active {
+  color: white;
+}
+
 .v-slide-group-item--active {
   opacity: 100%;
 }

diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
@@ -2,9 +2,9 @@
   <v-app v-if="store.connected">
     <MainView v-if="framelessState" />
     <template v-else>
+      <Footer />
       <PlayerSelect />
       <MainView />
-      <Footer />
     </template>
   </v-app>
   <v-overlay

diff --git a/src/layouts/default/PlayerSelect.vue b/src/layouts/default/PlayerSelect.vue
@@ -2,6 +2,7 @@
   <!-- players side menu -->
   <v-overlay v-model="store.showPlayersMenu" />
   <v-navigation-drawer
+    v-if="store.showPlayersMenu"
     v-model="store.showPlayersMenu"
     location="right"
     app