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

* Fix name attributes for radiobuttons in the same group

* Add role=radiogroup

* Add aria-labelledby

* Fix name
This commit is contained in:
Thomas Rittson 2022-04-21 23:49:13 +10:00 committed by GitHub
parent 58b39c613e
commit 4ed74416f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 18 deletions

View File

@ -66,13 +66,15 @@
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row">
<label class="radio-header">{{ "whatWouldYouLikeToGenerate" | i18n }}</label>
<div class="box-content-row" role="radiogroup" aria-labelledby="typeHeading">
<label id="typeHeading" class="radio-header">{{
"whatWouldYouLikeToGenerate" | i18n
}}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of typeOptions">
<input
type="radio"
[(ngModel)]="type"
name="Type_{{ o.value }}"
name="Type"
id="type_{{ o.value }}"
[value]="o.value"
(change)="typeChanged()"
@ -92,13 +94,13 @@
{{ "options" | i18n }}
</h2>
<div class="box-content">
<div class="box-content-row">
<label class="radio-header">{{ "passwordType" | i18n }}</label>
<div class="box-content-row" role="radiogroup" aria-labelledby="passwordTypeHeading">
<label id="passwordTypeHeading" class="radio-header">{{ "passwordType" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of passTypeOptions">
<input
type="radio"
[(ngModel)]="passwordOptions.type"
name="PasswordType_{{ o.value }}"
name="PasswordType"
id="passwordtype_{{ o.value }}"
[value]="o.value"
(change)="savePasswordOptions()"
@ -279,8 +281,8 @@
{{ "options" | i18n }}
</h2>
<div class="box-content">
<div class="box-content-row">
<label class="radio-header">
<div class="box-content-row" role="radiogroup" aria-labelledby="usernameTypeHeading">
<label id="usernameTypeHeading" class="radio-header">
{{ "usernameType" | i18n }}
<a
href="https://bitwarden.com/help/generator/#username-types"
@ -299,7 +301,7 @@
<input
type="radio"
[(ngModel)]="usernameOptions.type"
name="Type_{{ o.value }}"
name="UsernameType"
id="type_{{ o.value }}"
[value]="o.value"
(change)="saveUsernameOptions()"
@ -315,13 +317,13 @@
</div>
<div class="box" *ngIf="usernameOptions.type === 'forwarded'">
<div class="box-content">
<div class="box-content-row">
<label class="radio-header">{{ "service" | i18n }}</label>
<div class="box-content-row" role="radiogroup" aria-labelledby="forwardTypeHeading">
<label id="forwardTypeHeading" class="radio-header">{{ "service" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of forwardOptions">
<input
type="radio"
[(ngModel)]="usernameOptions.forwardedService"
name="ForwardType_{{ o.value }}"
name="ForwardType"
id="forwardtype_{{ o.value }}"
[value]="o.value"
(change)="saveUsernameOptions()"
@ -346,13 +348,18 @@
(blur)="saveUsernameOptions()"
/>
</div>
<div class="box-content-row" *ngIf="subaddressOptions.length > 1">
<label class="radio-header">{{ "type" | i18n }}</label>
<div
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">
<input
type="radio"
[(ngModel)]="usernameOptions.subaddressType"
name="SubaddressType_{{ o.value }}"
name="SubaddressType"
id="subaddresstype_{{ o.value }}"
[value]="o.value"
(change)="saveUsernameOptions()"
@ -388,13 +395,18 @@
(blur)="saveUsernameOptions()"
/>
</div>
<div class="box-content-row" *ngIf="catchallOptions.length > 1">
<label class="radio-header">{{ "type" | i18n }}</label>
<div
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">
<input
type="radio"
[(ngModel)]="usernameOptions.catchallType"
name="CatchallType_{{ o.value }}"
name="CatchallType"
id="catchalltype_{{ o.value }}"
[value]="o.value"
(change)="saveUsernameOptions()"