[PM-29819][CL-806] Fix focus mgmt on search and filter page navigations (#18007)

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,
+          },
         }),
       );
 

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];
   }

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -424,6 +424,9 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
           queryParams: { search: Utils.isNullOrEmpty(searchText) ? null : searchText },
           queryParamsHandling: "merge",
           replaceUrl: true,
+          state: {
+            focusMainAfterNav: false,
+          },
         }),
       );
 

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:
-   * `<a [routerLink]="route()" [info]="{ focusMainAfterNav: false }"></a>`
+   * 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: `<a [routerLink]="route()" [state]="{ focusMainAfterNav: false }"></a>`
+   * 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<HTMLElement>("main");

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"