Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 73 additions and 58 deletions
Show Stats 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>

7
apps/desktop/src/app/accounts/environment.component.html
View File

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

18
apps/desktop/src/app/accounts/settings.component.html
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">

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

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

28
apps/desktop/src/app/vault/generator.component.html
View File

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

2
apps/desktop/src/scss/box.scss
View File

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

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

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

14
apps/web/src/scss/buttons.scss
View File

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

4
bitwarden_license/bit-web/src/app/organizations/manage/sso.component.html
View File

@ -236,8 +236,8 @@
class="bwi"
aria-hidden="true"
[ngClass]="{
'bwi-angle-down': !showOpenIdCustomizations,
'bwi-chevron-up': showOpenIdCustomizations
'bwi-angle-right': !showOpenIdCustomizations,
'bwi-angle-down': showOpenIdCustomizations
}"
></i>
</button>

4
libs/components/src/link/link.stories.ts
View File

@ -39,8 +39,8 @@ const ButtonTemplate: Story<ButtonLinkDirective> = (args: ButtonLinkDirective) =
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Button
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</button>
</div>
<div class="tw-block tw-p-2">
@ -65,8 +65,8 @@ const AnchorTemplate: Story<AnchorLinkDirective> = (args: AnchorLinkDirective) =
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Anchor
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</a>
</div>
<div class="tw-block tw-p-2">

14
libs/components/src/stories/icons.stories.mdx
View File

@ -61,7 +61,7 @@ Avoid using icons to convey information unless paired with meaningful, clear tex
| <i class="bwi bwi-lock-f"></i> | bwi-lock-f | - |
| <i class="bwi bwi-minus-circle"></i> | bwi-minus-circle | remove action |
| <i class="bwi bwi-minus-square"></i> | bwi-minus-square | unselect all action |
| <i class="bwi bwi-paste"></i> | bwi-paste | paste from clipbaord action |
| <i class="bwi bwi-paste"></i> | bwi-paste | paste from clipboard action |
| <i class="bwi bwi-pencil-square"></i> | bwi-pencil-square | edit action |
| <i class="bwi bwi-play"></i> | bwi-play | start or play action |
| <i class="bwi bwi-plus"></i> | bwi-plus | new or add option in contained buttons/links |
@ -88,20 +88,20 @@ Avoid using icons to convey information unless paired with meaningful, clear tex
| Icon | bwi-name | Usage |
| ------------------------------------------ | ---------------------- | ------------------------------------------------------- |
| <i class="bwi bwi-angle-down"></i> | bwi-angle-down | drop down or expandable options |
| <i class="bwi bwi-angle-down"></i> | bwi-angle-down | closed dropdown or open expandable section |
| <i class="bwi bwi-angle-left"></i> | bwi-angle-left | - |
| <i class="bwi bwi-angle-right"></i> | bwi-angle-right | collapsed section that can be expanded |
| <i class="bwi bwi-angle-right"></i> | bwi-angle-right | closed expandable section |
| <i class="bwi bwi-arrow-circle-down"></i> | bwi-arrow-circle-down | table sort order |
| <i class="bwi bwi-arrow-circle-left"></i> | bwi-arrow-circle-left | - |
| <i class="bwi bwi-arrow-circle-right"></i> | bwi-arrow-circle-right | - |
| <i class="bwi bwi-arrow-circle-up"></i> | bwi-arrow-circle-up | table sort order |
| <i class="bwi bwi-caret-down"></i> | bwi-caret-down | - |
| <i class="bwi bwi-caret-right"></i> | bwi-caret-right | - |
| <i class="bwi bwi-chevron-up"></i> | bwi-chevron-up | - |
| <i class="bwi bwi-chevron-up"></i> | bwi-chevron-up | open dropdown |
| <i class="bwi bwi-dbl-angle-left"></i> | bwi-dbl-angle-left | - |
| <i class="bwi bwi-dbl-angle-right"></i> | bwi-dbl-angle-right | - |
| <i class="bwi bwi-ellipsis-h"></i> | bwi-ellipsis-h | more options menu horizontal; used in mobile list items |
| <i class="bwi bwi-ellipsis-v"></i> | bwi-ellipsis-v | more optioins menu vertical; used primarily in tables |
| <i class="bwi bwi-ellipsis-v"></i> | bwi-ellipsis-v | more options menu vertical; used primarily in tables |
| <i class="bwi bwi-filter"></i> | bwi-filter | Product switcher |
| <i class="bwi bwi-hamburger"></i> | bwi-hamburger | navigation indicator |
| <i class="bwi bwi-list"></i> | bwi-list | toggle list/grid view |
@ -159,11 +159,11 @@ Avoid using icons to convey information unless paired with meaningful, clear tex
| <i class="bwi bwi-tag"></i> | bwi-tag | labels |
| <i class="bwi bwi-thumb-tack"></i> | bwi-thumb-tack | - |
| <i class="bwi bwi-thumbs-up"></i> | bwi-thumbs-up | - |
| <i class="bwi bwi-universal-access"></i> | bwi-universal-access | use for accessiblity related actions |
| <i class="bwi bwi-universal-access"></i> | bwi-universal-access | use for accessibility related actions |
| <i class="bwi bwi-user"></i> | bwi-user | relates to current user or organization member |
| <i class="bwi bwi-user-circle"></i> | bwi-user-circle | - |
| <i class="bwi bwi-user-f"></i> | bwi-user-f | - |
| <i class="bwi bwi-wrench"></i> | bwi-wrench | tools or aditional configuration options |
| <i class="bwi bwi-wrench"></i> | bwi-wrench | tools or additional configuration options |
## Platforms and Logos