From 9e6aca51563bd2969bc0efe8d687782dbde3b0bf Mon Sep 17 00:00:00 2001
From: jaasen-livefront <jaasen@livefront.com>
Date: Mon, 29 Sep 2025 17:12:07 -0700
Subject: [PATCH] add AppPageFocusDirective

---
 .../popup/layout/popup-header.component.html  |  3 +-
 .../popup/layout/popup-header.component.ts    | 10 +++++-
 .../components/a11y/page-focus.directive.ts   | 32 +++++++++++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 apps/browser/src/vault/popup/components/a11y/page-focus.directive.ts

diff --git a/apps/browser/src/platform/popup/layout/popup-header.component.html b/apps/browser/src/platform/popup/layout/popup-header.component.html
index 2aac161b9d5..0de11e3955a 100644
--- a/apps/browser/src/platform/popup/layout/popup-header.component.html
+++ b/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"
diff --git a/apps/browser/src/platform/popup/layout/popup-header.component.ts b/apps/browser/src/platform/popup/layout/popup-header.component.ts
index b580b84f39b..905dfd0570d 100644
--- a/apps/browser/src/platform/popup/layout/popup-header.component.ts
+++ b/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);
diff --git a/apps/browser/src/vault/popup/components/a11y/page-focus.directive.ts b/apps/browser/src/vault/popup/components/a11y/page-focus.directive.ts
new file mode 100644
index 00000000000..80c8d59c1ee
--- /dev/null
+++ b/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 }));
+    });
+  }
+}