fix(telekom-profile-menu): keyboard accessibility & optional logout h…

…andler (#2306)

* fix(app-navigation-user-menu): keyboard activation of links & buttons

* fix(app-navigation-user-menu): optional clickHandler for logout button

* fix(app-navigation-user-menu): mention clickHandler property in storybook

* fix(app-navigation-user-menu): fixed link to component description in storybook

* fix(telekom-profile-menu): mention new optional logoutHandler in readme

packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx

@@ -88,10 +88,9 @@ export class AppNavigationUserMenu {
                   }}
                   onKeyDown={(e) => {
                     if ([' ', 'Enter'].includes(e.key)) {
-                      e.stopImmediatePropagation();
-                      e.preventDefault();
-
                       if (item.onClick) {
+                        e.stopImmediatePropagation();
+                        e.preventDefault();
                         item.onClick(e);
                       }
                       this.hide();
@@ -128,16 +127,17 @@ export class AppNavigationUserMenu {
                   part="button"
                   onClick={(e) => {
                     if (item.onClick) {
+                      e.stopImmediatePropagation();
+                      e.preventDefault();
                       item.onClick(e);
                     }
                     this.hide();
                   }}
                   onKeyDown={(e) => {
                     if ([' ', 'Enter'].includes(e.key)) {
-                      e.stopImmediatePropagation();
-                      e.preventDefault();
-
                       if (item.onClick) {
+                        e.stopImmediatePropagation();
+                        e.preventDefault();
                         item.onClick(e);
                       }
                       this.hide();

packages/components/src/components/telekom/telekom-profile-menu/readme.md

@@ -21,6 +21,7 @@
 | `loginSettingsLabel`          | `login-settings-label`           |             | `string`  | `undefined` |
 | `loginSettingsUrl`            | `login-settings-url`             |             | `string`  | `undefined` |
 | `loginUrl`                    | `login-url`                      |             | `string`  | `undefined` |
+| `logoutHandler`               | `logout-handler`                 |             | `string`  | `undefined` |
 | `logoutLabel`                 | `logout-label`                   |             | `string`  | `undefined` |
 | `logoutUrl`                   | `logout-url`                     |             | `string`  | `undefined` |
 | `registerHeadline`            | `register-headline`              |             | `string`  | `undefined` |

packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx

@@ -82,6 +82,7 @@ export class TelekomProfileMenu {
 
   @Prop() logoutLabel: string;
   @Prop() logoutUrl?: string;
+  @Prop() logoutHandler?: string;
 
   @State()
   menuOpen = false;
@@ -161,6 +162,16 @@ export class TelekomProfileMenu {
     );
   }
 
+  buildLogoutButton() {
+    return {
+      type: 'button',
+      name: this.logoutLabel,
+      href: this.logoutUrl || LOGOUT_DEFAULT,
+      variant: 'secondary',
+      onClick: this.logoutHandler,
+    };
+  }
+
   buildUserNavigation() {
     const divider = [{ type: 'divider' }];
 
@@ -187,13 +198,6 @@ export class TelekomProfileMenu {
       icon: 'service-settings',
     };
 
-    const logout = {
-      type: 'button',
-      name: this.logoutLabel,
-      href: this.logoutUrl || LOGOUT_DEFAULT,
-      variant: 'secondary',
-    };
-
     let menu = [];
 
     menu = menu.concat(userInfo);
@@ -211,7 +215,7 @@ export class TelekomProfileMenu {
       menu = menu.concat(divider);
     }
 
-    menu = menu.concat(logout);
+    menu = menu.concat(this.buildLogoutButton());
 
     return menu;
   }

packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx

@@ -539,6 +539,11 @@ window.onload = () => {
     email: '[email protected]',
   });
   profileMenu.serviceLinks = JSON.stringify(serviceLinks);
+
+  // optional: set a custom handler for clicks on logout button
+  profileMenu.logoutHandler = () => {
+    // ...
+  }
 };
 </script>
 ```
@@ -605,6 +610,11 @@ window.onload = () => {
     email: '[email protected]',
   });
   profileMenu.serviceLinks = JSON.stringify(serviceLinks);
+
+  // optional: set a custom handler for clicks on logout button
+  profileMenu.logoutHandler = () => {
+    // ...
+  }
 };
 </script>
 ```

packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md

@@ -126,4 +126,4 @@ This component is still in the beta phase. When testing it, keep in mind that it
 - [Sidebar Navigation](?path=/usage/components-sidebar-navigation--standard)
 - [Tab Navigation](?path=/usage/components-tab-navigation--text-icon)
 - [Accordion](?path=/usage/components-accordion--standard)
-- [Profile Menu](?path=/docs/components-telekom-profile-menu--logged-out)
+- [Profile Menu](?path=/docs/components-telekom-brand-header-navigation--profile-menu-logged-out)

packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md

@@ -127,4 +127,4 @@ Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenk
 - [Sidebar Navigation](?path=/usage/components-sidebar-navigation--standard)
 - [Tab Navigation](?path=/usage/components-tab-navigation--text-icon)
 - [Accordion](?path=/usage/components-accordion--standard)
-- [Profile Menu](?path=/docs/components-telekom-profile-menu--logged-out)
+- [Profile Menu](?path=/docs/components-telekom-brand-header-navigation--profile-menu-logged-out)