bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 22:33:35 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* 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
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/tools/generator.component.html
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()"