add AppPageFocusDirective

apps/browser/src/platform/popup/layout/popup-header.component.html

@@ -1,4 +1,4 @@
-<!-- 
+<!--
   end padding is less than start padding to prioritize visual alignment when icon buttons are used at the end of the end slot.
   other elements used at the end of the end slot may need to add their own margin/padding to achieve visual alignment.
 -->
@@ -16,6 +16,7 @@
   <div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
     <div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
       <button
+        appPageFocus
         bitIconButton="bwi-angle-left"
         type="button"
         *ngIf="showBackButton"

apps/browser/src/platform/popup/layout/popup-header.component.ts

@@ -12,6 +12,7 @@ import {
   TypographyModule,
 } from "@bitwarden/components";
 
+import { AppPageFocusDirective } from "../../../vault/popup/components/a11y/page-focus.directive";
 import { PopupRouterCacheService } from "../view-cache/popup-router-cache.service";
 
 import { PopupPageComponent } from "./popup-page.component";
@@ -19,7 +20,14 @@ import { PopupPageComponent } from "./popup-page.component";
 @Component({
   selector: "popup-header",
   templateUrl: "popup-header.component.html",
-  imports: [TypographyModule, CommonModule, IconButtonModule, JslibModule, AsyncActionsModule],
+  imports: [
+    TypographyModule,
+    CommonModule,
+    IconButtonModule,
+    JslibModule,
+    AsyncActionsModule,
+    AppPageFocusDirective,
+  ],
 })
 export class PopupHeaderComponent {
   private popupRouterCacheService = inject(PopupRouterCacheService);

apps/browser/src/vault/popup/components/a11y/page-focus.directive.ts

@@ -0,0 +1,32 @@
+import { AfterViewInit, Directive, ElementRef, NgZone } from "@angular/core";
+
+@Directive({
+  selector: "[appPageFocus]",
+  standalone: true,
+})
+export class AppPageFocusDirective implements AfterViewInit {
+  constructor(
+    private el: ElementRef<HTMLElement>,
+    private zone: NgZone,
+  ) {}
+
+  ngAfterViewInit(): void {
+    const el = this.el.nativeElement;
+
+    const naturallyFocusable =
+      el instanceof HTMLButtonElement ||
+      el instanceof HTMLAnchorElement ||
+      el instanceof HTMLInputElement ||
+      el instanceof HTMLTextAreaElement ||
+      el instanceof HTMLSelectElement ||
+      el.hasAttribute("tabindex");
+
+    if (!naturallyFocusable) {
+      el.setAttribute("tabindex", "-1");
+    }
+
+    this.zone.runOutsideAngular(() => {
+      requestAnimationFrame(() => el.focus({ preventScroll: false }));
+    });
+  }
+}