@ojiepermana/angular-navigation 22.0.45 → 22.0.47

package/fesm2022/{ojiepermana-angular-navigation-navigation-dockbar-menu.component-BQgpBy1I.mjs → ojiepermana-angular-navigation-navigation-dockbar-menu.component-FKJqBVRX.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, Injector, input, output, computed, signal, afterNextRender, Component } from '@angular/core';
 import { IconComponent } from '@ojiepermana/angular-component/icon';
 import { cn } from '@ojiepermana/angular-component/utils';
-import { N as NavigationItemComponent, a as NavigationItemContentComponent, b as NavigationListComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';
+import { N as NavigationItemComponent, a as NavigationItemContentComponent, b as NavigationListComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-Dh4Huk-N.mjs';
 import { NavigationService } from '@ojiepermana/angular-navigation/service';
 
 class NavigationDockbarMenuComponent {

package/fesm2022/{ojiepermana-angular-navigation-navigation-entry-grid.component-BY-DXx81.mjs → ojiepermana-angular-navigation-navigation-entry-grid.component-DN42NJ2l.mjs}

@@ -4,7 +4,7 @@ import { inject, input, output, computed, signal, Component } from '@angular/cor
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { IconComponent } from '@ojiepermana/angular-component/icon';
 import { cn } from '@ojiepermana/angular-component/utils';
-import { N as NavigationItemComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';
+import { N as NavigationItemComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-Dh4Huk-N.mjs';
 import { NavigationService } from '@ojiepermana/angular-navigation/service';
 
 /**

package/fesm2022/{ojiepermana-angular-navigation-navigation-flyout-menu.component-CACN0O3T.mjs → ojiepermana-angular-navigation-navigation-flyout-menu.component-CjejQibu.mjs}

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, input, output, computed, signal, Component } from '@angular/core';
 import { IconComponent } from '@ojiepermana/angular-component/icon';
 import { cn } from '@ojiepermana/angular-component/utils';
-import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-BY-DXx81.mjs';
-import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';
+import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-DN42NJ2l.mjs';
+import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-Dh4Huk-N.mjs';
 import { NavigationService } from '@ojiepermana/angular-navigation/service';
 
 class NavigationFlyoutMenuComponent {

package/fesm2022/{ojiepermana-angular-navigation-navigation-horizontal.component-SK1lXswT.mjs → ojiepermana-angular-navigation-navigation-horizontal.component-DUJ4HEmh.mjs}

@@ -3,8 +3,8 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, input, output, computed, signal, Component } from '@angular/core';
 import { IconComponent } from '@ojiepermana/angular-component/icon';
 import { cn } from '@ojiepermana/angular-component/utils';
-import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-BY-DXx81.mjs';
-import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';
+import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-DN42NJ2l.mjs';
+import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-Dh4Huk-N.mjs';
 import { NavigationService } from '@ojiepermana/angular-navigation/service';
 
 class NavigationHorizontalComponent {

package/fesm2022/{ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs → ojiepermana-angular-navigation-ojiepermana-angular-navigation-Dh4Huk-N.mjs}

@@ -538,9 +538,9 @@ class NavigationItemComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     hostRole = computed(() => {
-        if (this.item().type === 'divider') {
-            return 'separator';
-        }
+        // Dividers are decorative (aria-hidden); a `separator` role is not a valid
+        // child of `list` and would trip axe's aria-required-children. Horizontal
+        // items are presentational `<li>` wrappers around the real menuitem.
         return this.orientation() === 'horizontal' ? 'none' : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
@@ -667,7 +667,7 @@ class NavigationItemComponent {
         return cn('relative', "before:pointer-events-none before:absolute before:left-[1.625rem] before:w-0 before:-z-10 before:border-l before:border-dotted before:content-['']", this.straightRailActive() ? 'before:border-primary/50' : 'before:border-border/50', this.firstInBranch() ? 'before:-top-9' : 'before:-top-0.5', this.lastInBranch() ? 'before:bottom-[calc(100%-1.25rem)]' : 'before:-bottom-0.5');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationItemComponent, isStandalone: true, selector: "li[NavigationItem]", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, straightRail: { classPropertyName: "straightRail", publicName: "straightRail", isSignal: true, isRequired: false, transformFunction: null }, straightRailActive: { classPropertyName: "straightRailActive", publicName: "straightRailActive", isSignal: true, isRequired: false, transformFunction: null }, firstInBranch: { classPropertyName: "firstInBranch", publicName: "firstInBranch", isSignal: true, isRequired: false, transformFunction: null }, lastInBranch: { classPropertyName: "lastInBranch", publicName: "lastInBranch", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.role": "hostRole()", "attr.data-navigation-item-key": "item().key", "attr.aria-hidden": "item().type === \"spacer\" ? \"true\" : null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationItemComponent, isStandalone: true, selector: "li[NavigationItem]", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, straightRail: { classPropertyName: "straightRail", publicName: "straightRail", isSignal: true, isRequired: false, transformFunction: null }, straightRailActive: { classPropertyName: "straightRailActive", publicName: "straightRailActive", isSignal: true, isRequired: false, transformFunction: null }, firstInBranch: { classPropertyName: "firstInBranch", publicName: "firstInBranch", isSignal: true, isRequired: false, transformFunction: null }, lastInBranch: { classPropertyName: "lastInBranch", publicName: "lastInBranch", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.role": "hostRole()", "attr.data-navigation-item-key": "item().key", "attr.aria-hidden": "item().type === \"spacer\" || item().type === \"divider\" ? \"true\" : null" } }, ngImport: i0, template: `
     @switch (item().type) {
       @case ('divider') {
         <span class="block h-px w-full bg-border"></span>
@@ -682,7 +682,7 @@ class NavigationItemComponent {
 
         <ul
           [class]="childListClasses()"
-          role="group"
+          role="list"
           [attr.aria-labelledby]="item().title ? headingId() : null"
         >
           @for (
@@ -742,7 +742,7 @@ class NavigationItemComponent {
         </button>
 
         @if (showChildren()) {
-          <ul [id]="item().panelId" [class]="childListClasses()" role="group">
+          <ul [id]="item().panelId" [class]="childListClasses()" role="list">
             @for (
               child of item().children;
               track child.key;
@@ -781,7 +781,7 @@ class NavigationItemComponent {
 
         <ul
           [class]="childListClasses()"
-          role="group"
+          role="list"
           [attr.aria-labelledby]="item().title ? headingId() : null"
         >
           @for (
@@ -905,7 +905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class]': 'hostClasses()',
                         '[attr.role]': 'hostRole()',
                         '[attr.data-navigation-item-key]': 'item().key',
-                        '[attr.aria-hidden]': 'item().type === "spacer" ? "true" : null',
+                        '[attr.aria-hidden]': 'item().type === "spacer" || item().type === "divider" ? "true" : null',
                     },
                     template: `
     @switch (item().type) {
@@ -922,7 +922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 
         <ul
           [class]="childListClasses()"
-          role="group"
+          role="list"
           [attr.aria-labelledby]="item().title ? headingId() : null"
         >
           @for (
@@ -982,7 +982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         </button>
 
         @if (showChildren()) {
-          <ul [id]="item().panelId" [class]="childListClasses()" role="group">
+          <ul [id]="item().panelId" [class]="childListClasses()" role="list">
             @for (
               child of item().children;
               track child.key;
@@ -1021,7 +1021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 
         <ul
           [class]="childListClasses()"
-          role="group"
+          role="list"
           [attr.aria-labelledby]="item().title ? headingId() : null"
         >
           @for (
@@ -1329,14 +1329,14 @@ class NavigationContentComponent {
       />
     }
   `, isInline: true, dependencies: [{ kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], deferBlockDependencies: [() => [/* @ts-ignore */
-                import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-CACN0O3T.mjs').then(m => m.NavigationFlyoutMenuComponent)], () => [/* @ts-ignore */
-                import('./ojiepermana-angular-navigation-navigation-horizontal.component-SK1lXswT.mjs').then(m => m.NavigationHorizontalComponent)], () => [/* @ts-ignore */
-                import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-BQgpBy1I.mjs').then(m => m.NavigationDockbarMenuComponent)]] });
+                import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-CjejQibu.mjs').then(m => m.NavigationFlyoutMenuComponent)], () => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-horizontal.component-DUJ4HEmh.mjs').then(m => m.NavigationHorizontalComponent)], () => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-FKJqBVRX.mjs').then(m => m.NavigationDockbarMenuComponent)]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.4", ngImport: i0, type: NavigationContentComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-CACN0O3T.mjs').then(m => m.NavigationFlyoutMenuComponent), /* @ts-ignore */
-        import('./ojiepermana-angular-navigation-navigation-horizontal.component-SK1lXswT.mjs').then(m => m.NavigationHorizontalComponent), /* @ts-ignore */
-        import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-BQgpBy1I.mjs').then(m => m.NavigationDockbarMenuComponent)], resolveMetadata: (NavigationFlyoutMenuComponent, NavigationHorizontalComponent, NavigationDockbarMenuComponent) => ({ decorators: [{
+        import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-CjejQibu.mjs').then(m => m.NavigationFlyoutMenuComponent), /* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-horizontal.component-DUJ4HEmh.mjs').then(m => m.NavigationHorizontalComponent), /* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-FKJqBVRX.mjs').then(m => m.NavigationDockbarMenuComponent)], resolveMetadata: (NavigationFlyoutMenuComponent, NavigationHorizontalComponent, NavigationDockbarMenuComponent) => ({ decorators: [{
                 type: Component,
                 args: [{
                         selector: 'NavigationContent',

package/fesm2022/ojiepermana-angular-navigation-service.mjs

@@ -165,8 +165,12 @@ class NavigationService {
     routerLinkActiveOptions(item) {
         return item.isActiveMatchOptions ?? (item.exactMatch ? this.exactMatchOptions : this.subsetMatchOptions);
     }
-    itemRole(orientation, level) {
-        return orientation === 'horizontal' || level > 0 ? 'menuitem' : null;
+    itemRole(orientation, _level) {
+        // Horizontal navs are menubars/menus (arrow-key roving) → menuitem. Vertical
+        // navs are plain lists of links (tab navigation, no menu keyboard model), so
+        // their items must NOT be menuitems — a menuitem inside a `list` is an invalid
+        // ARIA parent (axe `aria-required-parent`).
+        return orientation === 'horizontal' ? 'menuitem' : null;
     }
     compactLabel(item, compact) {
         return compact ? (item.tooltip ?? item.title ?? null) : null;

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -1 +1 @@
-export { c as NavigationCollapseExpandedDirective, d as NavigationCollapseRootDirective, e as NavigationContainerComponent, f as NavigationContentComponent, g as NavigationDockbarComponent, h as NavigationFlyoutComponent, i as NavigationFooterActionComponent, j as NavigationFooterComponent, k as NavigationFooterInitialComponent, l as NavigationFooterTitleComponent, m as NavigationHeaderComponent, n as NavigationHeaderInitialComponent, o as NavigationHeaderTitleComponent, p as NavigationIconDirective, q as NavigationNavbarComponent, r as NavigationSidebarComponent, s as deriveNavigationInitials, t as normalizeUiNavItems } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';
+export { c as NavigationCollapseExpandedDirective, d as NavigationCollapseRootDirective, e as NavigationContainerComponent, f as NavigationContentComponent, g as NavigationDockbarComponent, h as NavigationFlyoutComponent, i as NavigationFooterActionComponent, j as NavigationFooterComponent, k as NavigationFooterInitialComponent, l as NavigationFooterTitleComponent, m as NavigationHeaderComponent, n as NavigationHeaderInitialComponent, o as NavigationHeaderTitleComponent, p as NavigationIconDirective, q as NavigationNavbarComponent, r as NavigationSidebarComponent, s as deriveNavigationInitials, t as normalizeUiNavItems } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-Dh4Huk-N.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-navigation",
-  "version": "22.0.45",
+  "version": "22.0.47",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,7 +13,7 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-component": "^22.0.45",
+    "@ojiepermana/angular-component": "^22.0.47",
     "rxjs": ">=7.8.0"
   },
   "dependencies": {

package/types/ojiepermana-angular-navigation-service.d.ts

@@ -115,7 +115,7 @@ declare class NavigationService {
     hrefFor(item: NavigationNormalizedItem): string | null;
     relFor(item: NavigationNormalizedItem): string | null;
     routerLinkActiveOptions(item: NavigationNormalizedItem): IsActiveMatchOptions;
-    itemRole(orientation: NavigationOrientation, level: number): 'menuitem' | null;
+    itemRole(orientation: NavigationOrientation, _level: number): 'menuitem' | null;
     compactLabel(item: NavigationNormalizedItem, compact: boolean): string | null;
     titleFor(item: NavigationNormalizedItem, compact: boolean): string | null;
     compactFallback(item: NavigationNormalizedItem): string;