Merge pull request #2234 from patrickhlauke/patrickhlauke-issue1983

A11y: make expandable box headers keyboard-operable, expose correct role/state

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');

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">
+            <h2>
-                {{'options' | i18n}}
+                <button type="button" class="box-header-expandable" (click)="showOptions = !showOptions" [attr.aria-expanded]="showOptions">
-                <i *ngIf="!showOptions" class="fa fa-chevron-down fa-sm icon"></i>
+                    {{'options' | i18n}}
-                <i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon"></i>
+                    <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">

src/popup/settings/options.component.html

@@ -12,10 +12,12 @@
 </header>
 <content>
     <div class="box">
-        <h2 class="box-header-expandable" (click)="showGeneral = !showGeneral">
+        <h2>
-            General
+            <button type="button" class="box-header-expandable" (click)="showGeneral = !showGeneral" [attr.aria-expanded]="showGeneral">
-            <i *ngIf="!showGeneral" class="fa fa-chevron-down fa-sm icon"></i>
+                General
-            <i *ngIf="showGeneral" class="fa fa-chevron-up fa-sm icon"></i>
+                <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">
+        <h2>
-            Display
+            <button type="button" class="box-header-expandable" (click)="showDisplay = !showDisplay" [attr.aria-expanded]="showDisplay">
-            <i *ngIf="!showDisplay" class="fa fa-chevron-down fa-sm icon"></i>
+                Display
-            <i *ngIf="showDisplay" class="fa fa-chevron-up fa-sm icon"></i>
+                <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">
+        <h2>
-            Autofill
+            <button type="button" class="box-header-expandable" (click)="showAutofill = !showAutofill" [attr.aria-expanded]="showAutofill">
-            <i *ngIf="!showAutofill" class="fa fa-chevron-down fa-sm icon"></i>
+                Autofill
-            <i *ngIf="showAutofill" class="fa fa-chevron-up fa-sm icon"></i>
+                <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">