From c0511f25cac9ce74a70dbe4adf1175ba4fc0ca7d Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Thu, 21 Apr 2022 23:51:00 +1000
Subject: [PATCH] [PS-211] [PS-212] Make Generator page accessible (#1607)

* Fix grouping of radiobutton inputs

* Add role=radiogroup

* Add aria-labelledBy to radio button groups
---
 src/app/tools/generator.component.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/tools/generator.component.html b/src/app/tools/generator.component.html
index ebd4c56d65..e73ab37507 100644
--- a/src/app/tools/generator.component.html
+++ b/src/app/tools/generator.component.html
@@ -20,14 +20,14 @@
     ></div>
   </div>
 </div>
-<div class="form-group">
-  <label class="d-block">{{ "whatWouldYouLikeToGenerate" | i18n }}</label>
+<div class="form-group" role="radiogroup" aria-labelledby="typeHeading">
+  <label id="typeHeading" class="d-block">{{ "whatWouldYouLikeToGenerate" | i18n }}</label>
   <div class="form-check form-check-inline" *ngFor="let o of typeOptions">
     <input
       class="form-check-input"
       type="radio"
       [(ngModel)]="type"
-      name="Type_{{ o.value }}"
+      name="Type"
       id="type_{{ o.value }}"
       [value]="o.value"
       (change)="typeChanged()"
@@ -39,14 +39,14 @@
   </div>
 </div>
 <ng-container *ngIf="type === 'password'">
-  <div class="form-group">
-    <label class="d-block">{{ "passwordType" | i18n }}</label>
+  <div aria-labelledby="passwordTypeHeading" class="form-group" role="radiogroup">
+    <label id="passwordTypeHeading" class="d-block">{{ "passwordType" | i18n }}</label>
     <div class="form-check form-check-inline" *ngFor="let o of passTypeOptions">
       <input
         class="form-check-input"
         type="radio"
         [(ngModel)]="passwordOptions.type"
-        name="PasswordType_{{ o.value }}"
+        name="PasswordType"
         id="passwordType_{{ o.value }}"
         [value]="o.value"
         (change)="savePasswordOptions()"
@@ -231,9 +231,9 @@
   </div>
 </ng-container>
 <ng-container *ngIf="type === 'username'">
-  <div class="form-group">
+  <div aria-labelledby="usernameTypeHeading" class="form-group" role="radiogroup">
     <div class="d-block">
-      <label>{{ "usernameType" | i18n }}</label>
+      <label id="usernameTypeHeading">{{ "usernameType" | i18n }}</label>
       <a
         class="ml-auto"
         href="https://bitwarden.com/help/generator/#username-types"
@@ -249,7 +249,7 @@
         class="form-check-input"
         type="radio"
         [(ngModel)]="usernameOptions.type"
-        name="UsernameType_{{ o.value }}"
+        name="UsernameType"
         id="usernameType_{{ o.value }}"
         [value]="o.value"
         (change)="saveUsernameOptions()"
@@ -261,13 +261,13 @@
       </label>
     </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">
       <input
         class="form-check-input"
         type="radio"
         [(ngModel)]="usernameOptions.forwardedService"
-        name="ForwardType_{{ o.value }}"
+        name="ForwardType"
         id="forwardtype_{{ o.value }}"
         [value]="o.value"
         (change)="saveUsernameOptions()"