[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/browser/src/popup/scss/box.scss

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

apps/browser/src/popup/send/send-add-edit.component.html

@@ -154,9 +154,9 @@
           (click)="showOptions = !showOptions"
           [attr.aria-expanded]="showOptions"
         >
+          <i *ngIf="!showOptions" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
+          <i *ngIf="showOptions" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
           {{ "options" | i18n }}
-          <i *ngIf="!showOptions" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
-          <i *ngIf="showOptions" class="bwi bwi-chevron-up bwi-sm icon" aria-hidden="true"></i>
         </button>
       </h2>
     </div>

apps/browser/src/popup/settings/options.component.html

@@ -19,9 +19,9 @@
         (click)="showGeneral = !showGeneral"
         [attr.aria-expanded]="showGeneral"
       >
+        <i *ngIf="!showGeneral" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
+        <i *ngIf="showGeneral" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
         General
-        <i *ngIf="!showGeneral" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showGeneral" class="bwi bwi-chevron-up bwi-sm icon" aria-hidden="true"></i>
       </button>
     </h2>
   </div>
@@ -127,9 +127,9 @@
         (click)="showDisplay = !showDisplay"
         [attr.aria-expanded]="showDisplay"
       >
+        <i *ngIf="!showDisplay" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
+        <i *ngIf="showDisplay" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
         Display
-        <i *ngIf="!showDisplay" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showDisplay" class="bwi bwi-chevron-up bwi-sm icon" aria-hidden="true"></i>
       </button>
     </h2>
   </div>
@@ -210,9 +210,9 @@
         (click)="showAutofill = !showAutofill"
         [attr.aria-expanded]="showAutofill"
       >
+        <i *ngIf="!showAutofill" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
+        <i *ngIf="showAutofill" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
         Autofill
-        <i *ngIf="!showAutofill" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showAutofill" class="bwi bwi-chevron-up bwi-sm icon" aria-hidden="true"></i>
       </button>
     </h2>
   </div>

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");

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

@@ -141,14 +141,16 @@
           class="section-header d-flex flex-row align-items-center mt-5"
           (click)="toggleOptions()"
         >
-          <h3 class="mb-0 mr-2">{{ "options" | i18n }}</h3>
-          <a class="mb-1" href="#" appStopClick role="button">
-            <i
-              class="bwi"
-              aria-hidden="true"
-              [ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }"
-            ></i>
-          </a>
+          <h3 class="mb-0 mr-2">
+            <button appStopClick class="header-expandable">
+              <i
+                class="bwi"
+                aria-hidden="true"
+                [ngClass]="{ 'bwi-angle-right': !showOptions, 'bwi-angle-down': showOptions }"
+              ></i>
+              {{ "options" | i18n }}
+            </button>
+          </h3>
         </div>
         <div id="options" [hidden]="!showOptions">
           <app-send-efflux-dates

apps/web/src/scss/buttons.scss

@@ -201,3 +201,17 @@ button.no-btn {
     color: inherit;
   }
 }
+
+button.header-expandable {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: inherit;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+}
+
+/* special case for Send options */
+h3 button.header-expandable .bwi {
+  line-height: 1.5;
+}