bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-10 12:33:26 +00:00
Code Issues Releases Wiki Activity

A11y: make expandable box headers actual buttons, expose state with aria-expanded

Browse Source 
Closes https://github.com/bitwarden/browser/issues/1983
This commit is contained in:
Patrick H. Lauke
2021-12-19 17:26:57 +00:00
parent eef979fdba
commit c733f2def6
3 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/popup/settings/options.component.html
View File

@@ -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">