From c733f2def610ca183a3b68c2ca7a35cd423286d2 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 19 Dec 2021 17:26:57 +0000
Subject: [PATCH] A11y: make expandable box headers actual buttons, expose
 state with aria-expanded

Closes https://github.com/bitwarden/browser/issues/1983
---
 src/popup/scss/box.scss                     |  5 +++-
 src/popup/send/send-add-edit.component.html | 10 ++++---
 src/popup/settings/options.component.html   | 30 ++++++++++++---------
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss
index 9503b482a1..e65e32491d 100644
--- a/src/popup/scss/box.scss
+++ b/src/popup/scss/box.scss
@@ -20,9 +20,12 @@
     }
 
     .box-header-expandable {
-        margin: 0 10px 5px 10px;
+        padding: 0 10px;
+        margin-bottom: 5px;
         text-transform: uppercase;
         display: flex;
+        width: 100%;
+        box-sizing: border-box;
 
         @include themify($themes) {
             color: themed('headingColor');
diff --git a/src/popup/send/send-add-edit.component.html b/src/popup/send/send-add-edit.component.html
index a297103efa..90e59193ae 100644
--- a/src/popup/send/send-add-edit.component.html
+++ b/src/popup/send/send-add-edit.component.html
@@ -110,10 +110,12 @@
         </div>
         <!-- Options -->
         <div class="box">
-            <h2 class="box-header-expandable" (click)="showOptions = !showOptions">
-                {{'options' | i18n}}
-                <i *ngIf="!showOptions" class="fa fa-chevron-down fa-sm icon"></i>
-                <i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon"></i>
+            <h2>
+                <button type="button" class="box-header-expandable" (click)="showOptions = !showOptions" [attr.aria-expanded]="showOptions">
+                    {{'options' | i18n}}
+                    <i *ngIf="!showOptions" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
+                    <i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+                </button>
             </h2>
         </div>
         <div [hidden]="!showOptions">
diff --git a/src/popup/settings/options.component.html b/src/popup/settings/options.component.html
index 440b023251..7c1e5db852 100644
--- a/src/popup/settings/options.component.html
+++ b/src/popup/settings/options.component.html
@@ -12,10 +12,12 @@
 </header>
 <content>
     <div class="box">
-        <h2 class="box-header-expandable" (click)="showGeneral = !showGeneral">
-            General
-            <i *ngIf="!showGeneral" class="fa fa-chevron-down fa-sm icon"></i>
-            <i *ngIf="showGeneral" class="fa fa-chevron-up fa-sm icon"></i>
+        <h2>
+            <button type="button" class="box-header-expandable" (click)="showGeneral = !showGeneral" [attr.aria-expanded]="showGeneral">
+                General
+                <i *ngIf="!showGeneral" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
+                <i *ngIf="showGeneral" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+            </button>
         </h2>
     </div>
     <ng-container *ngIf="showGeneral">
@@ -84,10 +86,12 @@
         </div>
     </ng-container>
     <div class="box box-section-divider">
-        <h2 class="box-header-expandable" (click)="showDisplay = !showDisplay">
-            Display
-            <i *ngIf="!showDisplay" class="fa fa-chevron-down fa-sm icon"></i>
-            <i *ngIf="showDisplay" class="fa fa-chevron-up fa-sm icon"></i>
+        <h2>
+            <button type="button" class="box-header-expandable" (click)="showDisplay = !showDisplay" [attr.aria-expanded]="showDisplay">
+                Display
+                <i *ngIf="!showDisplay" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
+                <i *ngIf="showDisplay" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+            </button>
         </h2>
     </div>
     <ng-container *ngIf="showDisplay">
@@ -141,10 +145,12 @@
         </div>
     </ng-container>
     <div class="box box-section-divider">
-        <h2 class="box-header-expandable" (click)="showAutofill = !showAutofill">
-            Autofill
-            <i *ngIf="!showAutofill" class="fa fa-chevron-down fa-sm icon"></i>
-            <i *ngIf="showAutofill" class="fa fa-chevron-up fa-sm icon"></i>
+        <h2>
+            <button type="button" class="box-header-expandable" (click)="showAutofill = !showAutofill" [attr.aria-expanded]="showAutofill">
+                Autofill
+                <i *ngIf="!showAutofill" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
+                <i *ngIf="showAutofill" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+            </button>
         </h2>
     </div>
     <ng-container *ngIf="showAutofill">