[PS-1793] Desktop/Browser/Web: tweak disclosure widget design (#3951)

* Move chevron/arrow to start of disclosure widget

in addition, changes the only expand/collapse disclosure widget like this on the web client to use the same `<h3><button>...</button></h3>` structure as on browser extension and desktop app

* Change collapsed/expanded icons

Make them more understandable and consistent with other expand/collapse controls

* Harmonise desktop +/- controls to use arrow/chevron icons as well

also removes the incorrect `A11yTitle` in the generator that currently overrides the visible "Options" text (leading to a failure of WCAG 2.5.3 Label in Name)

* Change the icons for the expand/collapse disclosure widget in SSO component

* Expand icon explanation

plus minor typo cleanup

* Add patch for Send button focus outline

apps/desktop/src/app/accounts/environment.component.html

@@ -26,8 +26,11 @@
         <div class="box">
           <h2 class="box-header">
             <button type="button" (click)="toggleCustom()" [attr.aria-expanded]="showCustom">
-              <i class="bwi bwi-plus-square" [hidden]="showCustom" aria-hidden="true"></i>
-              <i class="bwi bwi-minus-square" [hidden]="!showCustom" aria-hidden="true"></i>
+              <i
+                class="bwi bwi-lg"
+                aria-hidden="true"
+                [ngClass]="{ 'bwi-angle-right': !showCustom, 'bwi-angle-down': showCustom }"
+              ></i>
               {{ "customEnvironment" | i18n }}
             </button>
           </h2>

apps/desktop/src/app/accounts/settings.component.html

@@ -16,17 +16,17 @@
                 [attr.aria-expanded]="showSecurity"
                 appAutofocus
               >
-                {{ "security" | i18n }}
                 <i
                   *ngIf="!showSecurity"
-                  class="bwi bwi-angle-down bwi-sm icon"
+                  class="bwi bwi-angle-right bwi-sm icon"
                   aria-hidden="true"
                 ></i>
                 <i
                   *ngIf="showSecurity"
-                  class="bwi bwi-chevron-up bwi-sm icon"
+                  class="bwi bwi-angle-down bwi-sm icon"
                   aria-hidden="true"
                 ></i>
+                {{ "security" | i18n }}
               </button>
             </h2>
             <ng-container *ngIf="showSecurity">
@@ -120,17 +120,17 @@
                 (click)="showAccountPreferences = !showAccountPreferences"
                 [attr.aria-expanded]="showAccountPreferences"
               >
-                {{ "accountPreferences" | i18n }}
                 <i
                   *ngIf="!showAccountPreferences"
-                  class="bwi bwi-angle-down bwi-sm icon"
+                  class="bwi bwi-angle-right bwi-sm icon"
                   aria-hidden="true"
                 ></i>
                 <i
                   *ngIf="showAccountPreferences"
-                  class="bwi bwi-chevron-up bwi-sm icon"
+                  class="bwi bwi-angle-down bwi-sm icon"
                   aria-hidden="true"
                 ></i>
+                {{ "accountPreferences" | i18n }}
               </button>
             </h2>
             <ng-container *ngIf="showAccountPreferences">
@@ -190,17 +190,17 @@
                 (click)="showAppPreferences = !showAppPreferences"
                 [attr.aria-expanded]="showAppPreferences"
               >
-                {{ "appPreferences" | i18n }}
                 <i
                   *ngIf="!showAppPreferences"
-                  class="bwi bwi-angle-down bwi-sm icon"
+                  class="bwi bwi-angle-right bwi-sm icon"
                   aria-hidden="true"
                 ></i>
                 <i
                   *ngIf="showAppPreferences"
-                  class="bwi bwi-chevron-up bwi-sm icon"
+                  class="bwi bwi-angle-down bwi-sm icon"
                   aria-hidden="true"
                 ></i>
+                {{ "appPreferences" | i18n }}
               </button>
             </h2>
             <ng-container *ngIf="showAppPreferences">

apps/desktop/src/app/send/add-edit.component.html

@@ -100,12 +100,12 @@
             (click)="toggleOptions()"
             [attr.aria-expanded]="showOptions"
           >
-            {{ "options" | i18n }}
             <i
               class="bwi bwi-lg"
               aria-hidden="true"
-              [ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }"
+              [ngClass]="{ 'bwi-angle-right': !showOptions, 'bwi-angle-down': showOptions }"
             ></i>
+            {{ "options" | i18n }}
           </button>
         </h2>
       </div>

apps/desktop/src/app/vault/generator.component.html

@@ -99,14 +99,12 @@
         <ng-container *ngIf="type === 'password'">
           <div class="box">
             <h2 class="box-header">
-              <button
-                type="button"
-                (click)="toggleOptions()"
-                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                [attr.aria-expanded]="showOptions"
-              >
-                <i class="bwi bwi-plus-square" aria-hidden="true" [hidden]="showOptions"></i>
-                <i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i>
+              <button type="button" (click)="toggleOptions()" [attr.aria-expanded]="showOptions">
+                <i
+                  class="bwi bwi-lg"
+                  aria-hidden="true"
+                  [ngClass]="{ 'bwi-angle-right': !showOptions, 'bwi-angle-down': showOptions }"
+                ></i>
                 {{ "options" | i18n }}
               </button>
             </h2>
@@ -299,14 +297,12 @@
         <ng-container *ngIf="type === 'username'">
           <div class="box">
             <h2 class="box-header">
-              <button
-                type="button"
-                (click)="toggleOptions()"
-                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                [attr.aria-expanded]="showOptions"
-              >
-                <i class="bwi bwi-plus-square" aria-hidden="true" [hidden]="showOptions"></i>
-                <i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i>
+              <button type="button" (click)="toggleOptions()" [attr.aria-expanded]="showOptions">
+                <i
+                  class="bwi bwi-lg"
+                  aria-hidden="true"
+                  [ngClass]="{ 'bwi-angle-right': !showOptions, 'bwi-angle-down': showOptions }"
+                ></i>
                 {{ "options" | i18n }}
               </button>
             </h2>

apps/desktop/src/scss/box.scss

@@ -58,7 +58,7 @@
     .icon {
       display: flex;
       align-items: flex-end;
-      margin-left: 5px;
+      margin-right: 5px;
 
       @include themify($themes) {
         color: themed("headingColor");