From e1aceca72b9661feba9c2126689c1403c3a2a284 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 23 Dec 2022 00:18:18 +0000
Subject: [PATCH] [PS-1386] Browser/Desktop/Web: Accessibility - Stop username
 regenerator button from losing focus (#3405)

* Make username regenerator button same as password one

it seems that (originally?) it wanted to be disabled at first and then become active again once the generator's async call was finished...but this seems unnecessary. removing all that extraneous stuff that doesn't seem to be actually doing anything makes this work just as well as the password generator button, and doesn't end up losing/resetting focus.

* Remove the `[disabled]` attribute from regenerate buttons

* Use `aria-disabled` instead of `disabled`, make click event conditional

* Make spinner show for `aria-disabled` controls as well
---
 apps/browser/src/popup/generator/generator.component.html | 4 ++--
 apps/desktop/src/app/vault/generator.component.html       | 4 ++--
 apps/web/src/app/tools/generator.component.html           | 4 ++--
 apps/web/src/scss/buttons.scss                            | 1 +
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/browser/src/popup/generator/generator.component.html b/apps/browser/src/popup/generator/generator.component.html
index c6dc49772c..3b07c3b2ce 100644
--- a/apps/browser/src/popup/generator/generator.component.html
+++ b/apps/browser/src/popup/generator/generator.component.html
@@ -56,8 +56,8 @@
         type="button"
         appStopClick
         appA11yTitle="{{ 'regenerateUsername' | i18n }}"
-        (click)="regenerate()"
-        [disabled]="$any(form).loading"
+        (click)="$any(form).loading ? false : regenerate()"
+        [attr.aria-disabled]="$any(form).loading ? 'true' : null"
       >
         <i
           class="bwi bwi-lg bwi-generate"
diff --git a/apps/desktop/src/app/vault/generator.component.html b/apps/desktop/src/app/vault/generator.component.html
index 4b8f16a91d..423b47b3f7 100644
--- a/apps/desktop/src/app/vault/generator.component.html
+++ b/apps/desktop/src/app/vault/generator.component.html
@@ -51,8 +51,8 @@
               class="icon-btn primary"
               appStopClick
               appA11yTitle="{{ 'regenerateUsername' | i18n }}"
-              (click)="regenerate()"
-              [disabled]="$any(form).loading"
+              (click)="$any(form).loading ? false : regenerate()"
+              [attr.aria-disabled]="$any(form).loading ? 'true' : null"
             >
               <i
                 class="bwi bwi-lg bwi-generate"
diff --git a/apps/web/src/app/tools/generator.component.html b/apps/web/src/app/tools/generator.component.html
index c4cc11efdf..369812bc97 100644
--- a/apps/web/src/app/tools/generator.component.html
+++ b/apps/web/src/app/tools/generator.component.html
@@ -399,8 +399,8 @@
     <button
       type="button"
       class="btn btn-submit btn-primary"
-      (click)="regenerate()"
-      [disabled]="$any(form).loading"
+      (click)="$any(form).loading ? false : regenerate()"
+      [attr.aria-disabled]="$any(form).loading ? 'true' : null"
     >
       <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "regenerateUsername" | i18n }}</span>
diff --git a/apps/web/src/scss/buttons.scss b/apps/web/src/scss/buttons.scss
index df3b7fcd9b..34a8ec66fa 100644
--- a/apps/web/src/scss/buttons.scss
+++ b/apps/web/src/scss/buttons.scss
@@ -175,6 +175,7 @@
   }
 
   &:disabled:not(.manual),
+  &[aria-disabled="true"]:not(.manual),
   &.loading {
     .bwi-spinner {
       display: flex;