1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-12 01:48:21 +02:00

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

* Fix grouping of radiobutton inputs

* Add role=radiogroup

* Add aria-labelledBy to radio button groups
This commit is contained in:
Thomas Rittson 2022-04-21 23:51:00 +10:00 committed by GitHub
parent 1be62ac222
commit c0511f25ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -20,14 +20,14 @@
></div> ></div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group" role="radiogroup" aria-labelledby="typeHeading">
<label class="d-block">{{ "whatWouldYouLikeToGenerate" | i18n }}</label> <label id="typeHeading" class="d-block">{{ "whatWouldYouLikeToGenerate" | i18n }}</label>
<div class="form-check form-check-inline" *ngFor="let o of typeOptions"> <div class="form-check form-check-inline" *ngFor="let o of typeOptions">
<input <input
class="form-check-input" class="form-check-input"
type="radio" type="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()"
@ -39,14 +39,14 @@
</div> </div>
</div> </div>
<ng-container *ngIf="type === 'password'"> <ng-container *ngIf="type === 'password'">
<div class="form-group"> <div aria-labelledby="passwordTypeHeading" class="form-group" role="radiogroup">
<label class="d-block">{{ "passwordType" | i18n }}</label> <label id="passwordTypeHeading" class="d-block">{{ "passwordType" | i18n }}</label>
<div class="form-check form-check-inline" *ngFor="let o of passTypeOptions"> <div class="form-check form-check-inline" *ngFor="let o of passTypeOptions">
<input <input
class="form-check-input" class="form-check-input"
type="radio" type="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()"
@ -231,9 +231,9 @@
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="type === 'username'"> <ng-container *ngIf="type === 'username'">
<div class="form-group"> <div aria-labelledby="usernameTypeHeading" class="form-group" role="radiogroup">
<div class="d-block"> <div class="d-block">
<label>{{ "usernameType" | i18n }}</label> <label id="usernameTypeHeading">{{ "usernameType" | i18n }}</label>
<a <a
class="ml-auto" class="ml-auto"
href="https://bitwarden.com/help/generator/#username-types" href="https://bitwarden.com/help/generator/#username-types"
@ -249,7 +249,7 @@
class="form-check-input" class="form-check-input"
type="radio" type="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()"
@ -261,13 +261,13 @@
</label> </label>
</div> </div>
</div> </div>
<div class="form-group" *ngIf="usernameOptions.type === 'forwarded'"> <div class="form-group" role="radiogroup" *ngIf="usernameOptions.type === 'forwarded'">
<div class="form-check form-check-inline" *ngFor="let o of forwardOptions"> <div class="form-check form-check-inline" *ngFor="let o of forwardOptions">
<input <input
class="form-check-input" class="form-check-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()"