[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/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;
+}