bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-03 09:03:32 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/popup/scss/box.scss
View File

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

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

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

12
apps/browser/src/popup/settings/options.component.html
View File

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