devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

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

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

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

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

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