accessibility fixes, removed secondary navbar

bocchilorenzo · Sep 27, 2023 · 0880cc7 · 0880cc7
1 parent 9df33f5
commit 0880cc7
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 216 deletions.
diff --git a/xradio-vue/public/index.html b/xradio-vue/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="" style="overflow-x: hidden; overscroll-behavior-x: contain;">
+<html lang="en-US" style="overflow-x: hidden; overscroll-behavior-x: contain;">
 
 <head>
   <meta charset="utf-8">

diff --git a/xradio-vue/src/App.vue b/xradio-vue/src/App.vue
@@ -3,7 +3,7 @@
     class="min-h-screen relative text-nord-gray1 dark:text-nord-white3 dark:bg-nord-gray1 bg-white transition-colors duration-100 ease-out select-none"
     @contextmenu.prevent="null"
   >
-    <nav-bar-2 />
+    <nav-bar />
     <button
       @click="switchTheme"
       class="w-8 h-8 p-1 rounded-full border-2 dark:border-nord-white3 border-nord-gray1 mx-2 mt-2 sticky top-2 float-right"
@@ -64,11 +64,10 @@
 </template>
 
 <script setup>
-//import Navbar from "./components/NavBar.vue";
 import { Howl, Howler } from "howler/dist/howler.core.min";
 import Player from "./components/Player.vue";
 import SnackBar from "./components/SnackBar.vue";
-import NavBar2 from "./components/NavBar2.vue";
+import NavBar from "./components/NavBar.vue";
 import UpdateBanner from "./components/UpdateBanner.vue";
 import { ref } from "vue";
 import { useStore } from "vuex";

diff --git a/xradio-vue/src/components/navbar.vue b/xradio-vue/src/components/navbar.vue
@@ -1,164 +1,63 @@
 <template>
-  <nav
-    class="fixed w-12 p-2 z-20 h-full bg-nord-white1 text-black dark:text-nord-white3 dark:bg-nord-gray3"
-  >
-    <div>
-      <button aria-label="Open Menu" @click="drawer">
-        <svg
-          fill="none"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          class="w-8 h-8"
-        >
-          <path d="M4 6h16M4 12h16M4 18h16"></path>
+  <nav class="fixed w-12 py-2 h-full bg-nord-white2 dark:bg-nord-gray3 z-20">
+    <div class="z-20 absolute w-full">
+      <button
+        @click="handle('home')"
+        class="w-full h-8 py-1 px-3 mt-2 hover:bg-white dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out"
+      >
+        <span class="sr-only">Home</span>
+        <svg class="fill-current" viewBox="0 0 24 24">
+          <path
+            d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22L12 3Z"
+          />
         </svg>
       </button>
-      <div
-        class="mx-auto w-8 h-8 p-1 rounded-full mt-2 cursor-pointer"
-        @click="$emit('switchTheme')"
+      <button
+        @click="handle('favorites')"
+        class="w-full h-8 py-1 px-3 mt-2 hover:bg-white dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out"
       >
-        <span class="sr-only">Theme switcher</span>
+        <span class="sr-only">Favorites</span>
         <svg class="fill-current" viewBox="0 0 24 24">
           <path
-            fill="currentColor"
-            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
+            d="M12.1 18.55L12 18.65L11.89 18.55C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5C9.04 5 10.54 6 11.07 7.36H12.93C13.46 6 14.96 5 16.5 5C18.5 5 20 6.5 20 8.5C20 11.39 16.86 14.24 12.1 18.55M16.5 3C14.76 3 13.09 3.81 12 5.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5C2 12.27 5.4 15.36 10.55 20.03L12 21.35L13.45 20.03C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3Z"
           />
         </svg>
-      </div>
-    </div>
-
-    <transition
-      enter-class="opacity-0"
-      enter-active-class="ease-out transition-medium"
-      enter-to-class="opacity-100"
-      leave-class="opacity-100"
-      leave-active-class="ease-out transition-medium"
-      leave-to-class="opacity-0"
-    >
-      <div v-show="isOpen" class="z-20 fixed inset-0 transition-opacity">
-        <div
-          @click="isOpen = false"
-          class="absolute inset-0 bg-black opacity-50"
-          tabindex="0"
-        ></div>
-      </div>
-    </transition>
-    <aside
-      class="transform top-0 left-0 w-64 bg-nord-white1 fixed h-full overflow-auto ease-in-out transition-transform duration-300 z-30 dark:bg-nord-gray3"
-      :class="isOpen ? 'translate-x-0' : '-translate-x-full'"
-    >
-      <!--
-      <span
-        @click="isOpen = false"
-        class="flex w-full items-center p-4 border-b"
+      </button>
+      <button
+        @click="handle('searchHub')"
+        class="w-full h-8 py-1 px-3 mt-2 hover:bg-white dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out"
       >
-        <img src="/logos/fox-hub.png" alt="Logo" class="h-auto w-32 mx-auto" />
-      </span>
-      -->
-      <span @click="handle('home')" class="flex items-center p-4 menuItem">
-        <span class="mr-2">
-          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
-            <path
-              fill="currentColor"
-              d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22L12 3Z"
-            />
-          </svg>
-        </span>
-        <span>Home</span>
-      </span>
-      <span @click="handle('favorites')" class="flex items-center p-4 menuItem">
-        <span class="mr-2">
-          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
-            <path
-              d="M12.1 18.55L12 18.65L11.89 18.55C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5C9.04 5 10.54 6 11.07 7.36H12.93C13.46 6 14.96 5 16.5 5C18.5 5 20 6.5 20 8.5C20 11.39 16.86 14.24 12.1 18.55M16.5 3C14.76 3 13.09 3.81 12 5.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5C2 12.27 5.4 15.36 10.55 20.03L12 21.35L13.45 20.03C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3Z"
-            />
-          </svg>
-        </span>
-        <span>Favorites</span>
-      </span>
-      <span @click="handle('searchHub')" class="flex items-center p-4 menuItem">
-        <span class="mr-2">
-          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
-            <path
-              d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-            />
-          </svg>
-        </span>
-        <span>Search</span>
-      </span>
-      <span @click="handle('about')" class="flex items-center p-4 menuItem">
-        <span class="mr-2">
-          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
-            <path
-              fill="currentColor"
-              d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-            />
-          </svg>
-        </span>
-        <span>About</span>
-      </span>
-      <!--
-      <span @click="isOpen = false" class="flex items-center p-4 menuItem">
-        <span class="mr-2">
-          <svg
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            class="w-6 h-6"
-          >
-            <path
-              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-            ></path>
-          </svg>
-        </span>
-        <span>Contact</span>
-      </span>
-      -->
-    </aside>
+        <span class="sr-only">Search</span>
+        <svg class="fill-current" viewBox="0 0 24 24">
+          <path
+            d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+          />
+        </svg>
+      </button>
+      <button
+        @click="handle('about')"
+        class="w-full h-8 py-1 px-3 mt-2 hover:bg-white dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out"
+      >
+        <span class="sr-only">About</span>
+        <svg class="fill-current" viewBox="0 0 24 24">
+          <path
+            d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          />
+        </svg>
+      </button>
+    </div>
   </nav>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
-let isOpen = ref(false);
 const route = useRoute();
 const router = useRouter();
 
-function drawer() {
-  isOpen.value = !isOpen.value;
-}
-
 function handle(path) {
   if (route.name != path) {
     router.push({ name: path });
   }
-  drawer();
 }
-
-watch(isOpen, (isOpen) => {
-  if (process.client) {
-    if (isOpen) document.body.style.setProperty("overflow", "hidden");
-    else document.body.style.removeProperty("overflow");
-  }
-});
 </script>
-
-<style scoped>
-.dark .menuItem:hover {
-  @apply bg-nord-gray1;
-}
-.menuItem:hover {
-  @apply bg-nord-white3 transition-colors duration-100 ease-out;
-}
-.menuItem {
-  cursor: pointer;
-}
-</style>
diff --git a/xradio-vue/src/components/navbar2.vue b/xradio-vue/src/components/navbar2.vue
diff --git a/xradio-vue/src/components/player.vue b/xradio-vue/src/components/player.vue
@@ -90,6 +90,7 @@
             d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z"
           />
         </svg>
+        <span class="sr-only"> Play station </span>
       </button>
       <button v-else @click="generalEmit('stop')" class="player-button h-8 w-8">
         <svg
@@ -102,6 +103,7 @@
             d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M9,9V15H15V9"
           />
         </svg>
+        <span class="sr-only"> Stop playback </span>
       </button>
       <img
         v-if="props.currentStation.favicon != ''"
@@ -133,27 +135,27 @@
             </span>
           </p>
         </div>
-        <p class="truncate text-sm" id="tags" :title="props.currentStation.tags">
+        <p
+          class="truncate text-sm"
+          id="tags"
+          :title="props.currentStation.tags"
+        >
           {{ props.currentStation.tags }}
         </p>
       </div>
-      <span
+      <button
         v-if="props.currentStation.homepage != ''"
         class="text-center ml-auto player-button"
-        title="Homepage"
         @click.stop="openLink(props.currentStation.homepage)"
       >
         <svg class="fill-current h-6 w-6" viewBox="0 0 24 24">
           <path
             d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
           />
         </svg>
-      </span>
-      <button
-        @click="manageFavorites"
-        title="Save to favorites"
-        class="player-button"
-      >
+        <span class="sr-only"> Open homepage </span>
+      </button>
+      <button @click="manageFavorites" class="player-button">
         <svg
           v-if="!isFav"
           class="fill-current text-red-500"
@@ -174,6 +176,7 @@
             d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
           />
         </svg>
+        <span class="sr-only"> Save to favorites </span>
       </button>
       <div
         class="flex content-center items-center justify-center relative h-auto"
@@ -199,6 +202,7 @@
             />
             <path v-else d="M7,9V15H11L16,20V4L11,9H7Z" />
           </svg>
+          <span class="sr-only"> Mute/Unmute </span>
         </button>
         <transition name="fade">
           <div
@@ -226,6 +230,7 @@
             d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
           />
         </svg>
+        <span class="sr-only"> Close player </span>
       </button>
     </div>
   </div>