From bb7aabdb0a56ccdce245947bd35e69861bf3bc17 Mon Sep 17 00:00:00 2001 From: tallence-dsulyok <118277128+tallence-dsulyok@users.noreply.github.com> Date: Fri, 12 Apr 2024 10:29:22 +0200 Subject: [PATCH] fix(telekom-profile-menu): keyboard accessibility & optional logout handler (#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 --- .../app-navigation-user-menu.tsx | 12 +++++------ .../telekom/telekom-profile-menu/readme.md | 1 + .../telekom-profile-menu.tsx | 20 +++++++++++-------- .../TelekomBrandHeader.stories.mdx | 10 ++++++++++ .../telekom-brand-header.md | 2 +- .../telekom-brand-header_de.md | 2 +- 6 files changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx index d46c24ff23..d9c5714e68 100644 --- a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx +++ b/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(); diff --git a/packages/components/src/components/telekom/telekom-profile-menu/readme.md b/packages/components/src/components/telekom/telekom-profile-menu/readme.md index 09d31538a8..3e10d59084 100644 --- a/packages/components/src/components/telekom/telekom-profile-menu/readme.md +++ b/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` | diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx index 99b72b80ba..598db4e56e 100644 --- a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx +++ b/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; } diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx index 3c51e59f24..53d025a5d5 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx +++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx @@ -539,6 +539,11 @@ window.onload = () => { email: 'alexander.dreyer@t-online.de', }); profileMenu.serviceLinks = JSON.stringify(serviceLinks); + + // optional: set a custom handler for clicks on logout button + profileMenu.logoutHandler = () => { + // ... + } }; ``` @@ -605,6 +610,11 @@ window.onload = () => { email: 'alexander.dreyer@t-online.de', }); profileMenu.serviceLinks = JSON.stringify(serviceLinks); + + // optional: set a custom handler for clicks on logout button + profileMenu.logoutHandler = () => { + // ... + } }; ``` diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md index d2a79f44a2..53b7a2d88a 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md +++ b/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) diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md index ae50cab8df..9e669e313d 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md +++ b/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)