{
+ return this.open() && this.sideNavOpen();
+ });
+
/** When the side nav is open, the parent nav item should not show active styles when open. */
- protected get parentHideActiveStyles(): boolean {
- return this.hideActiveStyles() || (this.open() && this.sideNavService.open);
- }
+ readonly parentHideActiveStyles = computed(() => {
+ return this.hideActiveStyles() || this.sideNavAndGroupOpen();
+ });
+
+ /**
+ * Allow overriding of the RouterLink['ariaCurrentWhenActive'] property.
+ *
+ * By default, assuming that the nav group navigates to its first child page instead of its
+ * own page, the nav group will be `current` when the side nav is collapsed or the nav group
+ * is collapsed (since child pages don't show in either collapsed view) and not `current`
+ * when the side nav and nav group are open (since the child page will show as `current`).
+ *
+ * If the nav group navigates to its own page, use this property to always set it to announce
+ * as `current` by passing in `"page"`.
+ */
+ readonly ariaCurrentWhenActive = input
();
+
+ readonly ariaCurrent = computed(() => {
+ return this.ariaCurrentWhenActive() ?? (this.sideNavAndGroupOpen() ? undefined : "page");
+ });
/**
* UID for `[attr.aria-controls]`
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index f7d55a33362..37a5d82aa1b 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -11,7 +11,7 @@
]"
>
-
+
@@ -31,7 +31,7 @@
-
+
@@ -43,7 +43,7 @@
[attr.aria-label]="ariaLabel() || text()"
routerLinkActive
[routerLinkActiveOptions]="routerLinkActiveOptions()"
- [ariaCurrentWhenActive]="'page'"
+ [ariaCurrentWhenActive]="ariaCurrentWhenActive()"
(isActiveChange)="setIsActive($event)"
(click)="mainContentClicked.emit()"
>
@@ -51,12 +51,13 @@
-
+