From 0a3a8e7581b438ddebbd3ddec3d488403a44fead Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Thu, 28 May 2026 12:26:37 +0200 Subject: [PATCH 01/36] menu pattern implementation --- packages/core/src/components.d.ts | 15 +++ .../menu-category/menu-category.tsx | 9 +- .../src/components/menu-item/menu-item.tsx | 51 ++++++++- packages/core/src/components/menu/menu.tsx | 100 ++++++++++++++++++ 4 files changed, 171 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index ecfff15c2f7..4418f91d953 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2605,6 +2605,7 @@ export namespace Components { * Show notification count on the category */ "notifications"?: number; + "setTabIndex": (value: number) => Promise; /** * Will be shown as tooltip text, if not provided menu text content will be used. * @since 4.0.0 @@ -2684,6 +2685,7 @@ export namespace Components { * @since 4.0.0 */ "rel"?: string; + "setTabIndex": (value: number) => Promise; /** * Specifies where to open the linked document when href is provided. * @since 4.0.0 @@ -3148,6 +3150,8 @@ export namespace Components { | 'success' | 'custom'; } + interface IxPlayground { + } /** * @since 3.2.0 */ @@ -5829,6 +5833,12 @@ declare global { prototype: HTMLIxPillElement; new (): HTMLIxPillElement; }; + interface HTMLIxPlaygroundElement extends Components.IxPlayground, HTMLStencilElement { + } + var HTMLIxPlaygroundElement: { + prototype: HTMLIxPlaygroundElement; + new (): HTMLIxPlaygroundElement; + }; /** * @since 3.2.0 */ @@ -6351,6 +6361,7 @@ declare global { "ix-pane": HTMLIxPaneElement; "ix-pane-layout": HTMLIxPaneLayoutElement; "ix-pill": HTMLIxPillElement; + "ix-playground": HTMLIxPlaygroundElement; "ix-progress-indicator": HTMLIxProgressIndicatorElement; "ix-push-card": HTMLIxPushCardElement; "ix-radio": HTMLIxRadioElement; @@ -9647,6 +9658,8 @@ declare namespace LocalJSX { | 'success' | 'custom'; } + interface IxPlayground { + } /** * @since 3.2.0 */ @@ -12247,6 +12260,7 @@ declare namespace LocalJSX { "ix-pane": Omit & { [K in keyof IxPane & keyof IxPaneAttributes]?: IxPane[K] } & { [K in keyof IxPane & keyof IxPaneAttributes as `attr:${K}`]?: IxPaneAttributes[K] } & { [K in keyof IxPane & keyof IxPaneAttributes as `prop:${K}`]?: IxPane[K] }; "ix-pane-layout": Omit & { [K in keyof IxPaneLayout & keyof IxPaneLayoutAttributes]?: IxPaneLayout[K] } & { [K in keyof IxPaneLayout & keyof IxPaneLayoutAttributes as `attr:${K}`]?: IxPaneLayoutAttributes[K] } & { [K in keyof IxPaneLayout & keyof IxPaneLayoutAttributes as `prop:${K}`]?: IxPaneLayout[K] }; "ix-pill": Omit & { [K in keyof IxPill & keyof IxPillAttributes]?: IxPill[K] } & { [K in keyof IxPill & keyof IxPillAttributes as `attr:${K}`]?: IxPillAttributes[K] } & { [K in keyof IxPill & keyof IxPillAttributes as `prop:${K}`]?: IxPill[K] }; + "ix-playground": IxPlayground; "ix-progress-indicator": Omit & { [K in keyof IxProgressIndicator & keyof IxProgressIndicatorAttributes]?: IxProgressIndicator[K] } & { [K in keyof IxProgressIndicator & keyof IxProgressIndicatorAttributes as `attr:${K}`]?: IxProgressIndicatorAttributes[K] } & { [K in keyof IxProgressIndicator & keyof IxProgressIndicatorAttributes as `prop:${K}`]?: IxProgressIndicator[K] }; "ix-push-card": Omit & { [K in keyof IxPushCard & keyof IxPushCardAttributes]?: IxPushCard[K] } & { [K in keyof IxPushCard & keyof IxPushCardAttributes as `attr:${K}`]?: IxPushCardAttributes[K] } & { [K in keyof IxPushCard & keyof IxPushCardAttributes as `prop:${K}`]?: IxPushCard[K] }; "ix-radio": Omit & { [K in keyof IxRadio & keyof IxRadioAttributes]?: IxRadio[K] } & { [K in keyof IxRadio & keyof IxRadioAttributes as `attr:${K}`]?: IxRadioAttributes[K] } & { [K in keyof IxRadio & keyof IxRadioAttributes as `prop:${K}`]?: IxRadio[K] }; @@ -12388,6 +12402,7 @@ declare module "@stencil/core" { "ix-pane": LocalJSX.IntrinsicElements["ix-pane"] & JSXBase.HTMLAttributes; "ix-pane-layout": LocalJSX.IntrinsicElements["ix-pane-layout"] & JSXBase.HTMLAttributes; "ix-pill": LocalJSX.IntrinsicElements["ix-pill"] & JSXBase.HTMLAttributes; + "ix-playground": LocalJSX.IntrinsicElements["ix-playground"] & JSXBase.HTMLAttributes; /** * @since 3.2.0 */ diff --git a/packages/core/src/components/menu-category/menu-category.tsx b/packages/core/src/components/menu-category/menu-category.tsx index d1cbe7fe376..9cb88f0508a 100644 --- a/packages/core/src/components/menu-category/menu-category.tsx +++ b/packages/core/src/components/menu-category/menu-category.tsx @@ -15,10 +15,11 @@ import { h, Host, Listen, + Method, + Mixin, Prop, State, Watch, - Mixin, } from '@stencil/core'; import { animate } from 'animejs'; import { closestIxMenu } from '../utils/application-layout/context'; @@ -78,6 +79,12 @@ export class MenuCategory @State() showDropdown = false; @State() nestedItems: HTMLIxMenuItemElement[] = []; + /** @internal */ + @Method() + async setTabIndex(value: number) { + await this.categoryParentRef.current?.setTabIndex(value); + } + private observer?: MutationObserver; private menuItemsContainer?: HTMLDivElement; private ixMenu?: HTMLIxMenuElement; diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx index 2111c2c0c2a..37eb592d800 100644 --- a/packages/core/src/components/menu-item/menu-item.tsx +++ b/packages/core/src/components/menu-item/menu-item.tsx @@ -8,7 +8,16 @@ */ import { iconDocument } from '@siemens/ix-icons/icons'; -import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'; +import { + Component, + Element, + h, + Host, + Method, + Prop, + State, + Watch, +} from '@stencil/core'; import { AnchorTarget } from '../button/button.interface'; import { a11yBoolean, a11yHostAttributes } from '../utils/a11y'; import { makeRef } from '../utils/make-ref'; @@ -104,6 +113,14 @@ export class MenuItem implements IxMenuItemBase { @State() tooltip?: string; @State() ariaHiddenTooltip = false; @State() menuExpanded: boolean = false; + @State() private isInMenuContext = false; + @State() private hostTabIndex = -1; + + /** @internal */ + @Method() + async setTabIndex(value: number) { + this.hostTabIndex = value; + } private readonly internalItemId = createSequentialId( 'ix-menu-item-', @@ -122,6 +139,14 @@ export class MenuItem implements IxMenuItemBase { this.isHostedInsideCategory = !!this.hostElement.closest('ix-menu-category'); + const rootNode = this.hostElement.getRootNode(); + const isInMenuShadowDOM = + rootNode instanceof ShadowRoot && + rootNode.host?.tagName?.toLowerCase() === 'ix-menu'; + const isDirectMenuChild = + !this.isHostedInsideCategory && !!this.hostElement.closest('ix-menu'); + this.isInMenuContext = isInMenuShadowDOM || isDirectMenuChild; + this.onIconChange(); this.menuExpanded = menuController.nativeElement?.expand || false; @@ -236,8 +261,18 @@ export class MenuItem implements IxMenuItemBase { 'ix-focusable': !this.disabled, }} aria-disabled={this.disabled ? 'true' : null} - tabIndex={this.disabled ? -1 : 0} - role={this.isHostedInsideCategory ? 'menuitem' : undefined} + tabIndex={ + this.disabled + ? -1 + : this.isInMenuContext || this.isCategory + ? this.hostTabIndex + : 0 + } + role={ + this.isHostedInsideCategory || this.isCategory || this.isInMenuContext + ? 'menuitem' + : undefined + } {...extendedAttributes} > {this.href ? ( @@ -246,6 +281,11 @@ export class MenuItem implements IxMenuItemBase { href={this.disabled ? undefined : this.href} target={this.target} rel={this.rel} + tabIndex={ + this.isInMenuContext || this.isCategory + ? this.hostTabIndex + : undefined + } ref={this.buttonRef} onKeyDown={(e: KeyboardEvent) => this.handleCategoryKeyDown(e)} onClick={(e: Event) => { @@ -260,6 +300,11 @@ export class MenuItem implements IxMenuItemBase { ) : ( @@ -345,7 +346,7 @@ export class MenuItem placement={'right'} showDelay={1000} interactive={false} - aria-hidden={a11yBoolean(this.ariaHiddenTooltip)} + aria-hidden="true" aria-labelledby={this.internalItemId} > {this.tooltip} diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index 7f6b207211a..6b1146b8315 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -803,6 +803,7 @@ export class Menu { tabs: true, 'show-scrollbar': this.expand, }} + role="group" tabIndex={this.isMenuItemsOverflow ? 0 : -1} onScroll={() => this.handleOverflowIndicator()} > diff --git a/packages/react/src/components/components.server.ts b/packages/react/src/components/components.server.ts index 902c3c95497..d84bd9aa592 100644 --- a/packages/react/src/components/components.server.ts +++ b/packages/react/src/components/components.server.ts @@ -1283,7 +1283,8 @@ export const IxMenuItem: StencilReactComponent, clientModule: clientComponents.IxMenuItem as StencilReactComponent, diff --git a/packages/vue/src/components/ix-menu-item.ts b/packages/vue/src/components/ix-menu-item.ts index 243cbc4cf3b..ab2d84223b5 100644 --- a/packages/vue/src/components/ix-menu-item.ts +++ b/packages/vue/src/components/ix-menu-item.ts @@ -18,5 +18,6 @@ export const IxMenuItem: StencilVueComponent = /*@__PURE__*/ def 'href', 'target', 'rel', - 'isCategory' + 'isCategory', + 'menuCategoryLabel' ]); From 60c1be17df38f6481f398eab3aafab35a8c520ba Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Thu, 11 Jun 2026 13:26:10 +0200 Subject: [PATCH 10/36] a11y violation fixes --- packages/core/src/components/menu/menu.tsx | 32 ++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index 6b1146b8315..590c947086f 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -620,6 +620,8 @@ export class Menu { } private updateRovingTabIndex(items: HTMLElement[], activeIndex: number) { + this.updateMenuItemPositionMetadata(items); + items.forEach((item, i) => { ( item as HTMLElement & { setTabIndex?: (v: number) => void } @@ -627,6 +629,32 @@ export class Menu { }); } + // item positions and menu size has to be set manually because slotted items and utility controls are sepparated into two groups + private updateMenuItemPositionMetadata(items: HTMLElement[]) { + const allMenuItems = [ + ...Array.from( + this.hostElement.querySelectorAll('ix-menu-item') + ), + ...Array.from( + this.hostElement.shadowRoot?.querySelectorAll( + '.menu-utility-controls > ix-menu-item' + ) ?? [] + ), + ]; + + allMenuItems.forEach((item) => { + item.removeAttribute('aria-posinset'); + item.removeAttribute('aria-setsize'); + }); + + const total = items.length; + + items.forEach((item, index) => { + item.setAttribute('aria-posinset', String(index + 1)); + item.setAttribute('aria-setsize', String(total)); + }); + } + private handleMenuFocusIn(event: FocusEvent) { const items = this.getAllFocusableItems(); const path = event.composedPath(); @@ -830,7 +858,7 @@ export class Menu {
-
+
{this.settings ? ( ) : null} From e248e05bd04678bfcd0d968ef3b1116f3eb36be8 Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Thu, 11 Jun 2026 14:20:44 +0200 Subject: [PATCH 11/36] remove useless padding --- packages/core/src/components/menu/menu.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/core/src/components/menu/menu.scss b/packages/core/src/components/menu/menu.scss index 18cc4857e42..ddec4246407 100644 --- a/packages/core/src/components/menu/menu.scss +++ b/packages/core/src/components/menu/menu.scss @@ -69,8 +69,6 @@ $menu-expanded-width: 16rem; flex-direction: column; flex: 1 1 auto; min-height: 0; - padding-top: 2px; - padding-bottom: 2px; } .tabs--shadow { From bc0144c7ab15fcffb67f0b49e0a2a610ac42da0a Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Thu, 11 Jun 2026 16:28:57 +0200 Subject: [PATCH 12/36] fixes --- .../src/components/menu-item/menu-item.tsx | 26 ++++++++++--- packages/core/src/components/menu/menu.scss | 1 + packages/core/src/components/menu/menu.tsx | 37 ++++++++++++------- .../visual-testing/tests/menu/link/index.html | 20 +++------- 4 files changed, 49 insertions(+), 35 deletions(-) diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx index 7bbc4fcbfde..1f40d3a7e89 100644 --- a/packages/core/src/components/menu-item/menu-item.tsx +++ b/packages/core/src/components/menu-item/menu-item.tsx @@ -215,6 +215,23 @@ export class MenuItem } } + private getAriaLabel() { + if ('aria-label' in this.inheritAriaAttributes) { + return this.inheritAriaAttributes['aria-label']; + } + + const hasDistinctTooltip = + this.tooltipText && + this.tooltipText !== this.label && + this.tooltipText !== this.hostElement.textContent; + + if (hasDistinctTooltip) { + return `${this.label ?? this.menuCategoryLabel} ${this.tooltipText}`; + } + + return undefined; + } + private returnFocusToParentCategoryMenuItem() { const categoryElement = this.hostElement.closest('ix-menu-category'); @@ -280,12 +297,7 @@ export class MenuItem , ]; - const ariaLabel = - this.tooltipText && - this.tooltipText !== this.label && - this.tooltipText !== this.hostElement.textContent - ? `${this.label ?? this.menuCategoryLabel} ${this.tooltipText}` - : undefined; + const ariaLabel = this.getAriaLabel(); return ( {menuContent} @@ -337,6 +350,7 @@ export class MenuItem onKeyDown={(e: KeyboardEvent) => this.handleCategoryKeyDown(e)} aria-disabled={a11yBoolean(this.disabled)} aria-label={ariaLabel} + aria-current={this.active ? 'page' : undefined} > {menuContent} diff --git a/packages/core/src/components/menu/menu.scss b/packages/core/src/components/menu/menu.scss index ddec4246407..b1a09d5ed7d 100644 --- a/packages/core/src/components/menu/menu.scss +++ b/packages/core/src/components/menu/menu.scss @@ -83,6 +83,7 @@ $menu-expanded-width: 16rem; transition: opacity var(--theme-default-time); } + .tabs--shadow-top { top: 0; background: linear-gradient(var(--theme-color-shadow-1), transparent); diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index 590c947086f..b7c01df6ca8 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -619,24 +619,30 @@ export class Menu { return this.breakpoint === 'sm' && this.expand === false; } - private updateRovingTabIndex(items: HTMLElement[], activeIndex: number) { + private updateRovingTabIndex( + items: (HTMLIxMenuItemElement | HTMLIxMenuCategoryElement)[], + activeIndex: number + ) { this.updateMenuItemPositionMetadata(items); - items.forEach((item, i) => { - ( - item as HTMLElement & { setTabIndex?: (v: number) => void } - ).setTabIndex?.(i === activeIndex ? 0 : -1); - }); + items.forEach( + (item: HTMLIxMenuItemElement | HTMLIxMenuCategoryElement, i: number) => { + item.setTabIndex?.(i === activeIndex ? 0 : -1); + } + ); } // item positions and menu size has to be set manually because slotted items and utility controls are sepparated into two groups - private updateMenuItemPositionMetadata(items: HTMLElement[]) { + private updateMenuItemPositionMetadata( + items: (HTMLIxMenuItemElement | HTMLIxMenuCategoryElement)[] + ) { + // get all items unfiltered in case any of them changed state and became hidden or disabled const allMenuItems = [ ...Array.from( - this.hostElement.querySelectorAll('ix-menu-item') + this.hostElement.querySelectorAll('ix-menu-item') ), ...Array.from( - this.hostElement.shadowRoot?.querySelectorAll( + this.hostElement.shadowRoot?.querySelectorAll( '.menu-utility-controls > ix-menu-item' ) ?? [] ), @@ -664,20 +670,23 @@ export class Menu { } } - private getAllFocusableItems(): HTMLElement[] { + private getAllFocusableItems(): ( + | HTMLIxMenuItemElement + | HTMLIxMenuCategoryElement + )[] { const isNavigable = (el: HTMLElement) => !el.hasAttribute('disabled') && !el.hasAttribute('hidden') && this.isVisible(el); const lightItems = Array.from( - this.hostElement.querySelectorAll( - ':scope > ix-menu-item, :scope > ix-menu-category' - ) + this.hostElement.querySelectorAll< + HTMLIxMenuItemElement | HTMLIxMenuCategoryElement + >(':scope > ix-menu-item, :scope > ix-menu-category') ).filter(isNavigable); const utilityItems = Array.from( - this.hostElement.shadowRoot?.querySelectorAll( + this.hostElement.shadowRoot?.querySelectorAll( '.menu-utility-controls > ix-menu-item' ) ?? [] ).filter(isNavigable); diff --git a/testing/visual-testing/tests/menu/link/index.html b/testing/visual-testing/tests/menu/link/index.html index 494ffa35446..ff3412e0bda 100644 --- a/testing/visual-testing/tests/menu/link/index.html +++ b/testing/visual-testing/tests/menu/link/index.html @@ -18,22 +18,12 @@ - - Link 1 - + Link 1 - - Link 2 - - - Link 3 - - - Link 4 - - - Link 5 - + Link 2 + Link 3 + Link 4 + Link 5 From d55e2172f69d7120da0d8b4bc3a183b1b76c07be Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Thu, 11 Jun 2026 16:52:16 +0200 Subject: [PATCH 13/36] fixes --- .../src/components/menu-category/test/menu-category.ct.ts | 5 ++--- packages/core/src/components/toast/tests/toast.ct.ts | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/menu-category/test/menu-category.ct.ts b/packages/core/src/components/menu-category/test/menu-category.ct.ts index 5882a368816..c329f8c9298 100644 --- a/packages/core/src/components/menu-category/test/menu-category.ct.ts +++ b/packages/core/src/components/menu-category/test/menu-category.ct.ts @@ -327,11 +327,10 @@ regressionTest( const item1 = categoryElement.locator('ix-menu-item').nth(0); const item2 = categoryElement.locator('ix-menu-item').nth(1); - // Focus trapping inside dropdown await expect(item1).toHaveVisibleFocus(); - await page.keyboard.press('Tab'); + await page.keyboard.press('ArrowDown'); await expect(item2).toHaveVisibleFocus(); - await page.keyboard.press('Tab'); + await page.keyboard.press('ArrowDown'); await expect(item1).toHaveVisibleFocus(); await page.keyboard.press('Escape'); diff --git a/packages/core/src/components/toast/tests/toast.ct.ts b/packages/core/src/components/toast/tests/toast.ct.ts index f666f25a0c9..41ec1bd6b8e 100644 --- a/packages/core/src/components/toast/tests/toast.ct.ts +++ b/packages/core/src/components/toast/tests/toast.ct.ts @@ -65,7 +65,7 @@ regressionTest( `); - const settingsButton = page.getByRole('button', { name: 'Settings' }); + const settingsButton = page.getByRole('menuitem', { name: 'Settings' }); await settingsButton.click(); // Wait for the menu to be visible From 575e9ae62375b476954e0cd886a577531b9506a9 Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Fri, 12 Jun 2026 08:58:52 +0200 Subject: [PATCH 14/36] fix --- ...a-href-1-chromium---classic-dark-linux.png | Bin 16244 -> 16425 bytes ...-href-1-chromium---classic-light-linux.png | Bin 15541 -> 15549 bytes .../menu-about-news/menu-about-news.e2e.ts | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) diff --git a/testing/visual-testing/__screenshots__/tests/menu/menu.e2e.ts/menu-link---should-render-menu-items-with-a-href-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/menu/menu.e2e.ts/menu-link---should-render-menu-items-with-a-href-1-chromium---classic-dark-linux.png index bd73601bb64457c2645b474f31f2ce729e7d4160..df21dd32ec16e40e75a956fbe95dea7744ba94db 100644 GIT binary patch literal 16425 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 H?>zhuy{Fu* literal 16244 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 XBnI8{%lMryVSt61&86}S*Y5ovM@vw& diff --git a/testing/visual-testing/__screenshots__/tests/menu/menu.e2e.ts/menu-link---should-render-menu-items-with-a-href-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/menu/menu.e2e.ts/menu-link---should-render-menu-items-with-a-href-1-chromium---classic-light-linux.png index 02dd6d50c99e0eb0598a117efa733a1228300aa2..de2dd0b3b0d9402063425941798d304625078c7e 100644 GIT binary patch literal 15549 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 { const about = page .locator('ix-menu') - .getByRole('button', { name: 'About & legal information' }); + .getByRole('menuitem', { name: 'About & legal information' }); await about.click(); await page.waitForTimeout(500); From 7cdff0be432f6f711b4e6489c2053266f5320226 Mon Sep 17 00:00:00 2001 From: lzeiml Date: Fri, 12 Jun 2026 09:09:40 +0200 Subject: [PATCH 15/36] Enhance ix-menu accessibility with W3C pattern Improved **ix-menu** accessibility by implementing the w3c menubar pattern, adding better keyboard navigation and screenreader support. --- .changeset/fair-falcons-search.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fair-falcons-search.md diff --git a/.changeset/fair-falcons-search.md b/.changeset/fair-falcons-search.md new file mode 100644 index 00000000000..46915b5a56f --- /dev/null +++ b/.changeset/fair-falcons-search.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +Improved **ix-menu** accessibility by implementing the w3c menubar pattern, adding better keyboard navigation and screenreader suppport. From ee252ec8feee44d6e78b7ead2aba01ccc4861e1c Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Fri, 12 Jun 2026 09:24:21 +0200 Subject: [PATCH 16/36] fixes --- .changeset/fair-falcons-search.md | 2 +- .../core/src/components/menu-item/menu-item.tsx | 16 ++++++++++------ packages/core/src/components/menu/menu.tsx | 2 +- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/.changeset/fair-falcons-search.md b/.changeset/fair-falcons-search.md index 46915b5a56f..9734991c8af 100644 --- a/.changeset/fair-falcons-search.md +++ b/.changeset/fair-falcons-search.md @@ -2,4 +2,4 @@ '@siemens/ix': patch --- -Improved **ix-menu** accessibility by implementing the w3c menubar pattern, adding better keyboard navigation and screenreader suppport. +Improved **ix-menu** accessibility by implementing the W3C menubar pattern, adding better keyboard navigation and screenreader suppport. diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx index 1f40d3a7e89..dca699db799 100644 --- a/packages/core/src/components/menu-item/menu-item.tsx +++ b/packages/core/src/components/menu-item/menu-item.tsx @@ -232,6 +232,15 @@ export class MenuItem return undefined; } + private getEffectiveRole(externalRole?: string) { + const internalRole = + this.isHostedInsideCategory || this.isCategory || this.isInMenuContext + ? 'menuitem' + : undefined; + + return externalRole ?? internalRole; + } + private returnFocusToParentCategoryMenuItem() { const categoryElement = this.hostElement.closest('ix-menu-category'); @@ -266,12 +275,7 @@ export class MenuItem const { role: externalRole, ...inheritedA11yWithoutRole } = this.inheritAriaAttributes; - const internalRole = - this.isHostedInsideCategory || this.isCategory || this.isInMenuContext - ? 'menuitem' - : undefined; - - const effectiveRole = externalRole ?? internalRole; + const effectiveRole = this.getEffectiveRole(externalRole); const commonAttributes = { class: 'tab', diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index a76c70e7034..c56cb9632d1 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -636,7 +636,7 @@ export class Menu { ); } - // item positions and menu size has to be set manually because slotted items and utility controls are sepparated into two groups + // item positions and menu size has to be set manually because slotted items and utility controls are separated into two groups private updateMenuItemPositionMetadata( items: (HTMLIxMenuItemElement | HTMLIxMenuCategoryElement)[] ) { From e87e87ab1723ea9a0a969bb9e3a9ad99d982ed83 Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Fri, 12 Jun 2026 09:28:12 +0200 Subject: [PATCH 17/36] fix --- packages/core/src/components/menu/menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index c56cb9632d1..c0e0b36cf46 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -752,7 +752,7 @@ export class Menu { break; case 'End': this.updateRovingTabIndex(items, items.length - 1); - items[items.length - 1].focus(); + items.at(-1)?.focus(); break; } } From 06068ec6e6ef6686e1b30df0e4e19ad08877b816 Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Thu, 25 Jun 2026 10:05:57 +0200 Subject: [PATCH 18/36] a11y improvements --- packages/angular/src/components.ts | 4 +- packages/angular/standalone/src/components.ts | 4 +- packages/core/src/components.d.ts | 22 ++++ packages/core/src/components/menu/menu.scss | 10 +- packages/core/src/components/menu/menu.tsx | 119 ++++++++++++++++-- .../react/src/components/components.server.ts | 4 +- packages/vue/src/components/ix-menu.ts | 2 + 7 files changed, 148 insertions(+), 17 deletions(-) diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index bbe4161be61..0eb20eda603 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -1558,7 +1558,7 @@ export declare interface IxLinkButton extends Components.IxLinkButton {} @ProxyCmp({ - inputs: ['applicationDescription', 'applicationName', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'pinned', 'showAbout', 'showSettings', 'startExpanded'], + inputs: ['applicationDescription', 'applicationName', 'enableToggleTheme', 'expand', 'i18nAriaLabelMenu', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nNavigationHint', 'i18nSettings', 'i18nToggleTheme', 'pinned', 'showAbout', 'showSettings', 'startExpanded'], methods: ['toggleMapExpand', 'toggleMenu', 'toggleSettings', 'toggleAbout'] }) @Component({ @@ -1566,7 +1566,7 @@ export declare interface IxLinkButton extends Components.IxLinkButton {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['applicationDescription', 'applicationName', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'pinned', 'showAbout', 'showSettings', 'startExpanded'], + inputs: ['applicationDescription', 'applicationName', 'enableToggleTheme', 'expand', 'i18nAriaLabelMenu', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nNavigationHint', 'i18nSettings', 'i18nToggleTheme', 'pinned', 'showAbout', 'showSettings', 'startExpanded'], outputs: ['expandChange', 'mapExpandChange', 'openAppSwitch', 'openSettings', 'openAbout'], standalone: false }) diff --git a/packages/angular/standalone/src/components.ts b/packages/angular/standalone/src/components.ts index 0d5e001e883..977533f3aa5 100644 --- a/packages/angular/standalone/src/components.ts +++ b/packages/angular/standalone/src/components.ts @@ -1658,7 +1658,7 @@ export declare interface IxLinkButton extends Components.IxLinkButton {} @ProxyCmp({ defineCustomElementFn: defineIxMenu, - inputs: ['applicationDescription', 'applicationName', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'pinned', 'showAbout', 'showSettings', 'startExpanded'], + inputs: ['applicationDescription', 'applicationName', 'enableToggleTheme', 'expand', 'i18nAriaLabelMenu', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nNavigationHint', 'i18nSettings', 'i18nToggleTheme', 'pinned', 'showAbout', 'showSettings', 'startExpanded'], methods: ['toggleMapExpand', 'toggleMenu', 'toggleSettings', 'toggleAbout'] }) @Component({ @@ -1666,7 +1666,7 @@ export declare interface IxLinkButton extends Components.IxLinkButton {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['applicationDescription', 'applicationName', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'pinned', 'showAbout', 'showSettings', 'startExpanded'], + inputs: ['applicationDescription', 'applicationName', 'enableToggleTheme', 'expand', 'i18nAriaLabelMenu', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nNavigationHint', 'i18nSettings', 'i18nToggleTheme', 'pinned', 'showAbout', 'showSettings', 'startExpanded'], outputs: ['expandChange', 'mapExpandChange', 'openAppSwitch', 'openSettings', 'openAbout'], }) export class IxMenu { diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index aadfc3b5001..5f41470531c 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2400,6 +2400,11 @@ export namespace Components { * @default false */ "expand": boolean; + /** + * Aria-label for menu. Gets read out by screen readers when first focusing the menu + * @default 'Application Navigation' + */ + "i18nAriaLabelMenu": string; /** * i18n label for 'Collapse' button * @default 'Collapse' @@ -2415,6 +2420,11 @@ export namespace Components { * @default 'About & legal information' */ "i18nLegal": string; + /** + * i18n description for menu keyboard navigation hint, read by screen readers when focusing the menu + * @default 'Use arrow keys to navigate between menu items' + */ + "i18nNavigationHint": string; /** * i18n label for 'Settings' button * @default 'Settings' @@ -8835,6 +8845,11 @@ declare namespace LocalJSX { * @default false */ "expand"?: boolean; + /** + * Aria-label for menu. Gets read out by screen readers when first focusing the menu + * @default 'Application Navigation' + */ + "i18nAriaLabelMenu"?: string; /** * i18n label for 'Collapse' button * @default 'Collapse' @@ -8850,6 +8865,11 @@ declare namespace LocalJSX { * @default 'About & legal information' */ "i18nLegal"?: string; + /** + * i18n description for menu keyboard navigation hint, read by screen readers when focusing the menu + * @default 'Use arrow keys to navigate between menu items' + */ + "i18nNavigationHint"?: string; /** * i18n label for 'Settings' button * @default 'Settings' @@ -11701,11 +11721,13 @@ declare namespace LocalJSX { "expand": boolean; "startExpanded": boolean; "pinned": boolean; + "i18nAriaLabelMenu": string; "i18nLegal": string; "i18nSettings": string; "i18nToggleTheme": string; "i18nExpand": string; "i18nCollapse": string; + "i18nNavigationHint": string; } interface IxMenuAboutAttributes { "suppressLegacyTabs": boolean; diff --git a/packages/core/src/components/menu/menu.scss b/packages/core/src/components/menu/menu.scss index b1a09d5ed7d..c4d04029e13 100644 --- a/packages/core/src/components/menu/menu.scss +++ b/packages/core/src/components/menu/menu.scss @@ -67,8 +67,16 @@ $menu-expanded-width: 16rem; .menu-navigation { display: flex; flex-direction: column; - flex: 1 1 auto; min-height: 0; + + &.menu-navigation--fill { + flex: 1 1 auto; + } + + &:focus-visible { + outline: 1px solid var(--theme-color-focus-bdr); + outline-offset: -1px; + } } .tabs--shadow { diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index c0e0b36cf46..0c725ebc9f3 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -107,6 +107,12 @@ export class Menu { applicationLayoutService.enableBreakpointDetection(); } + /** + * Aria-label for menu. Gets read out by screen readers when first focusing the menu + */ + @Prop({ attribute: 'i18n-aria-label-menu' }) i18nAriaLabelMenu = + 'Application Navigation'; + /** * i18n label for 'About & legal information' button */ @@ -132,6 +138,12 @@ export class Menu { */ @Prop({ attribute: 'i18n-collapse' }) i18nCollapse = 'Collapse'; + /** + * i18n description for menu keyboard navigation hint, read by screen readers when focusing the menu + */ + @Prop({ attribute: 'i18n-navigation-hint' }) i18nNavigationHint = + 'Use arrow keys to navigate between menu items'; + /** * Menu expanded */ @@ -167,11 +179,15 @@ export class Menu { @State() itemsScrollShadowTop = false; @State() itemsScrollShadowBottom = false; @State() isMenuItemsOverflow = false; + @State() hasBottomSlotItems = false; @State() applicationLayoutContext?: ContextType< typeof ApplicationLayoutContext >; @State() isDarkMode: boolean = false; private isTransitionDisabled = false; + private lastFocusedMenuItem?: + | HTMLIxMenuItemElement + | HTMLIxMenuCategoryElement; private themeNameDisposer?: Disposable; // FBC IAM workaround #488 @@ -194,6 +210,10 @@ export class Menu { return this.menu!.querySelector('.tabs')!; } + get menuNavigationContainer(): HTMLDivElement { + return this.menu!.querySelector('.menu-navigation')!; + } + get overlayContainer() { return this.hostElement.shadowRoot!.querySelector( '.menu-overlay' @@ -281,6 +301,14 @@ export class Menu { ); } + get hasUtilityMenuItems(): boolean { + return !!this.settings || this.enableToggleTheme || !!this.about; + } + + get shouldFillMenuNavigation(): boolean { + return this.hasUtilityMenuItems || this.hasBottomSlotItems; + } + get tabsContainer() { return this.hostElement; } @@ -289,9 +317,7 @@ export class Menu { requestAnimationFrame(() => { this.handleOverflowIndicator(); const items = this.getAllFocusableItems(); - if (items.length > 0) { - this.updateRovingTabIndex(items, 0); - } + this.resetRovingTabIndex(items); }); if (this.pinned) { @@ -300,6 +326,8 @@ export class Menu { } componentWillLoad() { + this.updateBottomSlotState(); + useContextConsumer( this.hostElement, ApplicationLayoutContext, @@ -619,6 +647,12 @@ export class Menu { } } + private updateBottomSlotState() { + this.hasBottomSlotItems = Array.from(this.hostElement.children).some( + (element) => element.getAttribute('slot') === 'bottom' + ); + } + private isHiddenFromViewport() { return this.breakpoint === 'sm' && this.expand === false; } @@ -636,6 +670,19 @@ export class Menu { ); } + private resetRovingTabIndex( + items: ( + | HTMLIxMenuItemElement + | HTMLIxMenuCategoryElement + )[] = this.getAllFocusableItems() + ) { + this.updateMenuItemPositionMetadata(items); + + items.forEach((item) => { + item.setTabIndex?.(-1); + }); + } + // item positions and menu size has to be set manually because slotted items and utility controls are separated into two groups private updateMenuItemPositionMetadata( items: (HTMLIxMenuItemElement | HTMLIxMenuCategoryElement)[] @@ -669,8 +716,12 @@ export class Menu { const items = this.getAllFocusableItems(); const path = event.composedPath(); const activeIndex = items.findIndex((item) => path.includes(item)); + if (activeIndex !== -1) { + this.lastFocusedMenuItem = items[activeIndex]; this.updateRovingTabIndex(items, activeIndex); + } else if (event.target instanceof HTMLElement) { + this.resetRovingTabIndex(items); } } @@ -712,10 +763,6 @@ export class Menu { return; } - if (event.target === this.menuItemsContainer) { - return; - } - if (this.isEventFromExpandedCategoryItems(event)) { return; } @@ -727,31 +774,56 @@ export class Menu { const path = event.composedPath(); const currentIndex = items.findIndex((item) => path.includes(item)); - if (currentIndex === -1) { + const isMenuNavigationFocused = + currentIndex === -1 && path.includes(this.menuNavigationContainer); + + if (!isMenuNavigationFocused && currentIndex === -1) { return; } event.preventDefault(); + if (isMenuNavigationFocused) { + let index = items.indexOf(this.lastFocusedMenuItem!); + + if (event.key === 'Home') { + index = 0; + } else if (event.key === 'End') { + index = items.length - 1; + } else if (index === -1) { + index = event.key === 'ArrowDown' ? 0 : items.length - 1; + } + + this.updateRovingTabIndex(items, index); + this.lastFocusedMenuItem = items[index]; + items[index].focus(); + + return; + } + switch (event.key) { case 'ArrowDown': { const next = (currentIndex + 1) % items.length; this.updateRovingTabIndex(items, next); + this.lastFocusedMenuItem = items[next]; items[next].focus(); break; } case 'ArrowUp': { const prev = (currentIndex - 1 + items.length) % items.length; this.updateRovingTabIndex(items, prev); + this.lastFocusedMenuItem = items[prev]; items[prev].focus(); break; } case 'Home': this.updateRovingTabIndex(items, 0); + this.lastFocusedMenuItem = items[0]; items[0].focus(); break; case 'End': this.updateRovingTabIndex(items, items.length - 1); + this.lastFocusedMenuItem = items.at(-1); items.at(-1)?.focus(); break; } @@ -817,12 +889,34 @@ export class Menu { )}
+ + {this.i18nNavigationHint} + + - - {this.i18nNavigationHint} - -