From b8f0c2c38e41e01e5718bdc6948558d57c14c805 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 27 Oct 2023 00:35:18 -0500
Subject: [PATCH] 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.
---
 src/renderer/components/ft-icon-button/ft-icon-button.vue    | 3 +--
 .../components/ft-profile-selector/ft-profile-selector.vue   | 3 +++
 .../components/ft-subscribe-button/ft-subscribe-button.vue   | 5 ++---
 3 files changed, 6 insertions(+), 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
index b1760e528e600..c699f4392ddfc 100644
--- 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
index 5547c6d892572..bf612c2390b77 100644
--- 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"
@@ -21,6 +23,7 @@
       v-show="profileListShown"
       ref="profileList"
       class="profileList"
+      id="profileSelectorList"
       tabindex="-1"
       @focusout="handleProfileListFocusOut"
     >
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
index 1767123a78309..e722f569ad269 100644
--- 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)"