Upstream
/
bitwarden-desktop
mirror of https://github.com/bitwarden/desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[PS-211] [PS-212] Make Generator page accessible (#1493) 

* Fix radiobutton names

* Add role=radiogroup

* Add aria-labelledby
This commit is contained in:
Thomas Rittson 2022-04-21 23:51:37 +10:00 committed by GitHub
parent 10d35d863b
commit 5082c7708a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/app/vault/generator.component.html
View File

@ -64,8 +64,14 @@
</div> </div>
<div class="box"> <div class="box">
<div class="box-content condensed"> <div class="box-content condensed">
<div class="box-content-row box-content-row-radio"> <div
<label class="radio-header">{{ "whatWouldYouLikeToGenerate" | i18n }}</label> class="box-content-row box-content-row-radio"
role="radiogroup"
aria-labelledby="typeHeading"
>
<label id="typeHeading" class="radio-header">{{
"whatWouldYouLikeToGenerate" | i18n
}}</label>
<div <div
class="radio-group text-default" class="radio-group text-default"
appBoxRow appBoxRow
@ -76,7 +82,7 @@
type="radio" type="radio"
class="radio" class="radio"
[(ngModel)]="type" [(ngModel)]="type"
name="Type_{{ o.value }}" name="Type"
id="type_{{ o.value }}" id="type_{{ o.value }}"
[value]="o.value" [value]="o.value"
(change)="typeChanged()" (change)="typeChanged()"
@ -105,8 +111,14 @@
</button> </button>
</div> </div>
<div class="box-content condensed" [hidden]="!showOptions"> <div class="box-content condensed" [hidden]="!showOptions">
<div class="box-content-row box-content-row-radio"> <div
<label class="radio-header">{{ "passwordType" | i18n }}</label> class="box-content-row box-content-row-radio"
role="radiogroup"
aria-labelledby="passwordTypeHeading"
>
<label id="passwordTypeHeading" class="radio-header">{{
"passwordType" | i18n
}}</label>
<div <div
class="radio-group text-default" class="radio-group text-default"
appBoxRow appBoxRow
@ -117,7 +129,7 @@
type="radio" type="radio"
class="radio" class="radio"
[(ngModel)]="passwordOptions.type" [(ngModel)]="passwordOptions.type"
name="PasswordType_{{ o.value }}" name="PasswordType"
id="passwordType_{{ o.value }}" id="passwordType_{{ o.value }}"
[value]="o.value" [value]="o.value"
(change)="savePasswordOptions()" (change)="savePasswordOptions()"
@ -295,8 +307,12 @@
</button> </button>
</div> </div>
<div class="box-content condensed" [hidden]="!showOptions"> <div class="box-content condensed" [hidden]="!showOptions">
<div class="box-content-row box-content-row-radio"> <div
<label class="radio-header"> class="box-content-row box-content-row-radio"
role="radiogroup"
aria-labelledby="usernameTypeHeading"
>
<label id="usernameTypeHeading" class="radio-header">
{{ "usernameType" | i18n }} {{ "usernameType" | i18n }}
<a <a
href="#" href="#"
@ -318,7 +334,7 @@
type="radio" type="radio"
class="radio" class="radio"
[(ngModel)]="usernameOptions.type" [(ngModel)]="usernameOptions.type"
name="UsernameType_{{ o.value }}" name="UsernameType"
id="usernameType_{{ o.value }}" id="usernameType_{{ o.value }}"
[value]="o.value" [value]="o.value"
(change)="saveUsernameOptions()" (change)="saveUsernameOptions()"
@ -334,13 +350,13 @@
</div> </div>
<div class="box" *ngIf="usernameOptions.type === 'forwarded'" [hidden]="!showOptions"> <div class="box" *ngIf="usernameOptions.type === 'forwarded'" [hidden]="!showOptions">
<div class="box-content condensed"> <div class="box-content condensed">
<div class="box-content-row"> <div class="box-content-row" role="radiogroup" aria-labelledby="forwardTypeHeading">
<label class="radio-header">{{ "service" | i18n }}</label> <label id="forwardTypeHeading" class="radio-header">{{ "service" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of forwardOptions"> <div class="radio-group text-default" appBoxRow *ngFor="let o of forwardOptions">
<input <input
type="radio" type="radio"
[(ngModel)]="usernameOptions.forwardedService" [(ngModel)]="usernameOptions.forwardedService"
name="ForwardType_{{ o.value }}" name="ForwardType"
id="forwardtype_{{ o.value }}" id="forwardtype_{{ o.value }}"
[value]="o.value" [value]="o.value"
(change)="saveUsernameOptions()" (change)="saveUsernameOptions()"
@ -365,13 +381,18 @@
(blur)="saveUsernameOptions()" (blur)="saveUsernameOptions()"
/> />
</div> </div>
<div class="box-content-row" *ngIf="subaddressOptions.length > 1"> <div
<label class="radio-header">{{ "type" | i18n }}</label> class="box-content-row"
role="radiogroup"
aria-labelledby="subaddressTypeHeading"
*ngIf="subaddressOptions.length > 1"
>
<label id="subaddressTypeHeading" class="radio-header">{{ "type" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of subaddressOptions"> <div class="radio-group text-default" appBoxRow *ngFor="let o of subaddressOptions">
<input <input
type="radio" type="radio"
[(ngModel)]="usernameOptions.subaddressType" [(ngModel)]="usernameOptions.subaddressType"
name="SubaddressType_{{ o.value }}" name="SubaddressType"
id="subaddresstype_{{ o.value }}" id="subaddresstype_{{ o.value }}"
[value]="o.value" [value]="o.value"
(change)="saveUsernameOptions()" (change)="saveUsernameOptions()"
@ -407,13 +428,18 @@
(blur)="saveUsernameOptions()" (blur)="saveUsernameOptions()"
/> />
</div> </div>
<div class="box-content-row" *ngIf="catchallOptions.length > 1"> <div
<label class="radio-header">{{ "type" | i18n }}</label> class="box-content-row"
role="radiogroup"
aria-labelledby="catchallTypeHeading"
*ngIf="catchallOptions.length > 1"
>
<label id="catchallTypeHeading" class="radio-header">{{ "type" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of catchallOptions"> <div class="radio-group text-default" appBoxRow *ngFor="let o of catchallOptions">
<input <input
type="radio" type="radio"
[(ngModel)]="usernameOptions.catchallType" [(ngModel)]="usernameOptions.catchallType"
name="CatchallType_{{ o.value }}" name="CatchallType"
id="catchalltype_{{ o.value }}" id="catchalltype_{{ o.value }}"
[value]="o.value" [value]="o.value"
(change)="saveUsernameOptions()" (change)="saveUsernameOptions()"