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 · f381640 · f381640
1 parent 002ffde
commit f381640
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 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="dropdownShown"
+      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.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,7 +39,6 @@
       >
         <ul
           class="profileList"
-          :aria-expanded="isProfileDropdownOpen"
         >
           <!-- may want to make role="checkbox" -->
           <li
@@ -47,8 +47,7 @@
             :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)"