diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts index f827dda9a9b..4adf3739845 100644 --- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts +++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts @@ -587,6 +587,9 @@ export class VaultComponent implements OnInit, OnDestroy { queryParams: { search: Utils.isNullOrEmpty(searchText) ? null : searchText }, queryParamsHandling: "merge", replaceUrl: true, + state: { + focusMainAfterNav: false, + }, }), ); diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/services/routed-vault-filter.service.ts b/apps/web/src/app/vault/individual-vault/vault-filter/services/routed-vault-filter.service.ts index a5a99428b2d..bc9da5e1692 100644 --- a/apps/web/src/app/vault/individual-vault/vault-filter/services/routed-vault-filter.service.ts +++ b/apps/web/src/app/vault/individual-vault/vault-filter/services/routed-vault-filter.service.ts @@ -74,6 +74,9 @@ export class RoutedVaultFilterService implements OnDestroy { type: filter.type ?? null, }, queryParamsHandling: "merge", + state: { + focusMainAfterNav: false, + }, }; return [commands, extras]; } diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts index e791ca7a90b..a5121831304 100644 --- a/apps/web/src/app/vault/individual-vault/vault.component.ts +++ b/apps/web/src/app/vault/individual-vault/vault.component.ts @@ -424,6 +424,9 @@ export class VaultComponent implements OnInit, OnDestr queryParams: { search: Utils.isNullOrEmpty(searchText) ? null : searchText }, queryParamsHandling: "merge", replaceUrl: true, + state: { + focusMainAfterNav: false, + }, }), ); diff --git a/libs/components/src/a11y/router-focus-manager.service.ts b/libs/components/src/a11y/router-focus-manager.service.ts index 27c4e0f9b1e..f7371e02a17 100644 --- a/libs/components/src/a11y/router-focus-manager.service.ts +++ b/libs/components/src/a11y/router-focus-manager.service.ts @@ -1,7 +1,7 @@ import { inject, Injectable } from "@angular/core"; import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; import { NavigationEnd, Router } from "@angular/router"; -import { skip, filter, map, combineLatestWith, tap } from "rxjs"; +import { skip, filter, combineLatestWith, tap } from "rxjs"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; @@ -19,8 +19,10 @@ export class RouterFocusManagerService { * * By default, we focus the `main` after an internal route navigation. * - * Consumers can opt out of the passing the following to the `info` input: - * `` + * Consumers can opt out of the passing the following to the `state` input. Using `state` + * allows us to access the value between browser back/forward arrows. + * In template: `` + * In typescript: `this.router.navigate([], { state: { focusMainAfterNav: false }})` * * Or, consumers can use the autofocus directive on an applicable interactive element. * The autofocus directive will take precedence over this route focus pipeline. @@ -44,15 +46,12 @@ export class RouterFocusManagerService { skip(1), combineLatestWith(this.configService.getFeatureFlag$(FeatureFlag.RouterFocusManagement)), filter(([_navEvent, flagEnabled]) => flagEnabled), - map(() => { - const currentNavData = this.router.getCurrentNavigation()?.extras; + filter(() => { + const currentNavExtras = this.router.currentNavigation()?.extras; - const info = currentNavData?.info as { focusMainAfterNav?: boolean } | undefined; + const focusMainAfterNav: boolean | undefined = currentNavExtras?.state?.focusMainAfterNav; - return info; - }), - filter((currentNavInfo) => { - return currentNavInfo === undefined ? true : currentNavInfo?.focusMainAfterNav !== false; + return focusMainAfterNav !== false; }), tap(() => { const mainEl = document.querySelector("main"); diff --git a/libs/components/src/tabs/tab-nav-bar/tab-link.component.html b/libs/components/src/tabs/tab-nav-bar/tab-link.component.html index f05ed31547b..aa36eb37f99 100644 --- a/libs/components/src/tabs/tab-nav-bar/tab-link.component.html +++ b/libs/components/src/tabs/tab-nav-bar/tab-link.component.html @@ -5,7 +5,7 @@ [routerLinkActiveOptions]="routerLinkMatchOptions" #rla="routerLinkActive" [active]="rla.isActive" - [info]="{ focusMainAfterNav: false }" + [state]="{ focusMainAfterNav: false }" [disabled]="disabled" [attr.aria-disabled]="disabled" ariaCurrentWhenActive="page"