fix(user-menu): improve accessibility

packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx

@@ -140,7 +140,11 @@ export class MenuFlyoutList {
     if (!this.active) {
       return;
     }
-    event.preventDefault();
+
+    if (!this.hostElement.querySelector('app-navigation-user-menu')) {
+      event.preventDefault();
+    }
+
     if ('ArrowDown' === event.key) {
       this.shiftItemsFocus();
       return;

packages/components/src/components/menu-flyout/menu-flyout.tsx

@@ -88,7 +88,10 @@ export class MenuFlyout {
 
   @Listen('keydown')
   handleKeydown(event: KeyboardEvent) {
-    if ('Tab' === event.key) {
+    if (
+      'Tab' === event.key &&
+      !this.hostElement.querySelector('app-navigation-user-menu')
+    ) {
       this.closeAll();
       return;
     }

packages/components/src/components/telekom/app-header/app-header.tsx

@@ -325,6 +325,7 @@ export class Header {
                     hide={() => {
                       this.userMenu = false;
                       this.userMenuToggle.focus();
+                      window.document.dispatchEvent(new Event('click'));
                     }}
                     navigation={readData(this.userNavigation)}
                   ></app-navigation-user-menu>

packages/storybook-vue/stories/3_components/flyout-menu/MenuFlyout.stories.mdx

@@ -456,97 +456,3 @@ There are two known issues with the JAWS2019 screen reader and Google Chrome, th
   <!-- content -->
 </scale-app-shell>
 ```
-
-## Brand Header User Menu
-
-<Canvas withSource="none">
-  <Story name="Brand Header User Menu" inline={false} height={500}>
-    {() => ({
-      data() {
-        return {
-          portalName: '',
-          claimLang: 'en',
-          mainNavigation: JSON.stringify(mainNavigation),
-          addonNavigation: JSON.stringify(addonNavigation),
-          sectorNavigation: JSON.stringify(sectorNavigation),
-          activeRouteId: 'Third Level 24',
-          activeSectorId: 'Personal38',
-        };
-      },
-      template: `
-        <div class="brand-header-spacing">
-          <scale-app-shell>
-            <scale-app-header
-              ref="header"
-              slot="header"
-              id="header"
-              :main-navigation="mainNavigation"
-              :sector-navigation="sectorNavigation"
-              :addon-navigation="addonNavigation"
-              :active-route-id="activeRouteId"
-              :active-sector-id="activeSectorId"
-            >
-              <div slot="menu-icon">
-                <scale-menu-flyout @scaleClose="$refs.userIcon.isActive = false" >
-                  <div slot="trigger">
-                    <scale-nav-icon icon="user-file-user" ref="userIcon" @click="$refs.userIcon.isActive = true">
-                      Alexander
-                    </scale-nav-icon>
-                  </div>
-                  <scale-menu-flyout-list>
-                    <scale-menu-flyout-item disabled styles=".menu-flyout-item--disabled { color: var(--scl-color-text-standard) !important; } .menu-flyout-item { cursor: auto !important; }">Alexander Dreyer</scale-menu-flyout-item>
-                    <scale-menu-flyout-item disabled styles=".menu-flyout-item--disabled { color: var(--scl-color-grey-50) !important; }.menu-item { cursor: auto !important; }">alexander.dreyer@t-online.de</scale-menu-flyout-item>
-                    <scale-menu-flyout-divider></scale-menu-flyout-divider>
-                    <scale-menu-flyout-item>Kundencenter</scale-menu-flyout-item>
-                    <scale-menu-flyout-item>Login-Einstellungen</scale-menu-flyout-item>
-                    <scale-menu-flyout-item>Miscellaneous</scale-menu-flyout-item>
-                    <scale-menu-flyout-divider></scale-menu-flyout-divider>
-                    <scale-menu-flyout-item>Logout<scale-icon-action-logout slot="suffix"></scale-icon-action-logout></scale-menu-flyout-item>
-                  </scale-menu-flyout-list>
-                </scale-menu-flyout>
-              </div>
-            </scale-app-header>
-            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>
-            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>
-          </scale-app-shell>
-        </div>
-      `,
-    })}
-  </Story>
-</Canvas>
-
-```html
-<scale-app-shell>
-  <scale-app-header
-    ref="header"
-    slot="header"
-    id="header"
-    :main-navigation="mainNavigation"
-    :sector-navigation="sectorNavigation"
-    :addon-navigation="addonNavigation"
-    :active-route-id="activeRouteId"
-    :active-sector-id="activeSectorId"
-  >
-    <div slot="menu-icon">
-      <scale-menu-flyout @scaleClose="$refs.userIcon.isActive = false" >
-        <div slot="trigger" >
-          <scale-nav-icon icon="user-file-user" ref="userIcon" @click="$refs.userIcon.isActive = true">
-            Alexander
-          </scale-nav-icon>
-        </div>
-        <scale-menu-flyout-list>
-          <scale-menu-flyout-item disabled styles=".menu-flyout-item--disabled { color: var(--scl-color-text-standard) !important; } .menu-flyout-item { cursor: auto !important; }">Alexander Dreyer</scale-menu-flyout-item>
-          <scale-menu-flyout-item disabled styles=".menu-flyout-item--disabled { color: var(--scl-color-grey-50) !important; }.menu-item { cursor: auto !important; }">alexander.dreyer@t-online.de</scale-menu-flyout-item>
-          <scale-menu-flyout-divider></scale-menu-flyout-divider>
-          <scale-menu-flyout-item>Kundencenter</scale-menu-flyout-item>
-          <scale-menu-flyout-item>Login-Einstellungen</scale-menu-flyout-item>
-          <scale-menu-flyout-item>Miscellaneous</scale-menu-flyout-item>
-          <scale-menu-flyout-divider></scale-menu-flyout-divider>
-          <scale-menu-flyout-item>Logout<scale-icon-action-logout slot="suffix"></scale-icon-action-logout></scale-menu-flyout-item>
-        </scale-menu-flyout-list>
-      </scale-menu-flyout>
-    </div>
-  </scale-app-header>
-  <!-- content -->
-</scale-app-shell>
-```