fix(nav-icon): accessibility, role=button when no href (#1593)

telekom · Feb 17, 2023 · 0387bde · 0387bde
1 parent 2356ffa
commit 0387bde
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/packages/components/src/components/menu-flyout/menu-flyout.tsx b/packages/components/src/components/menu-flyout/menu-flyout.tsx
@@ -125,8 +125,13 @@ export class MenuFlyout {
     const triggerSlot = this.hostElement.querySelector(
       '[slot="trigger"]'
     ) as HTMLElement;
-    if (triggerSlot && triggerSlot.tagName.toUpperCase() === 'SCALE-BUTTON') {
+    const tagName = triggerSlot ? triggerSlot.tagName.toUpperCase() : '';
+    // TODO a different, more global, solution less dependent on tag names
+    // would be great…
+    if (triggerSlot && tagName === 'SCALE-BUTTON') {
       this.trigger = triggerSlot.shadowRoot.querySelector('button');
+    } else if (triggerSlot && tagName === 'SCALE-NAV-ICON') {
+      this.trigger = triggerSlot.querySelector('a');
     } else {
       this.trigger = triggerSlot;
     }

diff --git a/packages/components/src/components/telekom/app-header/app-header.tsx b/packages/components/src/components/telekom/app-header/app-header.tsx
@@ -324,6 +324,13 @@ export class Header {
                   refUserMenuToggle={(el) => (this.userMenuToggle = el)}
                   badge={badge}
                   badgeLabel={badgeLabel}
+                  onKeyDown={(event) => {
+                    // Handle Spacebar separately because actual trigger is an <a>
+                    if (event.key === ' ') {
+                      (event.target as HTMLElement).click();
+                      event.preventDefault();
+                    }
+                  }}
                 >
                   {shortName}
                 </scale-nav-icon>
@@ -356,6 +363,13 @@ export class Header {
                 }}
                 badge={badge}
                 badgeLabel={badgeLabel}
+                onKeyDown={(event) => {
+                  // Handle Spacebar separately because actual trigger is an <a>
+                  if (event.key === ' ') {
+                    (event.target as HTMLElement).click();
+                    event.preventDefault();
+                  }
+                }}
               >
                 {shortName}
               </scale-nav-icon>

diff --git a/packages/components/src/components/telekom/nav-icon/__snapshots__/nav-icon.spec.ts.snap b/packages/components/src/components/telekom/nav-icon/__snapshots__/nav-icon.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`nav-icon should match snapshot 1`] = `
 <scale-nav-icon>
   <!---->
   <li class="meta-navigation__item">
-    <a class="meta-navigation__item-link" href="javascript:void(0);">
+    <a class="meta-navigation__item-link" href="javascript:void(0);" role="button">
       <scale-icon-undefined class="meta-navigation__item-link-icon"></scale-icon-undefined>
       <span class="meta-navigation__item-label"></span>
     </a>

diff --git a/packages/components/src/components/telekom/nav-icon/nav-icon.tsx b/packages/components/src/components/telekom/nav-icon/nav-icon.tsx
@@ -71,6 +71,7 @@ export class NavIcon {
             this.refUserMenuToggle
           }
           href={this.href}
+          role={this.href === 'javascript:void(0);' ? 'button' : null}
           onClick={this.clickLink}
           onKeyDown={(event) => {
             if (!this.refMobileMenuToggle) {