Correct use of aria-selected in FT

Note: was able to add aria-controls to ft-profile-selector because it keeps the hidden dropdown in the DOM. The same is not true of the ft-icon-button or ft-subscribe-button. Main point: aria-expanded should go on the button opening the dropdown, not the dropdown itself.
FreeTubeApp · Oct 27, 2023 · fffecfe · fffecfe
1 parent 002ffde
commit fffecfe
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -14,6 +14,7 @@
       }"
       tabindex="0"
       role="button"
+      :aria-expanded="dropdownShown"
       @click="handleIconClick"
       @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
@@ -33,7 +34,6 @@
             v-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
-            :aria-expanded="dropdownShown"
           >
             <li
               v-for="(option, index) in dropdownOptions"
@@ -71,7 +71,6 @@
             v-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
-            :aria-expanded="dropdownShown"
           >
             <li
               v-for="(option, index) in dropdownOptions"

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -6,6 +6,8 @@
       :style="{ background: activeProfile.bgColor, color: activeProfile.textColor }"
       tabindex="0"
       role="button"
+      :aria-expanded="profileListShown"
+      aria-controls="profileSelectorList"
       @click="toggleProfileList"
       @mousedown="handleIconMouseDown"
       @keydown.space.prevent="toggleProfileList"
@@ -19,6 +21,7 @@
     </div>
     <ft-card
       v-show="profileListShown"
+      id="profileSelectorList"
       ref="profileList"
       class="profileList"
       tabindex="-1"

diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
@@ -6,7 +6,7 @@
   box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
   display: flex;
   flex-wrap: nowrap;
-  /* addresses odd clipping behavior when adjusting window size*/
+  /* addresses odd clipping behavior when adjusting window size */
   background-color: var(--primary-color);
 }
 

diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
@@ -24,6 +24,7 @@
         class="profileDropdownToggle"
         background-color="var(--primary-color)"
         text-color="var(--text-with-main-color)"
+        :aria-expanded="isProfileDropdownOpen"
         @click="toggleProfileDropdown"
       >
         <font-awesome-icon
@@ -38,17 +39,14 @@
       >
         <ul
           class="profileList"
-          :aria-expanded="isProfileDropdownOpen"
         >
-          <!-- may want to make role="checkbox" -->
           <li
             v-for="(profile, index) in profileDisplayList"
             :id="'profile-' + index"
             :key="'subscription-profile-' + index"
             class="profile"
             :class="{
-              subscribed: isProfileSubscribed(profile),
-              unsubscribed: !isProfileSubscribed(profile)
+              subscribed: isProfileSubscribed(profile)
             }"
             :aria-labelledby="'profile-' + index + '-name'"
             :aria-selected="isActiveProfile(profile)"