bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 15:23:33 +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 { .icon {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 5px; margin-right: 5px;
@include themify($themes) { @include themify($themes) {
color: themed("headingColor"); color: themed("headingColor");

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

@@ -154,9 +154,9 @@
(click)="showOptions = !showOptions" (click)="showOptions = !showOptions"
[attr.aria-expanded]="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 }} {{ "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> </button>
</h2> </h2>
</div> </div>

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

@@ -19,9 +19,9 @@
(click)="showGeneral = !showGeneral" (click)="showGeneral = !showGeneral"
[attr.aria-expanded]="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 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> </button>
</h2> </h2>
</div> </div>
@@ -127,9 +127,9 @@
(click)="showDisplay = !showDisplay" (click)="showDisplay = !showDisplay"
[attr.aria-expanded]="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 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> </button>
</h2> </h2>
</div> </div>
@@ -210,9 +210,9 @@
(click)="showAutofill = !showAutofill" (click)="showAutofill = !showAutofill"
[attr.aria-expanded]="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 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> </button>
</h2> </h2>
</div> </div>

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

@@ -26,8 +26,11 @@
<div class="box"> <div class="box">
<h2 class="box-header"> <h2 class="box-header">
<button type="button" (click)="toggleCustom()" [attr.aria-expanded]="showCustom"> <button type="button" (click)="toggleCustom()" [attr.aria-expanded]="showCustom">
<i class="bwi bwi-plus-square" [hidden]="showCustom" aria-hidden="true"></i> <i
<i class="bwi bwi-minus-square" [hidden]="!showCustom" aria-hidden="true"></i> class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-angle-right': !showCustom, 'bwi-angle-down': showCustom }"
></i>
{{ "customEnvironment" | i18n }} {{ "customEnvironment" | i18n }}
</button> </button>
</h2> </h2>

18
apps/desktop/src/app/accounts/settings.component.html
View File

@@ -16,17 +16,17 @@
[attr.aria-expanded]="showSecurity" [attr.aria-expanded]="showSecurity"
appAutofocus appAutofocus
> >
{{ "security" | i18n }}
<i <i
*ngIf="!showSecurity" *ngIf="!showSecurity"
class="bwi bwi-angle-down bwi-sm icon" class="bwi bwi-angle-right bwi-sm icon"
aria-hidden="true" aria-hidden="true"
></i> ></i>
<i <i
*ngIf="showSecurity" *ngIf="showSecurity"
class="bwi bwi-chevron-up bwi-sm icon" class="bwi bwi-angle-down bwi-sm icon"
aria-hidden="true" aria-hidden="true"
></i> ></i>
{{ "security" | i18n }}
</button> </button>
</h2> </h2>
<ng-container *ngIf="showSecurity"> <ng-container *ngIf="showSecurity">
@@ -120,17 +120,17 @@
(click)="showAccountPreferences = !showAccountPreferences" (click)="showAccountPreferences = !showAccountPreferences"
[attr.aria-expanded]="showAccountPreferences" [attr.aria-expanded]="showAccountPreferences"
> >
{{ "accountPreferences" | i18n }}
<i <i
*ngIf="!showAccountPreferences" *ngIf="!showAccountPreferences"
class="bwi bwi-angle-down bwi-sm icon" class="bwi bwi-angle-right bwi-sm icon"
aria-hidden="true" aria-hidden="true"
></i> ></i>
<i <i
*ngIf="showAccountPreferences" *ngIf="showAccountPreferences"
class="bwi bwi-chevron-up bwi-sm icon" class="bwi bwi-angle-down bwi-sm icon"
aria-hidden="true" aria-hidden="true"
></i> ></i>
{{ "accountPreferences" | i18n }}
</button> </button>
</h2> </h2>
<ng-container *ngIf="showAccountPreferences"> <ng-container *ngIf="showAccountPreferences">
@@ -190,17 +190,17 @@
(click)="showAppPreferences = !showAppPreferences" (click)="showAppPreferences = !showAppPreferences"
[attr.aria-expanded]="showAppPreferences" [attr.aria-expanded]="showAppPreferences"
> >
{{ "appPreferences" | i18n }}
<i <i
*ngIf="!showAppPreferences" *ngIf="!showAppPreferences"
class="bwi bwi-angle-down bwi-sm icon" class="bwi bwi-angle-right bwi-sm icon"
aria-hidden="true" aria-hidden="true"
></i> ></i>
<i <i
*ngIf="showAppPreferences" *ngIf="showAppPreferences"
class="bwi bwi-chevron-up bwi-sm icon" class="bwi bwi-angle-down bwi-sm icon"
aria-hidden="true" aria-hidden="true"
></i> ></i>
{{ "appPreferences" | i18n }}
</button> </button>
</h2> </h2>
<ng-container *ngIf="showAppPreferences"> <ng-container *ngIf="showAppPreferences">

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

@@ -100,12 +100,12 @@
(click)="toggleOptions()" (click)="toggleOptions()"
[attr.aria-expanded]="showOptions" [attr.aria-expanded]="showOptions"
> >
{{ "options" | i18n }}
<i <i
class="bwi bwi-lg" class="bwi bwi-lg"
aria-hidden="true" aria-hidden="true"
[ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }" [ngClass]="{ 'bwi-angle-right': !showOptions, 'bwi-angle-down': showOptions }"
></i> ></i>
{{ "options" | i18n }}
</button> </button>
</h2> </h2>
</div> </div>

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

@@ -99,14 +99,12 @@
<ng-container *ngIf="type === 'password'"> <ng-container *ngIf="type === 'password'">
<div class="box"> <div class="box">
<h2 class="box-header"> <h2 class="box-header">
<button <button type="button" (click)="toggleOptions()" [attr.aria-expanded]="showOptions">
type="button" <i
(click)="toggleOptions()" class="bwi bwi-lg"
appA11yTitle="{{ 'toggleVisibility' | i18n }}" aria-hidden="true"
[attr.aria-expanded]="showOptions" [ngClass]="{ 'bwi-angle-right': !showOptions, 'bwi-angle-down': showOptions }"
> ></i>
<i class="bwi bwi-plus-square" aria-hidden="true" [hidden]="showOptions"></i>
<i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i>
{{ "options" | i18n }} {{ "options" | i18n }}
</button> </button>
</h2> </h2>
@@ -299,14 +297,12 @@
<ng-container *ngIf="type === 'username'"> <ng-container *ngIf="type === 'username'">
<div class="box"> <div class="box">
<h2 class="box-header"> <h2 class="box-header">
<button <button type="button" (click)="toggleOptions()" [attr.aria-expanded]="showOptions">
type="button" <i
(click)="toggleOptions()" class="bwi bwi-lg"
appA11yTitle="{{ 'toggleVisibility' | i18n }}" aria-hidden="true"
[attr.aria-expanded]="showOptions" [ngClass]="{ 'bwi-angle-right': !showOptions, 'bwi-angle-down': showOptions }"
> ></i>
<i class="bwi bwi-plus-square" aria-hidden="true" [hidden]="showOptions"></i>
<i class="bwi bwi-minus-square" aria-hidden="true" [hidden]="!showOptions"></i>
{{ "options" | i18n }} {{ "options" | i18n }}
</button> </button>
</h2> </h2>

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

@@ -58,7 +58,7 @@
.icon { .icon {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
margin-left: 5px; margin-right: 5px;
@include themify($themes) { @include themify($themes) {
color: themed("headingColor"); 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" class="section-header d-flex flex-row align-items-center mt-5"
(click)="toggleOptions()" (click)="toggleOptions()"
> >
<h3 class="mb-0 mr-2">{{ "options" | i18n }}</h3> <h3 class="mb-0 mr-2">
<a class="mb-1" href="#" appStopClick role="button"> <button appStopClick class="header-expandable">
<i <i
class="bwi" class="bwi"
aria-hidden="true" aria-hidden="true"
[ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }" [ngClass]="{ 'bwi-angle-right': !showOptions, 'bwi-angle-down': showOptions }"
></i> ></i>
</a> {{ "options" | i18n }}
</button>
</h3>
</div> </div>
<div id="options" [hidden]="!showOptions"> <div id="options" [hidden]="!showOptions">
<app-send-efflux-dates <app-send-efflux-dates

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

@@ -201,3 +201,17 @@ button.no-btn {
color: inherit; 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" class="bwi"
aria-hidden="true" aria-hidden="true"
[ngClass]="{ [ngClass]="{
'bwi-angle-down': !showOpenIdCustomizations, 'bwi-angle-right': !showOpenIdCustomizations,
'bwi-chevron-up': showOpenIdCustomizations 'bwi-angle-down': showOpenIdCustomizations
}" }"
></i> ></i>
</button> </button>

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

@@ -39,8 +39,8 @@ const ButtonTemplate: Story<ButtonLinkDirective> = (args: ButtonLinkDirective) =
</div> </div>
<div class="tw-block tw-p-2"> <div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType"> <button bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Button Chevron Icon Button
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</button> </button>
</div> </div>
<div class="tw-block tw-p-2"> <div class="tw-block tw-p-2">
@@ -65,8 +65,8 @@ const AnchorTemplate: Story<AnchorLinkDirective> = (args: AnchorLinkDirective) =
</div> </div>
<div class="tw-block tw-p-2"> <div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#"> <a bitLink [linkType]="linkType" href="#">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Anchor Chevron Icon Anchor
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</a> </a>
</div> </div>
<div class="tw-block tw-p-2"> <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-lock-f"></i> | bwi-lock-f | - |
| <i class="bwi bwi-minus-circle"></i> | bwi-minus-circle | remove action | | <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-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-pencil-square"></i> | bwi-pencil-square | edit action |
| <i class="bwi bwi-play"></i> | bwi-play | start or play 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 | | <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 | | 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-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-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-left"></i> | bwi-arrow-circle-left | - |
| <i class="bwi bwi-arrow-circle-right"></i> | bwi-arrow-circle-right | - | | <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-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-down"></i> | bwi-caret-down | - |
| <i class="bwi bwi-caret-right"></i> | bwi-caret-right | - | | <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-left"></i> | bwi-dbl-angle-left | - |
| <i class="bwi bwi-dbl-angle-right"></i> | bwi-dbl-angle-right | - | | <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-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-filter"></i> | bwi-filter | Product switcher |
| <i class="bwi bwi-hamburger"></i> | bwi-hamburger | navigation indicator | | <i class="bwi bwi-hamburger"></i> | bwi-hamburger | navigation indicator |
| <i class="bwi bwi-list"></i> | bwi-list | toggle list/grid view | | <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-tag"></i> | bwi-tag | labels |
| <i class="bwi bwi-thumb-tack"></i> | bwi-thumb-tack | - | | <i class="bwi bwi-thumb-tack"></i> | bwi-thumb-tack | - |
| <i class="bwi bwi-thumbs-up"></i> | bwi-thumbs-up | - | | <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"></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-circle"></i> | bwi-user-circle | - |
| <i class="bwi bwi-user-f"></i> | bwi-user-f | - | | <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 ## Platforms and Logos