@fundamental-ngx/core 0.63.1-rc.9 → 0.63.1

package/fesm2022/fundamental-ngx-core-menu.mjs

@@ -266,6 +266,11 @@ class MenuInteractiveComponent {
         }
     }
     /** @hidden */
+    get role() {
+        // Parent items switch to role="none" when expanded so VoiceOver doesn't count them.
+        return this.ariaHaspopup && this.ariaExpanded ? 'none' : 'menuitem';
+    }
+    /** @hidden */
     get startAddon() {
         if (!this._startAddonInstance) {
             this.addonPortalOutlet.detach();
@@ -301,7 +306,7 @@ class MenuInteractiveComponent {
         this._cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuInteractiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MenuInteractiveComponent, isStandalone: true, selector: "[fd-menu-interactive]", host: { attributes: { "role": "menuitem" }, listeners: { "keydown.enter": "_handleKeydown($event)", "keydown.space": "_handleKeydown($event)" }, properties: { "attr.tabindex": "this.tabindex", "class.is-disabled": "this.disabled", "attr.aria-controls": "this.ariaControls", "class.is-selected": "this.selected", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-haspopup": "this.ariaHaspopup", "class.has-child": "this.ariaHaspopup", "class.fd-menu__link": "this.fdMenuLinkClass" } }, queries: [{ propertyName: "_addon", first: true, predicate: MenuAddonDirective, descendants: true }, { propertyName: "_input", first: true, predicate: MenuItemInputDirective, descendants: true }], viewQueries: [{ propertyName: "addonPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MenuInteractiveComponent, isStandalone: true, selector: "[fd-menu-interactive]", host: { listeners: { "keydown.enter": "_handleKeydown($event)", "keydown.space": "_handleKeydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "class.is-disabled": "this.disabled", "attr.aria-controls": "this.ariaControls", "class.is-selected": "this.selected", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-haspopup": "this.ariaHaspopup", "class.has-child": "this.ariaHaspopup", "class.fd-menu__link": "this.fdMenuLinkClass" } }, queries: [{ propertyName: "_addon", first: true, predicate: MenuAddonDirective, descendants: true }, { propertyName: "_input", first: true, predicate: MenuItemInputDirective, descendants: true }], viewQueries: [{ propertyName: "addonPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: `
         <ng-template cdkPortalOutlet></ng-template>
         <ng-content></ng-content>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -315,9 +320,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         <ng-template cdkPortalOutlet></ng-template>
         <ng-content></ng-content>
     `,
-                    host: {
-                        role: 'menuitem'
-                    },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [PortalModule]
                 }]
@@ -327,6 +329,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }], _addon: [{
                 type: ContentChild,
                 args: [MenuAddonDirective]
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], tabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -765,7 +770,7 @@ class MenuItemComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MenuItemComponent, isStandalone: true, selector: "li[fd-menu-item]", inputs: { disabled: "disabled", itemId: "itemId", submenu: "submenu", parentSubmenu: "parentSubmenu", hasSeparator: ["hasSeparator", "hasSeparator", booleanAttribute] }, outputs: { onSelect: "onSelect" }, host: { properties: { "attr.role": "\"menuitem\"", "class.fd-menu__item": "true", "class.fd-menu--full-width": "menuService?.menuComponent?.mobile() ?? false", "class.has-separator": "this.hasSeparator" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MenuItemComponent, isStandalone: true, selector: "li[fd-menu-item]", inputs: { disabled: "disabled", itemId: "itemId", submenu: "submenu", parentSubmenu: "parentSubmenu", hasSeparator: ["hasSeparator", "hasSeparator", booleanAttribute] }, outputs: { onSelect: "onSelect" }, host: { properties: { "class.fd-menu__item": "true", "class.fd-menu--full-width": "menuService?.menuComponent?.mobile() ?? false", "class.has-separator": "this.hasSeparator" } }, providers: [
             {
                 provide: FD_MENU_ITEM_COMPONENT,
                 useExisting: forwardRef(() => MenuItemComponent)
@@ -775,7 +780,6 @@ class MenuItemComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[fd-menu-item]', exportAs: 'fd-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        '[attr.role]': '"menuitem"',
                         '[class.fd-menu__item]': 'true',
                         '[class.fd-menu--full-width]': 'menuService?.menuComponent?.mobile() ?? false'
                     }, imports: [NgTemplateOutlet], providers: [
@@ -1493,6 +1497,7 @@ class MenuComponent {
         this._viewContainerRef = inject(ViewContainerRef);
         this._dynamicComponentService = inject(DynamicComponentService, { optional: true });
         this._destroyRef = inject(DestroyRef);
+        this._submenuSubscriptions = new Map();
         // Watch mobile mode changes
         effect(() => {
             this._menuService.setMenuMode(this.mobile());
@@ -1545,22 +1550,22 @@ class MenuComponent {
         // Use afterNextRender to ensure this runs after ngAfterContentInit sets the menu component
         afterNextRender(() => {
             runInInjectionContext(this._injector, () => {
-                // Track previous subscriptions to clean up when effect re-runs
-                let submenuSubscriptions = [];
                 effect((onCleanup) => {
                     // Clean up previous subscriptions before creating new ones
-                    submenuSubscriptions.forEach((unsubscribe) => unsubscribe());
-                    submenuSubscriptions = [];
+                    this._clearSubmenuSubscriptions();
                     const menuItems = this._menuItems();
                     this._menuService.rebuildMenu();
+                    // Set aria-posinset and aria-setsize for all menu items recursively
+                    // IMPORTANT: Defer this until after Angular processes @Input() bindings
+                    // Otherwise menuItem.submenu will be undefined
+                    afterNextRender(() => {
+                        this._setAriaPositionAttributesRecursive(menuItems);
+                    }, { injector: this._injector });
                     // Whether menu have submenu or not.
                     let hasSubmenus = false;
                     menuItems.forEach((menuItem) => {
                         if (menuItem.submenu) {
                             hasSubmenus = true;
-                            // Subscribe to submenu changes and track subscription for cleanup
-                            const subscription = menuItem.submenu._menuItemsChange$.subscribe(() => this._menuService.rebuildMenu());
-                            submenuSubscriptions.push(() => subscription.unsubscribe());
                         }
                     });
                     // Always disable scrollbar when menu has submenus to prevent clipping
@@ -1570,8 +1575,7 @@ class MenuComponent {
                     this._popoverService.disableScrollbar.set(shouldDisableScrollbar);
                     // Cleanup callback when effect is destroyed or re-runs
                     onCleanup(() => {
-                        submenuSubscriptions.forEach((unsubscribe) => unsubscribe());
-                        submenuSubscriptions = [];
+                        this._clearSubmenuSubscriptions();
                     });
                 });
             });
@@ -1813,6 +1817,57 @@ class MenuComponent {
             this.trigger.nativeElement.focus();
         }
     }
+    /** @hidden */
+    _clearSubmenuSubscriptions() {
+        this._submenuSubscriptions.forEach((unsubscribe) => unsubscribe());
+        this._submenuSubscriptions.clear();
+    }
+    /**
+     * @hidden
+     * Sets aria-posinset and aria-setsize on all menu items recursively.
+     */
+    _setAriaPositionAttributesRecursive(menuItems) {
+        // Filter out submenu items - contentChildren returns all descendants
+        const submenuItems = new Set();
+        menuItems.forEach((item) => {
+            if (item.submenu?.menuItems) {
+                item.submenu.menuItems.forEach((child) => submenuItems.add(child));
+            }
+        });
+        const directChildren = menuItems.filter((item) => !submenuItems.has(item));
+        const directInteractiveItems = directChildren
+            .map((menuItem) => ({
+            menuItem,
+            interactiveElement: menuItem.elementRef.nativeElement.querySelector('[fd-menu-interactive]')
+        }))
+            .filter(({ interactiveElement }) => !!interactiveElement && (interactiveElement.getAttribute('role') || 'menuitem') === 'menuitem');
+        directChildren.forEach((menuItem) => {
+            const interactiveElement = menuItem.elementRef.nativeElement.querySelector('[fd-menu-interactive]');
+            if (interactiveElement) {
+                const position = directInteractiveItems.findIndex((item) => item.menuItem === menuItem);
+                if (position > -1) {
+                    this._renderer.setAttribute(interactiveElement, 'aria-posinset', String(position + 1));
+                    this._renderer.setAttribute(interactiveElement, 'aria-setsize', String(directInteractiveItems.length));
+                }
+                else {
+                    // Keep aria metadata aligned when an item switches to role="none".
+                    this._renderer.removeAttribute(interactiveElement, 'aria-posinset');
+                    this._renderer.removeAttribute(interactiveElement, 'aria-setsize');
+                }
+            }
+            if (menuItem.submenu) {
+                const nestedMenuItems = menuItem.submenu.menuItems || [];
+                this._setAriaPositionAttributesRecursive(nestedMenuItems);
+                if (!this._submenuSubscriptions.has(menuItem.submenu)) {
+                    const subscription = menuItem.submenu._menuItemsChange$.subscribe(() => {
+                        this._menuService.rebuildMenu();
+                        this._setAriaPositionAttributesRecursive(this._menuItems());
+                    });
+                    this._submenuSubscriptions.set(menuItem.submenu, () => subscription.unsubscribe());
+                }
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: MenuComponent, isStandalone: true, selector: "fd-menu", inputs: { openOnHoverTime: { classPropertyName: "openOnHoverTime", publicName: "openOnHoverTime", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: true, isRequired: false, transformFunction: null }, mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscapeKey: { classPropertyName: "closeOnEscapeKey", publicName: "closeOnEscapeKey", isSignal: true, isRequired: false, transformFunction: null }, focusAutoCapture: { classPropertyName: "focusAutoCapture", publicName: "focusAutoCapture", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableScrollbar: { classPropertyName: "disableScrollbar", publicName: "disableScrollbar", isSignal: true, isRequired: false, transformFunction: null }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: true, isRequired: false, transformFunction: null }, fillControlMode: { classPropertyName: "fillControlMode", publicName: "fillControlMode", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, noArrow: { classPropertyName: "noArrow", publicName: "noArrow", isSignal: true, isRequired: false, transformFunction: null }, focusTrapped: { classPropertyName: "focusTrapped", publicName: "focusTrapped", isSignal: true, isRequired: false, transformFunction: null }, additionalBodyClass: { classPropertyName: "additionalBodyClass", publicName: "additionalBodyClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigation: { classPropertyName: "closeOnNavigation", publicName: "closeOnNavigation", isSignal: true, isRequired: false, transformFunction: null }, restoreFocusOnClose: { classPropertyName: "restoreFocusOnClose", publicName: "restoreFocusOnClose", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, fixedPosition: { classPropertyName: "fixedPosition", publicName: "fixedPosition", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", isOpenChange: "isOpenChange", activePath: "activePath", beforeOpen: "beforeOpen" }, host: { properties: { "class.fd-popover-custom--disabled": "disabled()" } }, providers: [
             MenuService,