From 8c47ccb651f2bbe5cefcf25a7efef5b8c73ea029 Mon Sep 17 00:00:00 2001
From: jflattery <6561797+jflattery@users.noreply.github.com>
Date: Wed, 13 Apr 2022 15:00:20 +0000
Subject: [PATCH 1/4] Add episode number

Add episode number to list group view
---
 client/components/tables/podcast/EpisodeTableRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/tables/podcast/EpisodeTableRow.vue b/client/components/tables/podcast/EpisodeTableRow.vue
index aeb5f4ee..a41360c4 100644
--- a/client/components/tables/podcast/EpisodeTableRow.vue
+++ b/client/components/tables/podcast/EpisodeTableRow.vue
@@ -22,7 +22,7 @@
           <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
             <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
           </ui-tooltip>
-
+          <p v-if="episode.episode" class="px-4 text-sm text-gray-300">Episode #{{ episode.episode }}</p>
           <p v-if="publishedAt" class="px-4 text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
         </div>
       </div>

From b1a9de819e5c31fe0fd540979df1b8bbdf824cb9 Mon Sep 17 00:00:00 2001
From: jflattery <6561797+jflattery@users.noreply.github.com>
Date: Wed, 13 Apr 2022 19:10:03 +0000
Subject: [PATCH 2/4] Improve Accessibility: Zoom Labels

---
 client/components/widgets/CoverSizeWidget.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/widgets/CoverSizeWidget.vue b/client/components/widgets/CoverSizeWidget.vue
index 5abdb03b..96004b65 100644
--- a/client/components/widgets/CoverSizeWidget.vue
+++ b/client/components/widgets/CoverSizeWidget.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
-      <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
+      <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size">remove</span>
       <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
-      <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize">add</span>
+      <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size">add</span>
     </div>
   </div>
 </template>

From 9b30a8ff4bf49fbc981c9a9ce8a2462c43351fe6 Mon Sep 17 00:00:00 2001
From: jflattery <6561797+jflattery@users.noreply.github.com>
Date: Wed, 13 Apr 2022 19:14:44 +0000
Subject: [PATCH 3/4] Accessibility Labels: User Account Icon

---
 client/components/ui/Menu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/ui/Menu.vue b/client/components/ui/Menu.vue
index d7e52768..0aae086e 100644
--- a/client/components/ui/Menu.vue
+++ b/client/components/ui/Menu.vue
@@ -5,7 +5,7 @@
         <span class="block truncate">{{ label }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons text-gray-100">person</span>
+        <span class="material-icons text-gray-100" aria-label="User Account">person</span>
       </span>
     </button>
 

From e1af25d9d8d703294b4651fba0e1d5027bfcb288 Mon Sep 17 00:00:00 2001
From: jflattery <6561797+jflattery@users.noreply.github.com>
Date: Wed, 13 Apr 2022 20:17:00 +0000
Subject: [PATCH 4/4] Accessible tweaks

---
 client/components/app/Appbar.vue              | 6 +++---
 client/components/ui/Menu.vue                 | 2 +-
 client/components/widgets/CoverSizeWidget.vue | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue
index 0c24af63..832df9fc 100644
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -23,15 +23,15 @@
         </div>
 
         <nuxt-link to="/config/stats" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
-          <span class="material-icons">equalizer</span>
+          <span class="material-icons" aria-label="User Stats" role="button">equalizer</span>
         </nuxt-link>
 
         <nuxt-link v-if="userCanUpload" to="/upload" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
-          <span class="material-icons">upload</span>
+          <span class="material-icons" aria-label="Upload Media" role="button">upload</span>
         </nuxt-link>
 
         <nuxt-link v-if="isRootUser" to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
-          <span class="material-icons">settings</span>
+          <span class="material-icons" aria-label="System Settings" role="button">settings</span>
         </nuxt-link>
 
         <nuxt-link to="/account" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded shadow-sm ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
diff --git a/client/components/ui/Menu.vue b/client/components/ui/Menu.vue
index 0aae086e..7a6036fb 100644
--- a/client/components/ui/Menu.vue
+++ b/client/components/ui/Menu.vue
@@ -5,7 +5,7 @@
         <span class="block truncate">{{ label }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons text-gray-100" aria-label="User Account">person</span>
+        <span class="material-icons text-gray-100" aria-label="User Account" role="button">person</span>
       </span>
     </button>
 
diff --git a/client/components/widgets/CoverSizeWidget.vue b/client/components/widgets/CoverSizeWidget.vue
index 96004b65..12f52f26 100644
--- a/client/components/widgets/CoverSizeWidget.vue
+++ b/client/components/widgets/CoverSizeWidget.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
-      <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size">remove</span>
+      <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size" role="button">remove</span>
       <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
-      <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size">add</span>
+      <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size" role="button">add</span>
     </div>
   </div>
 </template>