From 9df22d360182958779f7c2df12e3887835264725 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Thu, 28 Apr 2022 17:24:13 +0100
Subject: [PATCH 1/2] [PS-329] A11y: make view, copy, etc controls for
ciphers/items keyboard focusable/operable, add screen reader improvements
(#2507)
---
.../components/action-buttons.component.html | 47 ++++++++++++-------
.../components/cipher-row.component.html | 22 +++++----
src/popup/scss/box.scss | 2 +
3 files changed, 46 insertions(+), 25 deletions(-)
diff --git a/src/popup/components/action-buttons.component.html b/src/popup/components/action-buttons.component.html
index beea50c29f..f63c1f1ac3 100644
--- a/src/popup/components/action-buttons.component.html
+++ b/src/popup/components/action-buttons.component.html
@@ -1,4 +1,5 @@
-
-
+
-
-
-
+
-
+
-
+
+
-
-
-
+
+
-
-
+
diff --git a/src/popup/components/cipher-row.component.html b/src/popup/components/cipher-row.component.html
index fbf9f1dab4..fc78fd9ccf 100644
--- a/src/popup/components/cipher-row.component.html
+++ b/src/popup/components/cipher-row.component.html
@@ -1,13 +1,17 @@
-
-
+
diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss
index da7a3ab789..0b691b6044 100644
--- a/src/popup/scss/box.scss
+++ b/src/popup/scss/box.scss
@@ -136,6 +136,7 @@
.row-main {
display: flex;
min-width: 0;
+ align-items: normal;
.row-main-content {
min-width: 0;
@@ -283,6 +284,7 @@
.text,
.detail {
display: block;
+ text-align: left;
@include themify($themes) {
color: themed("textColor");
From 7b12868c709bae86a128c2ebbb61cc2b0567f0aa Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Fri, 29 Apr 2022 01:06:33 +0100
Subject: [PATCH 2/2] [PS-497] Change `` to ``, make it
explicitly non-focusable (#2245)
* Make element explicitly non-focusable
Some browsers (Firefox, upcoming versions of Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=585413) make containers with `overflow: auto` / `overflow: scroll` (and the `-x` / `-y` variants) keyboard-focusable. This leads to a very awkward experience for assistive technology users navigating through the extension window, as for every view, the entire `` container receives focus (and screen readers try to announce all its content in one go) before you reach the actual first control. To counteract this behaviour, this adds an explicit `tabindex="-1"` to these elements.
* Change `` to ``
More semantically accurate. See https://github.com/bitwarden/browser/pull/2245#issuecomment-1104553312
* Update scss to target `main` instead of `content`
* Change the previously existing `` to generic ``, tweak styles accordingly
Can't have two separate `` elements, especially not nested ones. The original `` was really just a handy wrapper for the component, but semantically should be neutral
---
src/popup/accounts/environment.component.html | 4 ++--
src/popup/accounts/hint.component.html | 4 ++--
src/popup/accounts/lock.component.html | 4 ++--
src/popup/accounts/login.component.html | 4 ++--
src/popup/accounts/register.component.html | 4 ++--
.../accounts/remove-password.component.html | 4 ++--
src/popup/accounts/set-password.component.html | 4 ++--
.../accounts/two-factor-options.component.html | 4 ++--
src/popup/accounts/two-factor.component.html | 4 ++--
.../update-temp-password.component.html | 4 ++--
src/popup/app.component.ts | 4 ++--
src/popup/generator/generator.component.html | 4 ++--
.../password-generator-history.component.html | 4 ++--
src/popup/scss/base.scss | 18 +++++++++---------
src/popup/scss/pages.scss | 2 +-
src/popup/send/send-add-edit.component.html | 4 ++--
src/popup/send/send-groupings.component.html | 4 ++--
src/popup/send/send-type.component.html | 4 ++--
.../settings/excluded-domains.component.html | 4 ++--
src/popup/settings/export.component.html | 4 ++--
.../settings/folder-add-edit.component.html | 4 ++--
src/popup/settings/folders.component.html | 4 ++--
src/popup/settings/options.component.html | 4 ++--
src/popup/settings/premium.component.html | 4 ++--
src/popup/settings/settings.component.html | 4 ++--
src/popup/settings/sync.component.html | 4 ++--
src/popup/vault/add-edit.component.html | 4 ++--
src/popup/vault/attachments.component.html | 4 ++--
src/popup/vault/ciphers.component.html | 4 ++--
src/popup/vault/collections.component.html | 4 ++--
src/popup/vault/current-tab.component.html | 4 ++--
src/popup/vault/groupings.component.html | 4 ++--
.../vault/password-history.component.html | 4 ++--
src/popup/vault/share.component.html | 4 ++--
src/popup/vault/view.component.html | 4 ++--
35 files changed, 76 insertions(+), 76 deletions(-)
diff --git a/src/popup/accounts/environment.component.html b/src/popup/accounts/environment.component.html
index 00637f7859..626c5b7b3e 100644
--- a/src/popup/accounts/environment.component.html
+++ b/src/popup/accounts/environment.component.html
@@ -13,7 +13,7 @@
-
+
-
+
diff --git a/src/popup/accounts/hint.component.html b/src/popup/accounts/hint.component.html
index f228e7018f..b4fbfdc05a 100644
--- a/src/popup/accounts/hint.component.html
+++ b/src/popup/accounts/hint.component.html
@@ -13,7 +13,7 @@
-
+
@@ -34,5 +34,5 @@
{{ "enterEmailToGetHint" | i18n }}
-
+
diff --git a/src/popup/accounts/lock.component.html b/src/popup/accounts/lock.component.html
index efc11dcf41..04e6eb1e10 100644
--- a/src/popup/accounts/lock.component.html
+++ b/src/popup/accounts/lock.component.html
@@ -8,7 +8,7 @@
{{ "unlock" | i18n }}
-
+
@@ -81,5 +81,5 @@
{{ "awaitDesktop" | i18n }}
-
+
diff --git a/src/popup/accounts/login.component.html b/src/popup/accounts/login.component.html
index df5c1e836a..d82d214fb2 100644
--- a/src/popup/accounts/login.component.html
+++ b/src/popup/accounts/login.component.html
@@ -13,7 +13,7 @@
-
+
@@ -68,5 +68,5 @@
{{ "getMasterPasswordHint" | i18n }}
-
+
diff --git a/src/popup/accounts/register.component.html b/src/popup/accounts/register.component.html
index 99f6137c51..fc9c4e7990 100644
--- a/src/popup/accounts/register.component.html
+++ b/src/popup/accounts/register.component.html
@@ -13,7 +13,7 @@
-
+
-
+
diff --git a/src/popup/accounts/remove-password.component.html b/src/popup/accounts/remove-password.component.html
index dee21d74ca..793bcff3e0 100644
--- a/src/popup/accounts/remove-password.component.html
+++ b/src/popup/accounts/remove-password.component.html
@@ -6,7 +6,7 @@
-
+
-
+
diff --git a/src/popup/accounts/set-password.component.html b/src/popup/accounts/set-password.component.html
index 621921e5da..b8e89b7693 100644
--- a/src/popup/accounts/set-password.component.html
+++ b/src/popup/accounts/set-password.component.html
@@ -13,7 +13,7 @@
-
+
@@ -144,5 +144,5 @@
-
+
diff --git a/src/popup/accounts/two-factor-options.component.html b/src/popup/accounts/two-factor-options.component.html
index 139be18ac8..e70d6a373c 100644
--- a/src/popup/accounts/two-factor-options.component.html
+++ b/src/popup/accounts/two-factor-options.component.html
@@ -7,7 +7,7 @@
-
+
-
+
diff --git a/src/popup/accounts/two-factor.component.html b/src/popup/accounts/two-factor.component.html
index e94f94751d..84ad0cc8bb 100644
--- a/src/popup/accounts/two-factor.component.html
+++ b/src/popup/accounts/two-factor.component.html
@@ -23,7 +23,7 @@
-
+
-
+
diff --git a/src/popup/accounts/update-temp-password.component.html b/src/popup/accounts/update-temp-password.component.html
index 40d133df8d..f1836132f7 100644
--- a/src/popup/accounts/update-temp-password.component.html
+++ b/src/popup/accounts/update-temp-password.component.html
@@ -13,7 +13,7 @@
-
+
{{ "updateMasterPasswordWarning" | i18n }}
@@ -126,5 +126,5 @@
{{ "masterPassHintDesc" | i18n }}
-
+
diff --git a/src/popup/app.component.ts b/src/popup/app.component.ts
index 19ee5bf0bd..62872f35b7 100644
--- a/src/popup/app.component.ts
+++ b/src/popup/app.component.ts
@@ -19,9 +19,9 @@ import { routerTransition } from "./app-routing.animations";
selector: "app-root",
styles: [],
animations: [routerTransition],
- template: `
+ template: `
- `,
+
`,
})
export class AppComponent implements OnInit {
private lastActivity: number = null;
diff --git a/src/popup/generator/generator.component.html b/src/popup/generator/generator.component.html
index f67039fea6..02650910a2 100644
--- a/src/popup/generator/generator.component.html
+++ b/src/popup/generator/generator.component.html
@@ -14,7 +14,7 @@
-
+
{{ "passwordGeneratorPolicyInEffect" | i18n }}
@@ -453,4 +453,4 @@
-
+
diff --git a/src/popup/generator/password-generator-history.component.html b/src/popup/generator/password-generator-history.component.html
index e24d7d2053..62e5abd28e 100644
--- a/src/popup/generator/password-generator-history.component.html
+++ b/src/popup/generator/password-generator-history.component.html
@@ -14,7 +14,7 @@
-
+
@@ -45,4 +45,4 @@
{{ "noPasswordsInList" | i18n }}
-
+
diff --git a/src/popup/scss/base.scss b/src/popup/scss/base.scss
index c19cb129a2..c3a5edafde 100644
--- a/src/popup/scss/base.scss
+++ b/src/popup/scss/base.scss
@@ -107,17 +107,17 @@ textarea {
resize: vertical;
}
-main {
+app-root > div {
height: 100%;
}
-content::-webkit-scrollbar,
+main::-webkit-scrollbar,
cdk-virtual-scroll-viewport::-webkit-scrollbar {
width: 10px;
height: 10px;
}
-content::-webkit-scrollbar-track {
+main::-webkit-scrollbar-track {
background-color: transparent;
}
@@ -127,7 +127,7 @@ cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
}
}
-content::-webkit-scrollbar-thumb,
+main::-webkit-scrollbar-thumb,
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb {
border-radius: 10px;
margin-right: 1px;
@@ -373,7 +373,7 @@ app-root {
padding: 0 calc((100% - 500px) / 2);
}
- app-login content {
+ app-login main {
padding: 0 calc((100% - 500px) / 2);
}
@@ -381,7 +381,7 @@ app-root {
padding: 0 calc((100% - 500px) / 2);
}
- app-two-factor content {
+ app-two-factor main {
padding: 0 calc((100% - 500px) / 2);
}
@@ -389,12 +389,12 @@ app-root {
padding: 0 calc((100% - 500px) / 2);
}
- app-lock content {
+ app-lock main {
padding: 0 calc((100% - 500px) / 2);
}
}
-content {
+main {
position: absolute;
top: 44px;
bottom: 0;
@@ -423,7 +423,7 @@ content {
}
.tab-page {
- content {
+ main {
bottom: 55px;
}
}
diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss
index f3efea4c30..9e0dd81a53 100644
--- a/src/popup/scss/pages.scss
+++ b/src/popup/scss/pages.scss
@@ -1,7 +1,7 @@
@import "variables.scss";
app-sync {
- content {
+ main {
.btn {
margin-bottom: 10px;
}
diff --git a/src/popup/send/send-add-edit.component.html b/src/popup/send/send-add-edit.component.html
index 3754ed18b9..3fea4094d6 100644
--- a/src/popup/send/send-add-edit.component.html
+++ b/src/popup/send/send-add-edit.component.html
@@ -13,7 +13,7 @@
-
+
{{ "sendDisabledWarning" | i18n }}
@@ -315,5 +315,5 @@
-
+
diff --git a/src/popup/send/send-groupings.component.html b/src/popup/send/send-groupings.component.html
index 33d9fa1fbd..72c79e7cb7 100644
--- a/src/popup/send/send-groupings.component.html
+++ b/src/popup/send/send-groupings.component.html
@@ -27,7 +27,7 @@
-
+
{{ "sendDisabledWarning" | i18n }}
@@ -119,4 +119,4 @@
-
+
diff --git a/src/popup/send/send-type.component.html b/src/popup/send/send-type.component.html
index 7fc3932e46..1e14dc151b 100644
--- a/src/popup/send/send-type.component.html
+++ b/src/popup/send/send-type.component.html
@@ -30,7 +30,7 @@
-
+
{{ "sendDisabledWarning" | i18n }}
@@ -66,4 +66,4 @@
-
+
diff --git a/src/popup/settings/excluded-domains.component.html b/src/popup/settings/excluded-domains.component.html
index 4a488a81cb..8353be2e85 100644
--- a/src/popup/settings/excluded-domains.component.html
+++ b/src/popup/settings/excluded-domains.component.html
@@ -13,7 +13,7 @@
{{ "save" | i18n }}
-
+
@@ -84,5 +84,5 @@
{{ "excludedDomainsDesc" | i18n }}
-
+
diff --git a/src/popup/settings/export.component.html b/src/popup/settings/export.component.html
index cdd7510c57..ee74c4f7d9 100644
--- a/src/popup/settings/export.component.html
+++ b/src/popup/settings/export.component.html
@@ -15,7 +15,7 @@
-
+
{{ "personalVaultExportPolicyInEffect" | i18n }}
@@ -36,5 +36,5 @@
{{ "confirmIdentity" | i18n }}
-
+
diff --git a/src/popup/settings/folder-add-edit.component.html b/src/popup/settings/folder-add-edit.component.html
index 4139244003..3999f6fb88 100644
--- a/src/popup/settings/folder-add-edit.component.html
+++ b/src/popup/settings/folder-add-edit.component.html
@@ -13,7 +13,7 @@
-
+
-
+
diff --git a/src/popup/settings/folders.component.html b/src/popup/settings/folders.component.html
index e9c1394b9e..47b6f78a1d 100644
--- a/src/popup/settings/folders.component.html
+++ b/src/popup/settings/folders.component.html
@@ -19,7 +19,7 @@
-
+
-
+
diff --git a/src/popup/settings/options.component.html b/src/popup/settings/options.component.html
index ccdc397785..4281c97e52 100644
--- a/src/popup/settings/options.component.html
+++ b/src/popup/settings/options.component.html
@@ -10,7 +10,7 @@
-
+
-
+
diff --git a/src/popup/settings/premium.component.html b/src/popup/settings/premium.component.html
index 915f63f7fb..a12fd370d2 100644
--- a/src/popup/settings/premium.component.html
+++ b/src/popup/settings/premium.component.html
@@ -10,7 +10,7 @@
-
+
{{ "premiumNotCurrentMember" | i18n }}
@@ -70,4 +70,4 @@
-
+
diff --git a/src/popup/settings/settings.component.html b/src/popup/settings/settings.component.html
index 5b3aefdea8..3f441835c5 100644
--- a/src/popup/settings/settings.component.html
+++ b/src/popup/settings/settings.component.html
@@ -7,7 +7,7 @@
-
+
-
+
diff --git a/src/popup/settings/sync.component.html b/src/popup/settings/sync.component.html
index 7e989decd8..74f1c0ea87 100644
--- a/src/popup/settings/sync.component.html
+++ b/src/popup/settings/sync.component.html
@@ -10,7 +10,7 @@
-
+
{{ "lastSync" | i18n }} {{ lastSync }}
-
+
diff --git a/src/popup/vault/add-edit.component.html b/src/popup/vault/add-edit.component.html
index 982d839b24..c856083f4d 100644
--- a/src/popup/vault/add-edit.component.html
+++ b/src/popup/vault/add-edit.component.html
@@ -13,7 +13,7 @@
-
+
{{ "personalOwnershipPolicyInEffect" | i18n }}
@@ -656,5 +656,5 @@
-
+
diff --git a/src/popup/vault/attachments.component.html b/src/popup/vault/attachments.component.html
index a662e407ed..4b687dc10b 100644
--- a/src/popup/vault/attachments.component.html
+++ b/src/popup/vault/attachments.component.html
@@ -19,7 +19,7 @@
-
+
@@ -69,5 +69,5 @@
{{ "maxFileSize" | i18n }}
-
+
diff --git a/src/popup/vault/ciphers.component.html b/src/popup/vault/ciphers.component.html
index 1608c8f028..729a368c54 100644
--- a/src/popup/vault/ciphers.component.html
+++ b/src/popup/vault/ciphers.component.html
@@ -24,7 +24,7 @@
-
+
-
+
diff --git a/src/popup/vault/collections.component.html b/src/popup/vault/collections.component.html
index 6514c38230..35d7b08261 100644
--- a/src/popup/vault/collections.component.html
+++ b/src/popup/vault/collections.component.html
@@ -16,7 +16,7 @@
-
+
-
+
diff --git a/src/popup/vault/current-tab.component.html b/src/popup/vault/current-tab.component.html
index b4f9b9e05c..f0d2277b22 100644
--- a/src/popup/vault/current-tab.component.html
+++ b/src/popup/vault/current-tab.component.html
@@ -30,7 +30,7 @@
-
+
@@ -91,4 +91,4 @@
-
+
diff --git a/src/popup/vault/groupings.component.html b/src/popup/vault/groupings.component.html
index afaa79b551..bd352e4a60 100644
--- a/src/popup/vault/groupings.component.html
+++ b/src/popup/vault/groupings.component.html
@@ -22,7 +22,7 @@
-
+
@@ -227,4 +227,4 @@
-
+
diff --git a/src/popup/vault/password-history.component.html b/src/popup/vault/password-history.component.html
index 350cc1e6b2..009b7089ba 100644
--- a/src/popup/vault/password-history.component.html
+++ b/src/popup/vault/password-history.component.html
@@ -7,7 +7,7 @@
-
+
@@ -36,4 +36,4 @@
{{ "noPasswordsInList" | i18n }}
-
+
diff --git a/src/popup/vault/share.component.html b/src/popup/vault/share.component.html
index 40974631de..7e6d6e38af 100644
--- a/src/popup/vault/share.component.html
+++ b/src/popup/vault/share.component.html
@@ -18,7 +18,7 @@
-
+
-
+
diff --git a/src/popup/vault/view.component.html b/src/popup/vault/view.component.html
index 2a01296391..1b72f47891 100644
--- a/src/popup/vault/view.component.html
+++ b/src/popup/vault/view.component.html
@@ -11,7 +11,7 @@
-
+
-
+