1
0
mirror of https://github.com/bitwarden/browser synced 2026-01-06 10:33:57 +00:00

[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
This commit is contained in:
Patrick H. Lauke
2022-12-15 14:13:09 +00:00
committed by GitHub
parent b319713e07
commit 002c3f6368
13 changed files with 73 additions and 58 deletions

View File

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