From 7d3063942ea0d1e7de8b715ee7084758c7af0bf5 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 21 Dec 2022 19:48:22 +0000 Subject: [PATCH] [PS-1692] Use `aria-describedby` for all help blocks/hints (#3802) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Use aria-describedby for all help blocks/hints * Add label to send notes textfield * Use aria-describedby for all help blocks/hints / browser * Tweak help block for confirming identity * Remove aria-describedby for general login form Seems unnecessary / doesn't need an extra description * Fix compiler error * Remove unnecessary aria-describedby After testing, turns out the addition here was unnecessary, as the help block is already part of the ` - {{ "vaultTimeoutActionLockDesc" | i18n }} + {{ + "vaultTimeoutActionLockDesc" | i18n + }}
- {{ "vaultTimeoutActionLogOutDesc" | i18n }} + {{ + "vaultTimeoutActionLogOutDesc" | i18n + }}
@@ -139,6 +145,7 @@ - {{ "clearClipboardDesc" | i18n }} + {{ + "clearClipboardDesc" | i18n + }}
@@ -155,13 +164,16 @@ id="minimizeOnCopyToClipboard" type="checkbox" name="MinimizeOnCopyToClipboard" + aria-describedby="minimizeOnCopyToClipboardHelp" [(ngModel)]="minimizeOnCopyToClipboard" (change)="saveMinOnCopyToClipboard()" /> {{ "minimizeOnCopyToClipboard" | i18n }}
- {{ "minimizeOnCopyToClipboardDesc" | i18n }} + {{ + "minimizeOnCopyToClipboardDesc" | i18n + }}
@@ -170,13 +182,14 @@ id="enableFavicons" type="checkbox" name="enableFavicons" + aria-describedby="enableFaviconsHelp" [(ngModel)]="enableFavicons" (change)="saveFavicons()" /> {{ "enableFavicon" | i18n }}
- {{ "faviconDesc" | i18n }} + {{ "faviconDesc" | i18n }}
@@ -211,13 +224,14 @@ id="enableTray" type="checkbox" name="EnableTray" + aria-describedby="enableTrayHelp" [(ngModel)]="enableTray" (change)="saveTray()" /> {{ enableTrayText }} - {{ enableTrayDescText }} + {{ enableTrayDescText }}
@@ -226,13 +240,16 @@ id="enableMinToTray" type="checkbox" name="EnableMinToTray" + aria-describedby="enableMinToTrayHelp" [(ngModel)]="enableMinToTray" (change)="saveMinToTray()" /> {{ enableMinToTrayText }}
- {{ enableMinToTrayDescText }} + {{ + enableMinToTrayDescText + }}
@@ -241,13 +258,16 @@ id="enableCloseToTray" type="checkbox" name="EnableCloseToTray" + aria-describedby="enableCloseToTrayHelp" [(ngModel)]="enableCloseToTray" (change)="saveCloseToTray()" /> {{ enableCloseToTrayText }}
- {{ enableCloseToTrayDescText }} + {{ + enableCloseToTrayDescText + }}
@@ -256,13 +276,14 @@ id="startToTray" type="checkbox" name="StartToTray" + aria-describedby="startToTrayHelp" [(ngModel)]="startToTray" (change)="saveStartToTray()" /> {{ startToTrayText }}
- {{ startToTrayDescText }} + {{ startToTrayDescText }}
@@ -271,13 +292,16 @@ id="openAtLogin" type="checkbox" name="OpenAtLogin" + aria-describedby="openAtLoginHelp" [(ngModel)]="openAtLogin" (change)="saveOpenAtLogin()" /> {{ "openAtLogin" | i18n }}
- {{ "openAtLoginDesc" | i18n }} + {{ + "openAtLoginDesc" | i18n + }}
@@ -286,13 +310,16 @@ id="alwaysShowDock" type="checkbox" name="AlwaysShowDock" + aria-describedby="alwaysShowDockHelp" [(ngModel)]="alwaysShowDock" (change)="saveAlwaysShowDock()" /> {{ "alwaysShowDock" | i18n }}
- {{ "alwaysShowDockDesc" | i18n }} + {{ + "alwaysShowDockDesc" | i18n + }}
@@ -301,13 +328,16 @@ id="enableBrowserIntegration" type="checkbox" name="EnableBrowserIntegration" + aria-describedby="enableBrowserIntegrationHelp" [(ngModel)]="enableBrowserIntegration" (change)="saveBrowserIntegration()" /> {{ "enableBrowserIntegration" | i18n }}
- {{ "enableBrowserIntegrationDesc" | i18n }} + {{ + "enableBrowserIntegrationDesc" | i18n + }}
@@ -316,6 +346,7 @@ id="enableBrowserIntegrationFingerprint" type="checkbox" name="EnableBrowserIntegrationFingerprint" + aria-describedby="enableBrowserIntegrationFingerprintHelp" [(ngModel)]="enableBrowserIntegrationFingerprint" (change)="saveBrowserIntegrationFingerprint()" [disabled]="!enableBrowserIntegration" @@ -323,7 +354,7 @@ {{ "enableBrowserIntegrationFingerprint" | i18n }}
- {{ + {{ "enableBrowserIntegrationFingerprintDesc" | i18n }}
@@ -346,17 +377,29 @@
- - {{ "themeDesc" | i18n }} + {{ "themeDesc" | i18n }}
- - {{ "languageDesc" | i18n }} + {{ "languageDesc" | i18n }}
diff --git a/apps/desktop/src/app/accounts/update-temp-password.component.html b/apps/desktop/src/app/accounts/update-temp-password.component.html index 1bba7fcdc4..893257077a 100644 --- a/apps/desktop/src/app/accounts/update-temp-password.component.html +++ b/apps/desktop/src/app/accounts/update-temp-password.component.html @@ -96,10 +96,10 @@
- +
-
+
diff --git a/apps/desktop/src/app/accounts/vault-timeout-input.component.html b/apps/desktop/src/app/accounts/vault-timeout-input.component.html index 62e5a104c1..21b10d4f73 100644 --- a/apps/desktop/src/app/accounts/vault-timeout-input.component.html +++ b/apps/desktop/src/app/accounts/vault-timeout-input.component.html @@ -8,12 +8,13 @@ - {{ "vaultTimeoutDesc" | i18n }} + {{ "vaultTimeoutDesc" | i18n }}
diff --git a/apps/desktop/src/app/components/password-reprompt.component.html b/apps/desktop/src/app/components/password-reprompt.component.html index 1ec4ef702c..1ff853c278 100644 --- a/apps/desktop/src/app/components/password-reprompt.component.html +++ b/apps/desktop/src/app/components/password-reprompt.component.html @@ -14,6 +14,7 @@ id="masterPassword" type="{{ showPassword ? 'text' : 'password' }}" name="MasterPassword" + aria-describedby="masterPasswordHelp" class="monospaced" [(ngModel)]="masterPassword" required @@ -38,7 +39,7 @@
-
+
diff --git a/apps/desktop/src/app/components/user-verification.component.html b/apps/desktop/src/app/components/user-verification.component.html index 2fd78bb907..10b16a0408 100644 --- a/apps/desktop/src/app/components/user-verification.component.html +++ b/apps/desktop/src/app/components/user-verification.component.html @@ -5,6 +5,7 @@ id="masterPassword" type="password" name="MasterPasswordHash" + aria-describedby="confirmIdentityHelp" class="form-control" [formControl]="secret" required @@ -36,6 +37,7 @@ id="verificationCode" type="input" name="verificationCode" + aria-describedby="confirmIdentityHelp" class="form-control" [formControl]="secret" required diff --git a/apps/desktop/src/app/send/add-edit.component.html b/apps/desktop/src/app/send/add-edit.component.html index bae0e073da..e9e1b319ad 100644 --- a/apps/desktop/src/app/send/add-edit.component.html +++ b/apps/desktop/src/app/send/add-edit.component.html @@ -51,6 +51,7 @@ id="file" class="form-control-file" name="file" + aria-describedby="fileHelp" required [disabled]="disableSend" /> @@ -64,16 +65,17 @@ -
+ -
+
@@ -126,15 +128,16 @@ id="maxAccessCount" type="number" name="maxAccessCount" + aria-describedby="maxAccessCountHelp" [(ngModel)]="send.maxAccessCount" [readOnly]="disableSend" />
-
+ -
+ @@ -149,6 +152,7 @@
-
+

- {{ "notes" | i18n }} +

-
+
diff --git a/apps/desktop/src/app/send/efflux-dates.component.html b/apps/desktop/src/app/send/efflux-dates.component.html index 37eacad9dc..156dfae9dd 100644 --- a/apps/desktop/src/app/send/efflux-dates.component.html +++ b/apps/desktop/src/app/send/efflux-dates.component.html @@ -6,12 +6,13 @@ - {{ "deletionDateDesc" | i18n }} + {{ "deletionDateDesc" | i18n }}
@@ -19,23 +20,27 @@ id="deletionDateCustom" type="datetime-local" name="deletionDate" + aria-describedby="deletionDateCustomHelp" formControlName="defaultDeletionDateTime" required placeholder="MM/DD/YYYY HH:MM AM/PM" /> - {{ "deletionDateDesc" | i18n }} + {{ + "deletionDateDesc" | i18n + }}
- {{ "expirationDateDesc" | i18n }} + {{ "expirationDateDesc" | i18n }}
@@ -43,11 +48,14 @@ id="expirationDateCustom" type="datetime-local" name="expirationDate" + aria-describedby="expirationDateCustomHelp" formControlName="defaultExpirationDateTime" required placeholder="MM/DD/YYYY HH:MM AM/PM" /> - {{ "expirationDateDesc" | i18n }} + {{ + "expirationDateDesc" | i18n + }}
diff --git a/apps/desktop/src/app/vault/attachments.component.html b/apps/desktop/src/app/vault/attachments.component.html index 0248d78b02..4931467b34 100644 --- a/apps/desktop/src/app/vault/attachments.component.html +++ b/apps/desktop/src/app/vault/attachments.component.html @@ -45,10 +45,10 @@
- +
-
+
diff --git a/apps/desktop/src/app/vault/export.component.html b/apps/desktop/src/app/vault/export.component.html index 229156c1f6..8b3af4f1da 100644 --- a/apps/desktop/src/app/vault/export.component.html +++ b/apps/desktop/src/app/vault/export.component.html @@ -24,7 +24,7 @@ -
+
diff --git a/apps/desktop/src/app/vault/generator.component.html b/apps/desktop/src/app/vault/generator.component.html index 28d7b37afe..4b8f16a91d 100644 --- a/apps/desktop/src/app/vault/generator.component.html +++ b/apps/desktop/src/app/vault/generator.component.html @@ -341,7 +341,7 @@ /> diff --git a/apps/desktop/src/app/vault/share.component.html b/apps/desktop/src/app/vault/share.component.html index 9232d08df3..a83cbb6629 100644 --- a/apps/desktop/src/app/vault/share.component.html +++ b/apps/desktop/src/app/vault/share.component.html @@ -18,6 +18,7 @@ -
+
diff --git a/apps/desktop/src/scss/misc.scss b/apps/desktop/src/scss/misc.scss index 90988424b6..c5aabb5b07 100644 --- a/apps/desktop/src/scss/misc.scss +++ b/apps/desktop/src/scss/misc.scss @@ -361,31 +361,31 @@ form, margin-left: -18px; } } +} - .help-block { - margin-top: 3px; - display: block; +.help-block { + margin-top: 3px; + display: block; + + @include themify($themes) { + color: themed("mutedColor"); + } + + a { + @extend .btn; + @extend .link; + + padding: 0; + font-size: inherit; + font-weight: bold; @include themify($themes) { color: themed("mutedColor"); } - a { - @extend .btn; - @extend .link; - - padding: 0; - font-size: inherit; - font-weight: bold; - + &:hover { @include themify($themes) { - color: themed("mutedColor"); - } - - &:hover { - @include themify($themes) { - color: darken(themed("mutedColor"), 6%); - } + color: darken(themed("mutedColor"), 6%); } } }