From 002c3f6368a067cf3ab03f8297112f625c5b5bfa Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 15 Dec 2022 14:13:09 +0000 Subject: [PATCH] [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 `

` 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/browser/src/popup/scss/box.scss | 2 +- .../popup/send/send-add-edit.component.html | 4 +-- .../src/popup/settings/options.component.html | 12 ++++---- .../app/accounts/environment.component.html | 7 +++-- .../src/app/accounts/settings.component.html | 18 ++++++------ .../src/app/send/add-edit.component.html | 4 +-- .../src/app/vault/generator.component.html | 28 ++++++++----------- apps/desktop/src/scss/box.scss | 2 +- apps/web/src/app/send/add-edit.component.html | 18 ++++++------ apps/web/src/scss/buttons.scss | 14 ++++++++++ .../organizations/manage/sso.component.html | 4 +-- libs/components/src/link/link.stories.ts | 4 +-- libs/components/src/stories/icons.stories.mdx | 14 +++++----- 13 files changed, 73 insertions(+), 58 deletions(-) diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss index 29e54ed9f3..ffb15ba026 100644 --- a/apps/browser/src/popup/scss/box.scss +++ b/apps/browser/src/popup/scss/box.scss @@ -43,7 +43,7 @@ .icon { display: flex; align-items: center; - margin-left: 5px; + margin-right: 5px; @include themify($themes) { color: themed("headingColor"); diff --git a/apps/browser/src/popup/send/send-add-edit.component.html b/apps/browser/src/popup/send/send-add-edit.component.html index 19e5c53512..44002dddaa 100644 --- a/apps/browser/src/popup/send/send-add-edit.component.html +++ b/apps/browser/src/popup/send/send-add-edit.component.html @@ -154,9 +154,9 @@ (click)="showOptions = !showOptions" [attr.aria-expanded]="showOptions" > + + {{ "options" | i18n }} - - diff --git a/apps/browser/src/popup/settings/options.component.html b/apps/browser/src/popup/settings/options.component.html index 8f9874faa7..afa77407f5 100644 --- a/apps/browser/src/popup/settings/options.component.html +++ b/apps/browser/src/popup/settings/options.component.html @@ -19,9 +19,9 @@ (click)="showGeneral = !showGeneral" [attr.aria-expanded]="showGeneral" > + + General - - @@ -127,9 +127,9 @@ (click)="showDisplay = !showDisplay" [attr.aria-expanded]="showDisplay" > + + Display - - @@ -210,9 +210,9 @@ (click)="showAutofill = !showAutofill" [attr.aria-expanded]="showAutofill" > + + Autofill - - diff --git a/apps/desktop/src/app/accounts/environment.component.html b/apps/desktop/src/app/accounts/environment.component.html index 859554b92b..1788e52e31 100644 --- a/apps/desktop/src/app/accounts/environment.component.html +++ b/apps/desktop/src/app/accounts/environment.component.html @@ -26,8 +26,11 @@

diff --git a/apps/desktop/src/app/accounts/settings.component.html b/apps/desktop/src/app/accounts/settings.component.html index 06cbb7fe8c..2e409f6fca 100644 --- a/apps/desktop/src/app/accounts/settings.component.html +++ b/apps/desktop/src/app/accounts/settings.component.html @@ -16,17 +16,17 @@ [attr.aria-expanded]="showSecurity" appAutofocus > - {{ "security" | i18n }} + {{ "security" | i18n }} @@ -120,17 +120,17 @@ (click)="showAccountPreferences = !showAccountPreferences" [attr.aria-expanded]="showAccountPreferences" > - {{ "accountPreferences" | i18n }} + {{ "accountPreferences" | i18n }} @@ -190,17 +190,17 @@ (click)="showAppPreferences = !showAppPreferences" [attr.aria-expanded]="showAppPreferences" > - {{ "appPreferences" | i18n }} + {{ "appPreferences" | i18n }} diff --git a/apps/desktop/src/app/send/add-edit.component.html b/apps/desktop/src/app/send/add-edit.component.html index 47c0d4ae00..bae0e073da 100644 --- a/apps/desktop/src/app/send/add-edit.component.html +++ b/apps/desktop/src/app/send/add-edit.component.html @@ -100,12 +100,12 @@ (click)="toggleOptions()" [attr.aria-expanded]="showOptions" > - {{ "options" | i18n }} + {{ "options" | i18n }}
diff --git a/apps/desktop/src/app/vault/generator.component.html b/apps/desktop/src/app/vault/generator.component.html index 6acf7a331b..28d7b37afe 100644 --- a/apps/desktop/src/app/vault/generator.component.html +++ b/apps/desktop/src/app/vault/generator.component.html @@ -99,14 +99,12 @@

-

@@ -299,14 +297,12 @@

-

diff --git a/apps/desktop/src/scss/box.scss b/apps/desktop/src/scss/box.scss index 64cbf370ab..54acf2e7d8 100644 --- a/apps/desktop/src/scss/box.scss +++ b/apps/desktop/src/scss/box.scss @@ -58,7 +58,7 @@ .icon { display: flex; align-items: flex-end; - margin-left: 5px; + margin-right: 5px; @include themify($themes) { color: themed("headingColor"); diff --git a/apps/web/src/app/send/add-edit.component.html b/apps/web/src/app/send/add-edit.component.html index dd9f61c6c5..a112c7be15 100644 --- a/apps/web/src/app/send/add-edit.component.html +++ b/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()" > -

{{ "options" | i18n }}

- - - +

+ +

@@ -65,8 +65,8 @@ const AnchorTemplate: Story = (args: AnchorLinkDirective) =
+ Chevron Icon Anchor -
diff --git a/libs/components/src/stories/icons.stories.mdx b/libs/components/src/stories/icons.stories.mdx index 3b401695ee..da8896a904 100644 --- a/libs/components/src/stories/icons.stories.mdx +++ b/libs/components/src/stories/icons.stories.mdx @@ -61,7 +61,7 @@ Avoid using icons to convey information unless paired with meaningful, clear tex | | bwi-lock-f | - | | | bwi-minus-circle | remove action | | | bwi-minus-square | unselect all action | -| | bwi-paste | paste from clipbaord action | +| | bwi-paste | paste from clipboard action | | | bwi-pencil-square | edit action | | | bwi-play | start or play action | | | 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 | | ------------------------------------------ | ---------------------- | ------------------------------------------------------- | -| | bwi-angle-down | drop down or expandable options | +| | bwi-angle-down | closed dropdown or open expandable section | | | bwi-angle-left | - | -| | bwi-angle-right | collapsed section that can be expanded | +| | bwi-angle-right | closed expandable section | | | bwi-arrow-circle-down | table sort order | | | bwi-arrow-circle-left | - | | | bwi-arrow-circle-right | - | | | bwi-arrow-circle-up | table sort order | | | bwi-caret-down | - | | | bwi-caret-right | - | -| | bwi-chevron-up | - | +| | bwi-chevron-up | open dropdown | | | bwi-dbl-angle-left | - | | | bwi-dbl-angle-right | - | | | bwi-ellipsis-h | more options menu horizontal; used in mobile list items | -| | bwi-ellipsis-v | more optioins menu vertical; used primarily in tables | +| | bwi-ellipsis-v | more options menu vertical; used primarily in tables | | | bwi-filter | Product switcher | | | bwi-hamburger | navigation indicator | | | bwi-list | toggle list/grid view | @@ -159,11 +159,11 @@ Avoid using icons to convey information unless paired with meaningful, clear tex | | bwi-tag | labels | | | bwi-thumb-tack | - | | | bwi-thumbs-up | - | -| | bwi-universal-access | use for accessiblity related actions | +| | bwi-universal-access | use for accessibility related actions | | | bwi-user | relates to current user or organization member | | | bwi-user-circle | - | | | bwi-user-f | - | -| | bwi-wrench | tools or aditional configuration options | +| | bwi-wrench | tools or additional configuration options | ## Platforms and Logos