diff --git a/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx b/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx index 79f1975df5..41a112a82e 100644 --- a/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx +++ b/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx @@ -62,9 +62,6 @@ export class MenuFlyoutList { /** (optional) set to true to prevent flipping orientation when off the screen vertically */ @Prop() preventFlipVertical: boolean = false; - /** (optional) override to set a custom role */ - @Prop() role? = 'menu'; - /** Event triggered when menu list opened */ @Event({ eventName: 'scale-open' }) scaleOpen: EventEmitter<{ list: HTMLElement; @@ -107,6 +104,12 @@ export class MenuFlyoutList { return this.trigger().getBoundingClientRect(); } + componentDidLoad() { + if (!this.hostElement.hasAttribute('role')) { + this.hostElement.setAttribute('role', 'menu'); + } + } + componentDidRender() { if (this.opened && this.needsCheckPlacement) { this.setSize(); @@ -475,7 +478,7 @@ export class MenuFlyoutList { render() { return ( - + {this.styles && }
{ if ( @@ -35,7 +35,7 @@ export class MenuFlyout { /** (optional) Determines whether the flyout should close when a menu item is selected */ @Prop() closeOnSelect = true; /** (optional) Determines whether the flyout trigger should get the aria-haspopup attribute */ - @Prop() hasPopup = true; + @Prop() triggerHasPopup = true; /** (optional) Set preference for where the menu appears, space permitting */ @Prop() direction: | 'bottom-right' @@ -154,12 +154,10 @@ export class MenuFlyout { .concat([isButtonOrLink(this.trigger)]) .filter((x) => x != null); triggers.forEach((el) => { - if (this.hasPopup) { + if (this.triggerHasPopup) { el.setAttribute('aria-haspopup', 'true'); } - - el.setAttribute('class', 'scale-menu-trigger'); - + el.classList.add('scale-menu-trigger'); el.setAttribute('aria-expanded', 'false'); }); } diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css index ebd75945cc..15a0277e18 100644 --- a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css +++ b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css @@ -9,6 +9,9 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ + +@import url('../../../global/custom-media.css'); + scale-menu-flyout { display: flex; height: 100%; @@ -55,8 +58,6 @@ scale-menu-flyout { } } -@import url('../../../global/custom-media.css'); - .user-menu-mobile { display: flex; height: 100%; 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 6b9e93435c..690a1a4b56 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 @@ -266,7 +266,7 @@ export class TelekomProfileMenu { direction="bottom-left" onScale-open={(event: any) => this.openMenu(event)} onScale-close={(event: any) => this.closeMenu(event)} - hasPopup={false} + triggerHasPopup={false} >