fixing menu and button IDs

CityOfDetroit · Aug 12, 2024 · edbf154 · edbf154
1 parent 6cbefbf
commit edbf154
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/src/components/molecules/Dropdown/Dropdown.js b/src/components/molecules/Dropdown/Dropdown.js
@@ -51,9 +51,14 @@ export default class Dropdown extends HTMLElement {
       this.querySelector(
         'cod-button[data-bs-toggle="dropdown"]',
       ).addEventListener('click', this._onClick);
-      this.querySelector(
-        'cod-button[data-bs-toggle="dropdown"]')
-      .setAttribute('aria-controls', '#dropdown-id');
+      const buttonElt = this.querySelector(
+        'cod-button[data-bs-toggle="dropdown"]',
+      );
+      const menuId = this.querySelector('cod-dropdown-menu')
+      .getAttribute('id');
+      buttonElt 
+      .setAttribute('aria-controls', menuId);  
+
     }
     if (!this.shadowRoot.querySelector('div')) {
       this.shadowRoot.appendChild(this.dropdown);
@@ -68,23 +73,27 @@ export default class Dropdown extends HTMLElement {
     if (e.target.getAttribute('data-bs-toggle') === 'dropdown') {
       if (this.getAttribute('aria-expanded') === 'true') {
         this.setAttribute('aria-expanded', 'false');
-        this.parentElement
-          .querySelector('cod-dropdown-menu')
+        const dropdownMenu = this.parentElement
+          .querySelector('cod-dropdown-menu');
+        dropdownMenu
           .setAttribute('data-show', 'false');
-        this.parentElement
-          .querySelector('cod-dropdown-menu') 
+        dropdownMenu
           .setAttribute('aria-hidden', 'true');           
       } else {
         this.setAttribute('aria-expanded', 'true');
-        this.parentElement
-          .querySelector('cod-dropdown-menu') 
+        const dropdownMenu = this.parentElement
+          .querySelector('cod-dropdown-menu');
+        dropdownMenu
           .setAttribute('data-show', 'true');
+        dropdownMenu
+          .setAttribute('aria-hidden', 'false'); 
+
+        const buttonId = this.parentElement
+          .querySelector('cod-button')
+          .getAttribute('id');
         this.parentElement
-          .querySelector('cod-dropdown-menu') 
-          .setAttribute('aria-labelledby', '#button-id');
-        this.parentElement
-          .querySelector('cod-dropdown-menu') 
-          .setAttribute('aria-hidden', 'false');          
+          .querySelector('cod-dropdown-menu')
+          .setAttribute('aria-labelledby', buttonId);        
       }
     }
   }

diff --git a/src/stories/dropdown.stories.js b/src/stories/dropdown.stories.js
@@ -18,7 +18,7 @@ export const Basic = () => html`
       >
         Dropdown button
       </button>
-      <ul class="dropdown-menu" id="dropdown-menu">
+      <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li>
@@ -27,6 +27,7 @@ export const Basic = () => html`
       </ul>
     </div>
     <cod-button
+      id="dropdownControl"
       data-label="Dropdown button"
       data-background-color="primary"
       data-primary="true"
@@ -36,7 +37,7 @@ export const Basic = () => html`
       aria-expanded="false"
       data-extra-classes="dropdown-toggle"
     ></cod-button>
-    <cod-dropdown-menu>
+    <cod-dropdown-menu id="dropdownMenu">
       <li><a class="dropdown-item" href="#">Action</a></li>
       <li><a class="dropdown-item" href="#">Another action</a></li>
       <li><a class="dropdown-item" href="#">Something else here</a></li>