From f2339b0586c9fb52d39ff31b33eef7bc1df47016 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Tue, 1 Oct 2024 09:44:30 -0500
Subject: [PATCH] [PM-12718] Vault item - keyboard focus (#11338)

* refactor vault-list-item to be a button so it is keyboard accessible

- an anchor tag without an `href` isn't included in the tab order

* allow bit-item-content focus state to be visible

- cdk-virtual-scroll-viewport applied certain styles that hid overflow. Because each bit-item-group isn't a scroll container for vault items, these should be safe to alter.
---
 .../vault-list-items-container.component.html          | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
index e24723d583..bea6d9631c 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -17,10 +17,14 @@
     {{ description }}
   </div>
   <bit-item-group>
-    <cdk-virtual-scroll-viewport [itemSize]="ItemHeight">
+    <cdk-virtual-scroll-viewport
+      [itemSize]="ItemHeight"
+      class="tw-overflow-visible [&>.cdk-virtual-scroll-content-wrapper]:[contain:layout_style]"
+    >
       <bit-item *cdkVirtualFor="let cipher of ciphers">
-        <a
+        <button
           bit-item-content
+          type="button"
           (click)="onViewCipher(cipher)"
           [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
           class="{{ ItemHeightClass }}"
@@ -40,7 +44,7 @@
             [appA11yTitle]="'attachments' | i18n"
           ></i>
           <span slot="secondary">{{ cipher.subTitle }}</span>
-        </a>
+        </button>
         <ng-container slot="end">
           <bit-item-action *ngIf="showAutofillButton">
             <button