Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-05 09:10:53 +01:00
Code Issues Projects 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/popup/scss/box.scss
View File

@ -20,9 +20,12 @@
} }
.box-header-expandable { .box-header-expandable {
margin: 0 10px 5px 10px; padding: 0 10px;
margin-bottom: 5px;
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
width: 100%;
box-sizing: border-box;
@include themify($themes) { @include themify($themes) {
color: themed('headingColor'); color: themed('headingColor');

10
src/popup/send/send-add-edit.component.html
View File

@ -110,10 +110,12 @@
</div> </div>
<!-- Options --> <!-- Options -->
<div class="box"> <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> </h2>
</div> </div>
<div [hidden]="!showOptions"> <div [hidden]="!showOptions">

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

@ -12,10 +12,12 @@
</header> </header>
<content> <content>
<div class="box"> <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> </h2>
</div> </div>
<ng-container *ngIf="showGeneral"> <ng-container *ngIf="showGeneral">
@ -84,10 +86,12 @@
</div> </div>
</ng-container> </ng-container>
<div class="box box-section-divider"> <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> </h2>
</div> </div>
<ng-container *ngIf="showDisplay"> <ng-container *ngIf="showDisplay">
@ -141,10 +145,12 @@
</div> </div>
</ng-container> </ng-container>
<div class="box box-section-divider"> <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> </h2>
</div> </div>
<ng-container *ngIf="showAutofill"> <ng-container *ngIf="showAutofill">