feat(responsive-nav): added aria-controls

Added aria-controls and handler for click on navigation links to close menu
1024pix · Nov 27, 2024 · 7a91a53 · 7a91a53
1 parent b10f1d6
commit 7a91a53
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/addon/components/pix-navigation.hbs b/addon/components/pix-navigation.hbs
@@ -11,7 +11,12 @@
       >Menu</PixButton>
     </div>
   </header>
-  <nav class="pix-navigation__nav" aria-label={{@navigationAriaLabel}} id={{this.navigationId}}>
+  <nav
+    class="pix-navigation__nav"
+    {{on "click" this.handleNavigationClick}}
+    aria-label={{@navigationAriaLabel}}
+    id={{this.navigationId}}
+  >
     {{yield to="navElements"}}
   </nav>
   <footer class="pix-navigation__footer" id={{this.footerId}}>{{yield to="footer"}}</footer>

diff --git a/addon/components/pix-navigation.js b/addon/components/pix-navigation.js
@@ -16,6 +16,13 @@ export default class PixMNavigation extends Component {
     this.navigationMenuOpened = !this.navigationMenuOpened;
   }
 
+  @action
+  handleNavigationClick(event) {
+    if (event.target.nodeName === 'A') {
+      this.navigationMenuOpened = false;
+    }
+  }
+
   get navigationId() {
     return `${this._navigationId}-nav`;
   }