From 4c9a560a4adccea34f3f955cda82c5bad0ada87a Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 3 May 2025 14:04:55 +0200
Subject: [PATCH] fix: accessibility; minor improvements

---
 src/components/App/Navbar.vue                 |  2 +-
 .../Timetable/TimetableContainer.vue          |  2 +-
 .../TimetableSearch/ActiveSearchInput.vue     |  1 +
 .../TimetableSearch/SearchModeActions.vue     | 20 +++++++++++--------
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/App/Navbar.vue b/src/components/App/Navbar.vue
index 50703d5..9cf4ea2 100644
--- a/src/components/App/Navbar.vue
+++ b/src/components/App/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <nav class="bg-zinc-900 w-full p-1 print:hidden flex justify-between items-center relative">
     <div class="flex items-center">
-      <img src="/favicon.svg" class="size-8 inline" />
+      <img src="/favicon.svg" class="size-8 inline" alt="SRJP logo" />
       <b class="ml-2 text-lg"
         >Rozkładownik TD2 <sup class="font-semibold text-zinc-300">{{ version }}</sup></b
       >
diff --git a/src/components/Timetable/TimetableContainer.vue b/src/components/Timetable/TimetableContainer.vue
index 950196f..f0b9d51 100644
--- a/src/components/Timetable/TimetableContainer.vue
+++ b/src/components/Timetable/TimetableContainer.vue
@@ -2,7 +2,7 @@
   <!-- Button closing fullscreen mode, relative to MainContainer -->
   <button
     v-if="globalStore.fullscreenMode"
-    class="absolute right-6 top-3 p-1 rounded-md bg-green-600 hover:bg-green-500 print:hidden"
+    class="absolute right-6 top-3 p-1 rounded-md bg-green-600 hover:bg-green-500 print:hidden z-50"
     @click="() => (globalStore.fullscreenMode = false)"
   >
     <Minimize2Icon :size="22" />
diff --git a/src/components/TimetableSearch/ActiveSearchInput.vue b/src/components/TimetableSearch/ActiveSearchInput.vue
index a0d30d1..86df967 100644
--- a/src/components/TimetableSearch/ActiveSearchInput.vue
+++ b/src/components/TimetableSearch/ActiveSearchInput.vue
@@ -6,6 +6,7 @@
     id="trains-select"
     class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
     :disabled="apiStore.activeDataStatus != DataStatus.SUCCESS"
+    aria-label="Active train select"
   >
     <option :value="null" disabled>
       {{
diff --git a/src/components/TimetableSearch/SearchModeActions.vue b/src/components/TimetableSearch/SearchModeActions.vue
index c5c5ff4..e70368e 100644
--- a/src/components/TimetableSearch/SearchModeActions.vue
+++ b/src/components/TimetableSearch/SearchModeActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between gap-2" v-if="!globalStore.fullscreenMode">
+  <div class="flex justify-between gap-2">
     <div class="flex gap-2">
       <button
         :class="`p-1 rounded-md ${
@@ -8,6 +8,7 @@
             : 'bg-zinc-800 hover:bg-zinc-700'
         }`"
         @click="toggleViewMode('active')"
+        aria-label="Active data view mode"
       >
         <WifiIcon />
       </button>
@@ -19,6 +20,7 @@
             : 'bg-zinc-800 hover:bg-zinc-700'
         }`"
         @click="toggleViewMode('storage')"
+        aria-label="Storage view mode"
       >
         <ArchiveIcon />
       </button>
@@ -30,13 +32,18 @@
             : 'bg-zinc-800 hover:bg-zinc-700'
         }`"
         @click="toggleViewMode('journal')"
+        aria-label="Journal view mode"
       >
         <HistoryIcon />
       </button>
     </div>
 
     <div class="flex gap-2">
-      <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="toggleDarkMode">
+      <button
+        class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700"
+        @click="toggleDarkMode"
+        aria-label="Dark mode toggle"
+      >
         <MoonIcon v-if="globalStore.darkMode" />
         <SunIcon v-else />
       </button>
@@ -45,6 +52,7 @@
         class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 disabled:opacity-60 disabled:hover:bg-zinc-800"
         @click="toggleFullscreenMode()"
         :disabled="globalStore.currentTimetableData == null"
+        aria-label="Full screen toggle"
       >
         <FullscreenIcon :size="24" />
       </button>
@@ -53,6 +61,7 @@
         class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 disabled:opacity-60 disabled:hover:bg-zinc-800"
         :disabled="globalStore.currentTimetableData == null"
         @click="openPrintingWindow"
+        aria-label="Print mode"
       >
         <PrinterIcon />
       </button>
@@ -65,17 +74,12 @@
           'bg-zinc-800 hover:bg-zinc-700': !isTimetableSaved
         }"
         @click="saveToStorage"
+        aria-label="Save timetable to storage"
       >
         <FolderDownIcon />
       </button>
     </div>
   </div>
-
-  <div class="flex justify-end" v-else>
-    <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 self-end" @click="toggleDarkMode">
-      <FullscreenIcon />
-    </button>
-  </div>
 </template>
 
 <script setup lang="ts">