From 0387bde49935541e61c2338436aadf784c7fb7c4 Mon Sep 17 00:00:00 2001
From: Arturo Castillo Delgado <ac@iconstorm.com>
Date: Fri, 17 Feb 2023 09:43:52 -0600
Subject: [PATCH] fix(nav-icon): accessibility, role=button when no href
 (#1593)

---
 .../src/components/menu-flyout/menu-flyout.tsx     |  7 ++++++-
 .../components/telekom/app-header/app-header.tsx   | 14 ++++++++++++++
 .../nav-icon/__snapshots__/nav-icon.spec.ts.snap   |  2 +-
 .../src/components/telekom/nav-icon/nav-icon.tsx   |  1 +
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/menu-flyout/menu-flyout.tsx b/packages/components/src/components/menu-flyout/menu-flyout.tsx
index 317560bd51..db63579a55 100644
--- 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
index 52acce638c..8eabd38b2c 100644
--- 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
index 77fde00550..a3fbd8d4a0 100644
--- 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
index 306f8c5a1a..5d550b9434 100644
--- 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) {