From 1ab958ba6b0ad1e1449fd8fe6b0bc8729520ce12 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 15:30:23 -0500
Subject: Make quick settings menus more accessible

---
 .../quick_view_settings/quick_view_settings.vue    | 65 +++++++++++++++-------
 1 file changed, 46 insertions(+), 19 deletions(-)

(limited to 'src/components/quick_view_settings/quick_view_settings.vue')

diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 4bd81c5b..9f5cdabc 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -6,60 +6,87 @@
     :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
-      <div class="dropdown-menu">
-        <button
-          class="button-default dropdown-item"
-          @click="conversationDisplay = 'tree'"
-        >
-          <span
-            class="menu-checkbox -radio"
-            :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
-          /><FAIcon icon="folder-tree" /> {{ $t('settings.conversation_display_tree_quick') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="conversationDisplay = 'linear'"
-        >
-          <span
-            class="menu-checkbox -radio"
-            :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
-          /><FAIcon icon="list" /> {{ $t('settings.conversation_display_linear_quick') }}
-        </button>
+      <div
+        class="dropdown-menu"
+        role="menu"
+      >
+        <div role="group">
+          <button
+            class="button-default dropdown-item"
+            :aria-checked="conversationDisplay === 'tree'"
+            role="menuitemradio"
+            @click="conversationDisplay = 'tree'"
+          >
+            <span
+              class="menu-checkbox -radio"
+              :aria-hidden="true"
+              :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+            /><FAIcon
+              icon="folder-tree"
+              :aria-hidden="true"
+            /> {{ $t('settings.conversation_display_tree_quick') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            :aria-checked="conversationDisplay === 'linear'"
+            role="menuitemradio"
+            @click="conversationDisplay = 'linear'"
+          >
+            <span
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
+              :aria-hidden="true"
+            /><FAIcon
+              icon="list"
+              :aria-hidden="true"
+            /> {{ $t('settings.conversation_display_linear_quick') }}
+          </button>
+        </div>
         <div
           role="separator"
           class="dropdown-divider"
         />
         <button
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="showUserAvatars"
           @click="showUserAvatars = !showUserAvatars"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': showUserAvatars }"
+            :aria-hidden="true"
           />{{ $t('settings.mention_link_show_avatar_quick') }}
         </button>
         <button
           v-if="!conversation"
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="autoUpdate"
           @click="autoUpdate = !autoUpdate"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': autoUpdate }"
+            :aria-hidden="true"
           />{{ $t('settings.auto_update') }}
         </button>
         <button
           v-if="!conversation"
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="collapseWithSubjects"
           @click="collapseWithSubjects = !collapseWithSubjects"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
+            :aria-hidden="true"
           />{{ $t('settings.collapse_subject') }}
         </button>
         <button
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click="openTab('general')"
         >
           <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
-- 
cgit v1.2.3-70-g09d2