[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

@@ -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"

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"

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>

apps/web/src/scss/buttons.scss

@@ -175,6 +175,7 @@
   }
 
   &:disabled:not(.manual),
+  &[aria-disabled="true"]:not(.manual),
   &.loading {
     .bwi-spinner {
       display: flex;