From 18287345bdc3937f2fbeb42ce5727366f89fa45d Mon Sep 17 00:00:00 2001
From: Roy Lane <rlane@mitre.org>
Date: Wed, 27 Nov 2024 08:47:16 -0500
Subject: [PATCH] NavigationSidebar: use "title" attribute in SVG for
 collapse/expand accessibility text

---
 src/components/NavigationSidebar.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/NavigationSidebar.vue b/src/components/NavigationSidebar.vue
index 88badb19..48252b5a 100644
--- a/src/components/NavigationSidebar.vue
+++ b/src/components/NavigationSidebar.vue
@@ -18,18 +18,17 @@
           <button class="button is-text cve-button-submenu-toggle"
             @click="submenuObj.hasOwnProperty('items') && toggleSubmenuItem(`/${nav.path}/${submenuObj.path}`)"
             :class="{'is-hidden': !submenuObj.hasOwnProperty('items')}"
-            :aria-expanded="selectedSubmenu.includes(`/${nav.path}/${submenuObj.path}`) ? 'true' : 'false'"
+            :aria-expanded="isExpanded(submenuObj) ? 'true' : 'false'"
             :aria-controls="submenuObj.id + 'nav'">
             <span class="icon cve-icon-xxs">
-              <p :id="'navExpandCollapseAltText' + submenuObj.id" class="is-hidden">
-                {{!selectedSubmenu.includes(`/${nav.path}/${submenuObj.path}`) ? 'collapse' : 'expand'}}
-              </p>
-              <font-awesome-icon class="icon" :icon="selectedSubmenu.includes(`/${nav.path}/${submenuObj.path}`) ? 'minus' : 'plus'"
+              <font-awesome-icon class="icon"
+                :icon="isExpanded(submenuObj) ? 'minus' : 'plus'"
+                :title="isExpanded(submenuObj) ? 'collapse' : 'expand'"
                 aria-hidden="false" focusable="true" :aria-labelledby="'navExpandCollapseAltText' + submenuObj.id"/>
             </span>
           </button>
         </span>
-        <ul v-if="selectedSubmenu.includes(`/${nav.path}/${submenuObj.path}`)" :id="submenuObj.id + 'nav'">
+        <ul v-if="isExpanded(submenuObj)" :id="submenuObj.id + 'nav'">
           <li v-for="(submenuItem, label) in submenuObj.items" :key="`${submenuObj.id}-${label}`">
             <router-link :class="isExactPath(`/${nav.path}/${submenuObj.path}#${submenuItem.anchorId}`) ? '' : 'cve-not-active-link'"
               :to="`/${nav.path}/${submenuObj.path}#${submenuItem.anchorId}`" >{{ submenuItem.label }}</router-link>
@@ -60,6 +59,9 @@ export default {
     };
   },
   methods: {
+    isExpanded(submenuObj) {
+      return this.selectedSubmenu.includes(`/${this.nav.path}/${submenuObj.path}`);
+    },
     toggleSubmenuItem(path) {
       if (this.selectedSubmenu.includes(path)) {
         const index = this.selectedSubmenu.indexOf(path);