From a6226c7c90ec19579d73d310f2b050d35621c61d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Gon=C3=A7alves?= <carlosmaccam@gmail.com>
Date: Mon, 21 Nov 2022 17:08:47 +0000
Subject: [PATCH] [SG-632] - Change forwarded providers radio buttons list to
 dropdown (#4045)

* SG-632 - Changed forwarded providers list of radio buttons to dropdown

* SG-632 - Added role attributes to improve accessibility.

* SG-632 - Added sorting to array and empty option

* SG-632 - Fix styling to match standards.
---
 .../popup/generator/generator.component.html  | 26 ++++++++-----------
 .../src/app/vault/generator.component.html    | 26 ++++++++-----------
 .../src/app/tools/generator.component.html    | 26 ++++++++-----------
 .../src/components/generator.component.ts     | 25 +++++++++++++-----
 4 files changed, 51 insertions(+), 52 deletions(-)

diff --git a/apps/browser/src/popup/generator/generator.component.html b/apps/browser/src/popup/generator/generator.component.html
index c3ae6c6ab53..1f0a0a328af 100644
--- a/apps/browser/src/popup/generator/generator.component.html
+++ b/apps/browser/src/popup/generator/generator.component.html
@@ -320,22 +320,18 @@
     </div>
     <div class="box" *ngIf="usernameOptions.type === 'forwarded'">
       <div class="box-content">
-        <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"
-              id="forwardtype_{{ o.value }}"
-              [value]="o.value"
-              (change)="saveUsernameOptions()"
-              [checked]="usernameOptions.forwardedService === o.value"
-            />
-            <label for="forwardtype_{{ o.value }}">
+        <div class="box-content-row" role="listbox" aria-labelledby="forwardTypeHeading">
+          <label id="forwardTypeHeading">{{ "service" | i18n }}</label>
+          <select
+            id="ForwardTypeDropdown"
+            name="ForwardType"
+            [(ngModel)]="usernameOptions.forwardedService"
+            (change)="saveUsernameOptions()"
+          >
+            <option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
               {{ o.name }}
-            </label>
-          </div>
+            </option>
+          </select>
         </div>
         <ng-container *ngIf="usernameOptions.forwardedService === 'simplelogin'">
           <div class="box-content-row" appBoxRow>
diff --git a/apps/desktop/src/app/vault/generator.component.html b/apps/desktop/src/app/vault/generator.component.html
index 221e4b211fb..6111bcc3c6a 100644
--- a/apps/desktop/src/app/vault/generator.component.html
+++ b/apps/desktop/src/app/vault/generator.component.html
@@ -353,22 +353,18 @@
           </div>
           <div class="box" *ngIf="usernameOptions.type === 'forwarded'" [hidden]="!showOptions">
             <div class="box-content condensed">
-              <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"
-                    id="forwardtype_{{ o.value }}"
-                    [value]="o.value"
-                    (change)="saveUsernameOptions()"
-                    [checked]="usernameOptions.forwardedService === o.value"
-                  />
-                  <label for="forwardtype_{{ o.value }}">
+              <div class="box-content-row" role="listbox" aria-labelledby="forwardTypeHeading">
+                <label id="forwardTypeHeading">{{ "service" | i18n }}</label>
+                <select
+                  id="ForwardTypeDropdown"
+                  name="ForwardType"
+                  [(ngModel)]="usernameOptions.forwardedService"
+                  (change)="saveUsernameOptions()"
+                >
+                  <option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
                     {{ o.name }}
-                  </label>
-                </div>
+                  </option>
+                </select>
               </div>
               <ng-container *ngIf="usernameOptions.forwardedService === 'simplelogin'">
                 <div class="box-content-row" appBoxRow>
diff --git a/apps/web/src/app/tools/generator.component.html b/apps/web/src/app/tools/generator.component.html
index 542c0c3c5e3..08019417061 100644
--- a/apps/web/src/app/tools/generator.component.html
+++ b/apps/web/src/app/tools/generator.component.html
@@ -266,23 +266,19 @@
     </div>
   </div>
   <ng-container *ngIf="usernameOptions.type === 'forwarded'">
-    <div class="form-group">
+    <div class="form-group" role="listbox">
       <label class="d-block">{{ "service" | i18n }}</label>
-      <div class="form-check" *ngFor="let o of forwardOptions">
-        <input
-          class="form-check-input"
-          type="radio"
-          [(ngModel)]="usernameOptions.forwardedService"
-          name="ForwardType"
-          id="forwardtype_{{ o.value }}"
-          [value]="o.value"
-          (change)="saveUsernameOptions()"
-          [checked]="usernameOptions.forwardedService === o.value"
-        />
-        <label class="form-check-label" for="forwardtype_{{ o.value }}">
+      <select
+        id="ForwardTypeDropdown"
+        name="ForwardType"
+        [(ngModel)]="usernameOptions.forwardedService"
+        (change)="saveUsernameOptions()"
+        class="form-control w-auto"
+      >
+        <option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
           {{ o.name }}
-        </label>
-      </div>
+        </option>
+      </select>
     </div>
     <div class="row" *ngIf="usernameOptions.forwardedService === 'simplelogin'">
       <div class="form-group col-4">
diff --git a/libs/angular/src/components/generator.component.ts b/libs/angular/src/components/generator.component.ts
index 2e7d0aaada6..29262919aac 100644
--- a/libs/angular/src/components/generator.component.ts
+++ b/libs/angular/src/components/generator.component.ts
@@ -70,13 +70,7 @@ export class GeneratorComponent implements OnInit {
     ];
     this.subaddressOptions = [{ name: i18nService.t("random"), value: "random" }];
     this.catchallOptions = [{ name: i18nService.t("random"), value: "random" }];
-    this.forwardOptions = [
-      { name: "SimpleLogin", value: "simplelogin" },
-      { name: "AnonAddy", value: "anonaddy" },
-      { name: "Firefox Relay", value: "firefoxrelay" },
-      { name: "Fastmail", value: "fastmail" },
-      { name: "DuckDuckGo", value: "duckduckgo" },
-    ];
+    this.initForwardOptions();
   }
 
   async ngOnInit() {
@@ -239,4 +233,21 @@ export class GeneratorComponent implements OnInit {
       this.enforcedPasswordPolicyOptions
     );
   }
+
+  private async initForwardOptions() {
+    this.forwardOptions = [
+      { name: "AnonAddy", value: "anonaddy" },
+      { name: "DuckDuckGo", value: "duckduckgo" },
+      { name: "Fastmail", value: "fastmail" },
+      { name: "Firefox Relay", value: "firefoxrelay" },
+      { name: "SimpleLogin", value: "simplelogin" },
+    ];
+
+    this.usernameOptions = await this.usernameGenerationService.getOptions();
+    if (this.usernameOptions.forwardedService == null) {
+      this.forwardOptions.push({ name: "", value: null });
+    }
+
+    this.forwardOptions = this.forwardOptions.sort((a, b) => a.name.localeCompare(b.name));
+  }
 }