From 4ed74416f4c83dd8d38a74a5d948b61bb2e1ba73 Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Thu, 21 Apr 2022 23:49:13 +1000
Subject: [PATCH] [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
---
 src/popup/generator/generator.component.html | 48 ++++++++++++--------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/popup/generator/generator.component.html b/src/popup/generator/generator.component.html
index 7a012508f1..6f75089c10 100644
--- a/src/popup/generator/generator.component.html
+++ b/src/popup/generator/generator.component.html
@@ -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()"