feat(core/menu): implement w3c menu pattern for ix-menu (#2573)

Author: lzeiml

.changeset/fair-falcons-search.md

@@ -0,0 +1,6 @@
+---
+'@siemens/ix': minor
+---
+
+Improved **ix-menu** accessibility by implementing the W3C menubar pattern, adding better keyboard navigation and screenreader suppport.
+Added properties `i18nAriaLabelMenu` and `i18nNavigationHint` for screenreader translations.

packages/angular/src/components.ts

@@ -1558,15 +1558,15 @@ 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({
   selector: 'ix-menu',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // 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
 })

packages/angular/standalone/src/components.ts

@@ -1663,15 +1663,15 @@ 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({
   selector: 'ix-menu',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // 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 {

packages/core/src/components.d.ts

@@ -2405,6 +2405,12 @@ export namespace Components {
           * @default false
          */
         "expand": boolean;
+        /**
+          * i18n aria-label for menu. Gets read out by screen readers when first focusing the menu
+          * @since 5.1.0
+          * @default 'Application Navigation'
+         */
+        "i18nAriaLabelMenu": string;
         /**
           * i18n label for 'Collapse' button
           * @default 'Collapse'
@@ -2420,6 +2426,12 @@ export namespace Components {
           * @default 'About & legal information'
          */
         "i18nLegal": string;
+        /**
+          * i18n description for menu keyboard navigation hint, read by screen readers when focusing the menu
+          * @since 5.1.0
+          * @default 'Use Up and Down arrow keys to navigate between menu items'
+         */
+        "i18nNavigationHint": string;
         /**
           * i18n label for 'Settings' button
           * @default 'Settings'
@@ -2610,6 +2622,7 @@ export namespace Components {
           * Show notification count on the category
          */
         "notifications"?: number;
+        "setTabIndex": (value: number) => Promise<void>;
         /**
           * Will be shown as tooltip text, if not provided menu text content will be used.
           * @since 4.0.0
@@ -2680,6 +2693,7 @@ export namespace Components {
           * Label of the menu item. Will also be used as tooltip text
          */
         "label"?: string;
+        "menuCategoryLabel"?: string;
         /**
           * Show notification count on tab
          */
@@ -2689,6 +2703,7 @@ export namespace Components {
           * @since 4.0.0
          */
         "rel"?: string;
+        "setTabIndex": (value: number) => Promise<void>;
         /**
           * Specifies where to open the linked document when href is provided.
           * @since 4.0.0
@@ -9064,6 +9079,12 @@ declare namespace LocalJSX {
           * @default false
          */
         "expand"?: boolean;
+        /**
+          * i18n aria-label for menu. Gets read out by screen readers when first focusing the menu
+          * @since 5.1.0
+          * @default 'Application Navigation'
+         */
+        "i18nAriaLabelMenu"?: string;
         /**
           * i18n label for 'Collapse' button
           * @default 'Collapse'
@@ -9079,6 +9100,12 @@ declare namespace LocalJSX {
           * @default 'About & legal information'
          */
         "i18nLegal"?: string;
+        /**
+          * i18n description for menu keyboard navigation hint, read by screen readers when focusing the menu
+          * @since 5.1.0
+          * @default 'Use Up and Down arrow keys to navigate between menu items'
+         */
+        "i18nNavigationHint"?: string;
         /**
           * i18n label for 'Settings' button
           * @default 'Settings'
@@ -9371,6 +9398,7 @@ declare namespace LocalJSX {
           * Label of the menu item. Will also be used as tooltip text
          */
         "label"?: string;
+        "menuCategoryLabel"?: string;
         /**
           * Show notification count on tab
          */
@@ -12061,6 +12089,8 @@ declare namespace LocalJSX {
         "expand": boolean;
         "startExpanded": boolean;
         "pinned": boolean;
+        "i18nAriaLabelMenu": string;
+        "i18nNavigationHint": string;
         "i18nLegal": string;
         "i18nSettings": string;
         "i18nToggleTheme": string;
@@ -12127,6 +12157,7 @@ declare namespace LocalJSX {
         "target": AnchorTarget;
         "rel": string;
         "isCategory": boolean;
+        "menuCategoryLabel": string;
     }
     interface IxMenuSettingsAttributes {
         "suppressLegacyTabs": boolean;