vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PS-1692] Use `aria-describedby` for all help blocks/hints (#3802) 

* 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 `<label>`

* Fix aria-describedby reference for user verification component

* Remove redundant aria-describedby and generated id for radio buttons

* Fix aria-describedby for send editing in Safari

> When editing a send, the text below the deletion date is not recognized by the screen reader reliably (send-add-edit.component.html / efflux-dates.component.html). There might be an issues depending on which browser is used (deletionDateHelp vs. deletionDateCustomHelp

* Make custom environment container role="group", give it a label and description

> In the Environment Url Settings, the text “For advanced users…….“ is not not recognized by the screen reader. Not sure how to best solve this one, as it's below all individual url inputs. Ideally it gets announced with the baseUrl part or when focusing Custom Environment)
This commit is contained in:
Patrick H. Lauke 2022-12-21 19:48:22 +00:00 committed by GitHub
parent 9ed195c9f9
commit 7d3063942e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 269 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/browser/src/popup/accounts/environment.component.html
View File

@ -36,13 +36,14 @@
id="baseUrl"
type="text"
name="BaseUrl"
aria-describedby="baseUrlHelp"
[(ngModel)]="baseUrl"
placeholder="ex. https://bitwarden.company.com"
appInputVerbatim
/>
</div>
</div>
<div class="box-footer">
<div id="baseUrlHelp" class="box-footer">
{{ "selfHostedEnvironmentFooter" | i18n }}
</div>
</div>
@ -50,7 +51,13 @@
<h2 class="box-header">
{{ "customEnvironment" | i18n }}
</h2>
<div class="box-content" [hidden]="!showCustom">
<div
role="group"
attr.aria-label="{{ 'customEnvironment' | i18n }}"
aria-describedby="customEnvironmentHelp"
class="box-content"
[hidden]="!showCustom"
>
<div class="box-content-row" appBoxRow>
<label for="webVaultUrl">{{ "webVaultUrl" | i18n }}</label>
<input
@ -107,7 +114,7 @@
/>
</div>
</div>
<div class="box-footer" [hidden]="!showCustom">
<div id="customEnvironmentHelp" class="box-footer" [hidden]="!showCustom">
{{ "customEnvironmentFooter" | i18n }}
</div>
</div>

3
apps/browser/src/popup/accounts/hint.component.html
View File

@ -24,6 +24,7 @@
id="email"
type="text"
name="Email"
aria-describedby="emailHelp"
[(ngModel)]="email"
required
appAutofocus
@ -32,7 +33,7 @@
/>
</div>
</div>
<div class="box-footer">
<div id="emailHelp" class="box-footer">
{{ "enterEmailToGetHint" | i18n }}
</div>
</div>

3
apps/browser/src/popup/accounts/lock.component.html
View File

@ -30,6 +30,7 @@
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
aria-describedby="masterPasswordHelp"
class="monospaced"
[(ngModel)]="masterPassword"
required
@ -54,7 +55,7 @@
</div>
</div>
</div>
<div class="box-footer">
<div id="masterPasswordHelp" class="box-footer">
<p>{{ "yourVaultIsLocked" | i18n }}</p>
{{ "loggedInAsOn" | i18n: email:webVaultHostname }}
</div>

7
apps/browser/src/popup/accounts/register.component.html
View File

@ -32,6 +32,7 @@
<input
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
aria-describedby="masterPasswordHelp"
class="monospaced"
formControlName="masterPassword"
appInputVerbatim
@ -64,7 +65,7 @@
</app-password-strength>
</div>
</div>
<div class="box-footer">
<div id="masterPasswordHelp" class="box-footer">
{{ "masterPassDesc" | i18n }}
</div>
</div>
@ -100,10 +101,10 @@
</div>
<div class="box-content-row" appBoxRow>
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" formControlName="hint" />
<input id="hint" type="text" aria-describedby="hintHelp" formControlName="hint" />
</div>
</div>
<div class="box-footer">
<div id="hintHelp" class="box-footer">
{{ "masterPassHintDesc" | i18n }}
</div>
</div>

13
apps/browser/src/popup/accounts/set-password.component.html
View File

@ -49,6 +49,7 @@
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
aria-describedby="masterPasswordHelp"
class="monospaced"
[(ngModel)]="masterPassword"
required
@ -82,7 +83,7 @@
</app-password-strength>
</div>
</div>
<div class="box-footer">
<div id="masterPasswordHelp" class="box-footer">
{{ "masterPassDesc" | i18n }}
</div>
</div>
@ -127,10 +128,16 @@
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint" />
<input
id="hint"
type="text"
name="Hint"
aria-describedby="hintHelp"
[(ngModel)]="hint"
/>
</div>
</div>
<div class="box-footer">
<div id="hintHelp" class="box-footer">
{{ "masterPassHintDesc" | i18n }}
</div>
</div>

4
apps/browser/src/popup/accounts/update-temp-password.component.html
View File

@ -109,10 +109,10 @@
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint" />
<input id="hint" type="text" name="Hint" aria-describedby="hintHelp" [(ngModel)]="hint" />
</div>
</div>
<div class="box-footer">
<div id="hintHelp" class="box-footer">
{{ "masterPassHintDesc" | i18n }}
</div>
</div>

3
apps/browser/src/popup/components/password-reprompt.component.html
View File

@ -12,6 +12,7 @@
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
aria-describedby="masterPasswordHelp"
class="monospaced"
[(ngModel)]="masterPassword"
required
@ -36,7 +37,7 @@
</div>
</div>
</div>
<div class="box-footer">
<div id="masterPasswordHelp" class="box-footer">
{{ "passwordConfirmationDesc" | i18n }}
</div>
</div>

1
apps/browser/src/popup/components/user-verification.component.html
View File

@ -5,6 +5,7 @@
id="masterPassword"
type="password"
name="MasterPasswordHash"
aria-describedby="confirmIdentityHelp"
class="form-control"
[formControl]="secret"
required

4
apps/browser/src/popup/generator/generator.component.html
View File

@ -312,7 +312,9 @@
/>
<label for="type_{{ o.value }}">
{{ o.name }}
<div class="small text-muted" *ngIf="o.desc">{{ o.desc }}</div>
<div class="small text-muted" *ngIf="o.desc">
{{ o.desc }}
</div>
</label>
</div>
</div>

12
apps/browser/src/popup/send/efflux-dates.component.html
View File

@ -7,6 +7,7 @@
<select
id="deletionDate"
name="DeletionDateSelect"
aria-describedby="deletionDateHelp"
formControlName="selectedDeletionDatePreset"
required
>
@ -22,7 +23,7 @@
<ng-container *ngTemplateOutlet="deletionDateCustom"></ng-container>
</div>
</div>
<div class="box-footer">
<div id="deletionDateHelp" class="box-footer">
{{ "deletionDateDesc" | i18n }}
<ng-container
*ngIf="
@ -45,6 +46,7 @@
<select
id="expirationDate"
name="ExpirationDateSelect"
aria-describedby="expirationDateHelp"
formControlName="selectedExpirationDatePreset"
required
>
@ -67,7 +69,7 @@
<ng-container *ngTemplateOutlet="expirationDateCustom"></ng-container>
</div>
</div>
<div class="box-footer">
<div id="expirationDateHelp" class="box-footer">
{{ "expirationDateDesc" | i18n }}
<ng-container
*ngIf="
@ -90,6 +92,7 @@
id="deletionDateCustomFallback"
type="date"
name="DeletionDateFallback"
aria-describedby="deletionDateHelp"
formControlName="fallbackDeletionDate"
required
placeholder="MM/DD/YYYY"
@ -113,6 +116,7 @@
id="deletionDateCustomFallback"
type="date"
name="DeletionDateFallback"
aria-describedby="deletionDateHelp"
formControlName="fallbackDeletionDate"
required
placeholder="MM/DD/YYYY"
@ -135,6 +139,7 @@
id="deletionDateCustom"
type="datetime-local"
name="DeletionDate"
aria-describedby="deletionDateHelp"
formControlName="defaultDeletionDateTime"
required
placeholder="MM/DD/YYYY HH:MM AM/PM"
@ -150,6 +155,7 @@
id="expirationDateCustomFallback"
type="date"
name="ExpirationDateFallback"
aria-describedby="expirationDateHelp"
formControlName="fallbackExpirationDate"
[required]="!editMode"
placeholder="MM/DD/YYYY"
@ -173,6 +179,7 @@
id="expirationDateCustomFallback"
type="date"
name="ExpirationDateFallback"
aria-describedby="expirationDateHelp"
formControlName="fallbackExpirationDate"
[required]="!editMode"
placeholder="MM/DD/YYYY"
@ -198,6 +205,7 @@
id="expirationDateCustom"
type="datetime-local"
name="ExpirationDate"
aria-describedby="expirationDateHelp"
formControlName="defaultExpirationDateTime"
required
placeholder="MM/DD/YYYY HH:MM AM/PM"

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

@ -43,12 +43,13 @@
id="name"
type="text"
name="Name"
aria-describedby="nameHelp"
[(ngModel)]="send.name"
[readonly]="disableSend"
/>
</div>
</div>
<div class="box-footer">
<div id="nameHelp" class="box-footer">
{{ "sendNameDesc" | i18n }}
</div>
</div>
@ -89,10 +90,17 @@
</div>
<div class="box-content-row" *ngIf="showFileSelector">
<label for="file">{{ "file" | i18n }}</label>
<input type="file" id="file" name="file" required [readonly]="disableSend" />
<input
type="file"
id="file"
name="file"
aria-describedby="fileHelp"
required
[readonly]="disableSend"
/>
</div>
</div>
<div class="box-footer" *ngIf="showFileSelector">
<div id="fileHelp" class="box-footer" *ngIf="showFileSelector">
{{ "sendFileDesc" | i18n }} {{ "maxFileSize" | i18n }}
</div>
</div>
@ -104,13 +112,14 @@
<textarea
id="text"
name="Text"
aria-describedby="textHelp"
rows="6"
[(ngModel)]="send.text.text"
[readonly]="disableSend"
></textarea>
</div>
</div>
<div class="box-footer">
<div id="textHelp" class="box-footer">
{{ "sendTextDesc" | i18n }}
</div>
<div class="box-content">
@ -180,12 +189,13 @@
min="1"
type="number"
name="MaximumAccessCount"
aria-describedby="maximumAccessCountHelp"
[(ngModel)]="send.maxAccessCount"
[readonly]="disableSend"
/>
</div>
</div>
<div class="box-footer">
<div id="maximumAccessCountHelp" class="box-footer">
{{ "maximumAccessCountDesc" | i18n }}
</div>
</div>
@ -215,6 +225,7 @@
id="password"
type="{{ showPassword ? 'text' : 'password' }}"
name="Password"
aria-describedby="passwordHelp"
class="monospaced"
[(ngModel)]="password"
appInputVerbatim
@ -239,7 +250,7 @@
</div>
</div>
</div>
<div class="box-footer">
<div id="passwordHelp" class="box-footer">
{{ "sendPasswordDesc" | i18n }}
</div>
</div>
@ -251,13 +262,14 @@
<textarea
id="notes"
name="Notes"
aria-describedby="notesHelp"
rows="6"
[(ngModel)]="send.notes"
[readonly]="disableSend"
></textarea>
</div>
</div>
<div class="box-footer">
<div id="notesHelp" class="box-footer">
{{ "sendNotesDesc" | i18n }}
</div>
</div>

2
apps/browser/src/popup/settings/export.component.html
View File

@ -32,7 +32,7 @@
<app-user-verification ngDefaultControl formControlName="secret" name="Secret">
</app-user-verification>
</div>
<div class="box-footer">
<div id="confirmIdentityHelp" class="box-footer">
<p>{{ "confirmIdentity" | i18n }}</p>
</div>
</div>

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

@ -33,6 +33,7 @@
<select
id="defaultUriMatch"
name="DefaultUriMatch"
aria-describedby="defaultUriMatchHelp"
[(ngModel)]="defaultUriMatch"
(change)="saveDefaultUriMatch()"
>
@ -40,7 +41,9 @@
</select>
</div>
</div>
<div class="box-footer">{{ "defaultUriMatchDetectionDesc" | i18n }}</div>
<div id="defaultUriMatchHelp" class="box-footer">
{{ "defaultUriMatchDetectionDesc" | i18n }}
</div>
</div>
<div class="box" *ngIf="showClearClipboard">
<div class="box-content">
@ -49,6 +52,7 @@
<select
id="clearClipboard"
name="ClearClipboard"
aria-describedby="clearClipboardHelp"
[(ngModel)]="clearClipboard"
(change)="saveClearClipboard()"
>
@ -58,7 +62,7 @@
</select>
</div>
</div>
<div class="box-footer">{{ "clearClipboardDesc" | i18n }}</div>
<div id="clearClipboardHelp" class="box-footer">{{ "clearClipboardDesc" | i18n }}</div>
</div>
<div class="box">
<div class="box-content">
@ -67,12 +71,13 @@
<input
id="totp"
type="checkbox"
aria-describedby="totpHelp"
(change)="updateAutoTotpCopy()"
[(ngModel)]="enableAutoTotpCopy"
/>
</div>
</div>
<div class="box-footer">{{ "disableAutoTotpCopyDesc" | i18n }}</div>
<div id="totpHelp" class="box-footer">{{ "disableAutoTotpCopyDesc" | i18n }}</div>
</div>
<div class="box">
<div class="box-content">
@ -81,12 +86,15 @@
<input
id="addlogin-notification-bar"
type="checkbox"
aria-describedby="addlogin-notification-barHelp"
(change)="updateAddLoginNotification()"
[(ngModel)]="enableAddLoginNotification"
/>
</div>
</div>
<div class="box-footer">{{ "addLoginNotificationDesc" | i18n }}</div>
<div id="addlogin-notification-barHelp" class="box-footer">
{{ "addLoginNotificationDesc" | i18n }}
</div>
</div>
<div class="box">
<div class="box-content">
@ -97,12 +105,15 @@
<input
id="changedpass-notification-bar"
type="checkbox"
aria-describedby="changedpass-notification-barHelp"
(change)="updateChangedPasswordNotification()"
[(ngModel)]="enableChangedPasswordNotification"
/>
</div>
</div>
<div class="box-footer">{{ "changedPasswordNotificationDesc" | i18n }}</div>
<div id="changedpass-notification-barHelp" class="box-footer">
{{ "changedPasswordNotificationDesc" | i18n }}
</div>
</div>
<div class="box">
<div class="box-content">
@ -111,12 +122,13 @@
<input
id="context-menu"
type="checkbox"
aria-describedby="context-menuHelp"
(change)="updateContextMenuItem()"
[(ngModel)]="enableContextMenuItem"
/>
</div>
</div>
<div class="box-footer">{{ "contextMenuItemDesc" | i18n }}</div>
<div id="context-menuHelp" class="box-footer">{{ "contextMenuItemDesc" | i18n }}</div>
</div>
</ng-container>
<div class="box box-section-divider">
@ -141,12 +153,15 @@
<input
id="showCardsCurrentTab"
type="checkbox"
aria-describedby="showCardsCurrentTabHelp"
(change)="updateShowCardsCurrentTab()"
[(ngModel)]="showCardsCurrentTab"
/>
</div>
</div>
<div class="box-footer">{{ "showCardsCurrentTabDesc" | i18n }}</div>
<div id="showCardsCurrentTabHelp" class="box-footer">
{{ "showCardsCurrentTabDesc" | i18n }}
</div>
</div>
<div class="box">
<div class="box-content">
@ -155,12 +170,15 @@
<input
id="showIdentitiesCurrentTab"
type="checkbox"
aria-describedby="showIdentitiesCurrentTabHelp"
(change)="updateShowIdentitiesCurrentTab()"
[(ngModel)]="showIdentitiesCurrentTab"
/>
</div>
</div>
<div class="box-footer">{{ "showIdentitiesCurrentTabDesc" | i18n }}</div>
<div id="showIdentitiesCurrentTabHelp" class="box-footer">
{{ "showIdentitiesCurrentTabDesc" | i18n }}
</div>
</div>
<div class="box">
<div class="box-content">
@ -169,12 +187,13 @@
<input
id="favicon"
type="checkbox"
aria-describedby="faviconHelp"
(change)="updateFavicon()"
[(ngModel)]="enableFavicon"
/>
</div>
</div>
<div class="box-footer">{{ "faviconDesc" | i18n }}</div>
<div id="faviconHelp" class="box-footer">{{ "faviconDesc" | i18n }}</div>
</div>
<div class="box">
<div class="box-content">
@ -183,23 +202,30 @@
<input
id="badge"
type="checkbox"
aria-describedby="badgeHelp"
(change)="updateBadgeCounter()"
[(ngModel)]="enableBadgeCounter"
/>
</div>
</div>
<div class="box-footer">{{ "badgeCounterDesc" | i18n }}</div>
<div id="badgeHelp" class="box-footer">{{ "badgeCounterDesc" | i18n }}</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="theme">{{ "theme" | i18n }}</label>
<select id="theme" name="Theme" [(ngModel)]="theme" (change)="saveTheme()">
<select
id="theme"
name="Theme"
aria-describedby="themeHelp"
[(ngModel)]="theme"
(change)="saveTheme()"
>
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
</select>
</div>
</div>
<div class="box-footer">{{ "themeDesc" | i18n }}</div>
<div id="themeHelp" class="box-footer">{{ "themeDesc" | i18n }}</div>
</div>
</ng-container>
<div class="box box-section-divider">
@ -224,12 +250,13 @@
<input
id="autofill"
type="checkbox"
aria-describedby="autofillHelp"
(change)="updateAutoFillOnPageLoad()"
[(ngModel)]="enableAutoFillOnPageLoad"
/>
</div>
</div>
<div class="box-footer">
<div id="autofillHelp" class="box-footer">
{{ "enableAutoFillOnPageLoadDesc" | i18n }}
<b>{{ "warning" | i18n }}</b
>: {{ "experimentalFeature" | i18n }}
@ -242,6 +269,7 @@
<select
id="defaultAutofill"
name="DefaultAutofill"
aria-describedby="defaultAutofillHelp"
[(ngModel)]="autoFillOnPageLoadDefault"
(change)="updateAutoFillOnPageLoadDefault()"
[disabled]="!enableAutoFillOnPageLoad"
@ -252,7 +280,9 @@
</select>
</div>
</div>
<div class="box-footer">{{ "defaultAutoFillOnPageLoadDesc" | i18n }}</div>
<div id="defaultAutofillHelp" class="box-footer">
{{ "defaultAutoFillOnPageLoadDesc" | i18n }}
</div>
</div>
</ng-container>
</main>

3
apps/browser/src/popup/settings/settings.component.html
View File

@ -221,6 +221,7 @@
</button>
<button
type="button"
aria-describedby="rateExtensionHelp"
class="box-content-row box-content-row-flex text-default"
appStopClick
(click)="rate()"
@ -229,6 +230,6 @@
<i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
</button>
</div>
<div class="box-footer">{{ "rateExtensionDesc" | i18n }}</div>
<div id="rateExtensionHelp" class="box-footer">{{ "rateExtensionDesc" | i18n }}</div>
</div>
</main>

5
apps/browser/src/popup/settings/sync.component.html
View File

@ -15,6 +15,7 @@
<button
type="button"
class="btn block primary"
aria-describedby="lastSyncHint"
(click)="sync()"
#syncBtn
[disabled]="$any(syncBtn).loading"
@ -27,6 +28,8 @@
aria-hidden="true"
></i>
</button>
<p class="text-center text-muted small">{{ "lastSync" | i18n }} {{ lastSync }}</p>
<p id="lastSyncHint" class="text-center text-muted small">
{{ "lastSync" | i18n }} {{ lastSync }}
</p>
</div>
</main>

4
apps/browser/src/popup/vault/attachments.component.html
View File

@ -61,10 +61,10 @@
<div class="box-content no-hover">
<div class="box-content-row">
<label for="file">{{ "file" | i18n }}</label>
<input type="file" id="file" name="file" required />
<input type="file" id="file" name="file" aria-describedby="fileHelp" required />
</div>
</div>
<div class="box-footer">
<div id="fileHelp" class="box-footer">
{{ "maxFileSize" | i18n }}
</div>
</div>

3
apps/browser/src/popup/vault/share.component.html
View File

@ -35,6 +35,7 @@
<select
id="organization"
name="OrganizationId"
aria-describedby="organizationHelp"
[(ngModel)]="organizationId"
(change)="filterCollections()"
>
@ -42,7 +43,7 @@
</select>
</div>
</div>
<div class="box-footer">
<div id="organizationHelp" class="box-footer">
{{ "moveToOrgDesc" | i18n }}
</div>
</div>

3
apps/desktop/src/app/accounts/accessibility-cookie.component.html
View File

@ -14,6 +14,7 @@
id="link"
type="text"
name="Link"
aria-describedby="linkHelp"
formControlName="link"
placeholder="{{ 'ex' | i18n }} https://accounts.hcaptcha.com/verify_email"
appAutofocus
@ -21,7 +22,7 @@
/>
</div>
</div>
<div class="box-footer">{{ "enterhCaptchaUrl" | i18n }}</div>
<div id="linkHelp" class="box-footer">{{ "enterhCaptchaUrl" | i18n }}</div>
</div>
<div class="buttons">
<button type="submit" class="btn primary block" [disabled]="!accessibilityForm.valid">

3
apps/desktop/src/app/accounts/delete-account.component.html
View File

@ -24,6 +24,9 @@
>
</app-user-verification>
</div>
<div id="confirmIdentityHelp" class="box-footer">
<p>{{ "confirmIdentity" | i18n }}</p>
</div>
</div>
</div>
<div class="modal-footer">

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

@ -13,13 +13,14 @@
id="baseUrl"
type="text"
name="BaseUrl"
aria-describedby="baseUrlHelp"
[(ngModel)]="baseUrl"
placeholder="{{ 'ex' | i18n }} https://bitwarden.company.com"
appInputVerbatim
/>
</div>
</div>
<div class="box-footer">
<div id="baseUrlHelp" class="box-footer">
{{ "selfHostedEnvironmentFooter" | i18n }}
</div>
</div>
@ -34,7 +35,13 @@
{{ "customEnvironment" | i18n }}
</button>
</h2>
<div class="box-content" [hidden]="!showCustom">
<div
role="group"
attr.aria-label="{{ 'customEnvironment' | i18n }}"
aria-describedby="customEnvironmentHelp"
class="box-content"
[hidden]="!showCustom"
>
<div class="box-content-row" appBoxRow>
<label for="webVaultUrl">{{ "webVaultUrl" | i18n }}</label>
<input
@ -80,7 +87,7 @@
/>
</div>
</div>
<div class="box-footer" [hidden]="!showCustom">
<div id="customEnvironmentHelp" class="box-footer" [hidden]="!showCustom">
{{ "customEnvironmentFooter" | i18n }}
</div>
</div>

3
apps/desktop/src/app/accounts/hint.component.html
View File

@ -9,6 +9,7 @@
id="email"
type="text"
name="Email"
aria-describedby="emailHelp"
[(ngModel)]="email"
required
appAutofocus
@ -16,7 +17,7 @@
/>
</div>
</div>
<div class="box-footer">
<div id="emailHelp" class="box-footer">
{{ "enterEmailToGetHint" | i18n }}
</div>
</div>

3
apps/desktop/src/app/accounts/lock.component.html
View File

@ -23,6 +23,7 @@
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
aria-describedby="masterPasswordHelp"
class="monospaced"
[(ngModel)]="masterPassword"
required
@ -47,7 +48,7 @@
</div>
</div>
</div>
<div class="box-footer">
<div id="masterPasswordHelp" class="box-footer">
{{ "loggedInAsOn" | i18n: email:webVaultHostname }}
</div>
</div>

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

@ -26,6 +26,7 @@
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
class="monospaced"
aria-describedby="masterPasswordHelp"
formControlName="masterPassword"
appInputVerbatim
/>
@ -57,7 +58,7 @@
</app-password-strength>
</div>
</div>
<div class="box-footer">
<div id="masterPasswordHelp" class="box-footer">
{{ "masterPassDesc" | i18n }}
</div>
</div>
@ -93,7 +94,7 @@
</div>
<div class="box-content-row" appBoxRow>
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" formControlName="hint" />
<input id="hint" type="text" aria-describedby="hintHelp" formControlName="hint" />
</div>
<div class="box last" [hidden]="!showCaptcha()">
<div class="box-content">
@ -107,7 +108,7 @@
</div>
</div>
</div>
<div class="box-footer">
<div id="hintHelp" class="box-footer">
{{ "masterPassHintDesc" | i18n }}
</div>
</div>

13
apps/desktop/src/app/accounts/set-password.component.html
View File

@ -46,6 +46,7 @@
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
class="monospaced"
aria-describedby="masterPasswordHelp"
[(ngModel)]="masterPassword"
required
appInputVerbatim
@ -77,7 +78,7 @@
</app-password-strength>
</div>
</div>
<div class="box-footer">
<div id="masterPasswordHelp" class="box-footer">
{{ "masterPassDesc" | i18n }}
</div>
</div>
@ -122,10 +123,16 @@
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint" />
<input
id="hint"
type="text"
name="Hint"
aria-describedby="hintHelp"
[(ngModel)]="hint"
/>
</div>
</div>
<div class="box-footer">
<div id="hintHelp" class="box-footer">
{{ "masterPassHintDesc" | i18n }}
</div>
</div>

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

@ -44,13 +44,16 @@
name="VaultTimeoutAction"
id="vaultTimeoutActionLock"
value="lock"
aria-describedby="vaultTimeoutActionLockHelp"
[(ngModel)]="vaultTimeoutAction"
(change)="saveVaultTimeoutOptions()"
/>
{{ "lock" | i18n }}
</label>
</div>
<small class="help-block">{{ "vaultTimeoutActionLockDesc" | i18n }}</small>
<small id="vaultTimeoutActionLockHelp" class="help-block">{{
"vaultTimeoutActionLockDesc" | i18n
}}</small>
<div class="radio">
<label for="vaultTimeoutActionLogOut">
<input
@ -58,13 +61,16 @@
name="VaultTimeoutAction"
id="vaultTimeoutActionLogOut"
value="logOut"
aria-describedby="vaultTimeoutActionLogOutHelp"
[(ngModel)]="vaultTimeoutAction"
(change)="saveVaultTimeoutOptions()"
/>
{{ "logOut" | i18n }}
</label>
</div>
<small class="help-block">{{ "vaultTimeoutActionLogOutDesc" | i18n }}</small>
<small id="vaultTimeoutActionLogOutHelp" class="help-block">{{
"vaultTimeoutActionLogOutDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
@ -139,6 +145,7 @@
<select
id="clearClipboard"
name="ClearClipboard"
aria-describedby="clearClipboardHelp"
[(ngModel)]="clearClipboard"
(change)="saveClearClipboard()"
>
@ -146,7 +153,9 @@
{{ o.name }}
</option>
</select>
<small class="help-block">{{ "clearClipboardDesc" | i18n }}</small>
<small id="clearClipboardHelp" class="help-block">{{
"clearClipboardDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
@ -155,13 +164,16 @@
id="minimizeOnCopyToClipboard"
type="checkbox"
name="MinimizeOnCopyToClipboard"
aria-describedby="minimizeOnCopyToClipboardHelp"
[(ngModel)]="minimizeOnCopyToClipboard"
(change)="saveMinOnCopyToClipboard()"
/>
{{ "minimizeOnCopyToClipboard" | i18n }}
</label>
</div>
<small class="help-block">{{ "minimizeOnCopyToClipboardDesc" | i18n }}</small>
<small id="minimizeOnCopyToClipboardHelp" class="help-block">{{
"minimizeOnCopyToClipboardDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
@ -170,13 +182,14 @@
id="enableFavicons"
type="checkbox"
name="enableFavicons"
aria-describedby="enableFaviconsHelp"
[(ngModel)]="enableFavicons"
(change)="saveFavicons()"
/>
{{ "enableFavicon" | i18n }}
</label>
</div>
<small class="help-block">{{ "faviconDesc" | i18n }}</small>
<small id="enableFaviconsHelp" class="help-block">{{ "faviconDesc" | i18n }}</small>
</div>
</ng-container>
</div>
@ -211,13 +224,14 @@
id="enableTray"
type="checkbox"
name="EnableTray"
aria-describedby="enableTrayHelp"
[(ngModel)]="enableTray"
(change)="saveTray()"
/>
{{ enableTrayText }}
</label>
</div>
<small class="help-block">{{ enableTrayDescText }}</small>
<small id="enableTrayHelp" class="help-block">{{ enableTrayDescText }}</small>
</div>
<div class="form-group" *ngIf="showMinToTray">
<div class="checkbox">
@ -226,13 +240,16 @@
id="enableMinToTray"
type="checkbox"
name="EnableMinToTray"
aria-describedby="enableMinToTrayHelp"
[(ngModel)]="enableMinToTray"
(change)="saveMinToTray()"
/>
{{ enableMinToTrayText }}
</label>
</div>
<small class="help-block">{{ enableMinToTrayDescText }}</small>
<small id="enableMinToTrayHelp" class="help-block">{{
enableMinToTrayDescText
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
@ -241,13 +258,16 @@
id="enableCloseToTray"
type="checkbox"
name="EnableCloseToTray"
aria-describedby="enableCloseToTrayHelp"
[(ngModel)]="enableCloseToTray"
(change)="saveCloseToTray()"
/>
{{ enableCloseToTrayText }}
</label>
</div>
<small class="help-block">{{ enableCloseToTrayDescText }}</small>
<small id="enableCloseToTrayHelp" class="help-block">{{
enableCloseToTrayDescText
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
@ -256,13 +276,14 @@
id="startToTray"
type="checkbox"
name="StartToTray"
aria-describedby="startToTrayHelp"
[(ngModel)]="startToTray"
(change)="saveStartToTray()"
/>
{{ startToTrayText }}
</label>
</div>
<small class="help-block">{{ startToTrayDescText }}</small>
<small id="startToTrayHelp" class="help-block">{{ startToTrayDescText }}</small>
</div>
<div class="form-group">
<div class="checkbox">
@ -271,13 +292,16 @@
id="openAtLogin"
type="checkbox"
name="OpenAtLogin"
aria-describedby="openAtLoginHelp"
[(ngModel)]="openAtLogin"
(change)="saveOpenAtLogin()"
/>
{{ "openAtLogin" | i18n }}
</label>
</div>
<small class="help-block">{{ "openAtLoginDesc" | i18n }}</small>
<small id="openAtLoginHelp" class="help-block">{{
"openAtLoginDesc" | i18n
}}</small>
</div>
<div class="form-group" *ngIf="showAlwaysShowDock">
<div class="checkbox">
@ -286,13 +310,16 @@
id="alwaysShowDock"
type="checkbox"
name="AlwaysShowDock"
aria-describedby="alwaysShowDockHelp"
[(ngModel)]="alwaysShowDock"
(change)="saveAlwaysShowDock()"
/>
{{ "alwaysShowDock" | i18n }}
</label>
</div>
<small class="help-block">{{ "alwaysShowDockDesc" | i18n }}</small>
<small id="alwaysShowDockHelp" class="help-block">{{
"alwaysShowDockDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
@ -301,13 +328,16 @@
id="enableBrowserIntegration"
type="checkbox"
name="EnableBrowserIntegration"
aria-describedby="enableBrowserIntegrationHelp"
[(ngModel)]="enableBrowserIntegration"
(change)="saveBrowserIntegration()"
/>
{{ "enableBrowserIntegration" | i18n }}
</label>
</div>
<small class="help-block">{{ "enableBrowserIntegrationDesc" | i18n }}</small>
<small id="enableBrowserIntegrationHelp" class="help-block">{{
"enableBrowserIntegrationDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
@ -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 }}
</label>
</div>
<small class="help-block">{{
<small id="enableBrowserIntegrationFingerprintHelp" class="help-block">{{
"enableBrowserIntegrationFingerprintDesc" | i18n
}}</small>
</div>
@ -346,17 +377,29 @@
</div>
<div class="form-group">
<label for="theme">{{ "theme" | i18n }}</label>
<select id="theme" name="Theme" [(ngModel)]="theme" (change)="saveTheme()">
<select
id="theme"
name="Theme"
aria-describedby="themeHelp"
[(ngModel)]="theme"
(change)="saveTheme()"
>
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
</select>
<small class="help-block">{{ "themeDesc" | i18n }}</small>
<small id="themeHelp" class="help-block">{{ "themeDesc" | i18n }}</small>
</div>
<div class="form-group">
<label for="locale">{{ "language" | i18n }}</label>
<select id="locale" name="Locale" [(ngModel)]="locale" (change)="saveLocale()">
<select
id="locale"
name="Locale"
aria-describedby="localeHelp"
[(ngModel)]="locale"
(change)="saveLocale()"
>
<option *ngFor="let o of localeOptions" [ngValue]="o.value">{{ o.name }}</option>
</select>
<small class="help-block">{{ "languageDesc" | i18n }}</small>
<small id="localeHelp" class="help-block">{{ "languageDesc" | i18n }}</small>
</div>
</ng-container>
</div>

4
apps/desktop/src/app/accounts/update-temp-password.component.html
View File

@ -96,10 +96,10 @@
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint" />
<input id="hint" type="text" name="Hint" aria-describedby="hintHelp" [(ngModel)]="hint" />
</div>
</div>
<div class="box-footer">
<div id="hintHelp" class="box-footer">
{{ "masterPassHintDesc" | i18n }}
</div>
</div>

3
apps/desktop/src/app/accounts/vault-timeout-input.component.html
View File

@ -8,12 +8,13 @@
<select
id="vaultTimeout"
name="VaultTimeout"
aria-describedby="vaultTimeoutHelp"
formControlName="vaultTimeout"
class="form-control"
>
<option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{ o.name }}</option>
</select>
<small class="form-text text-muted">{{ "vaultTimeoutDesc" | i18n }}</small>
<small id="vaultTimeoutHelp" class="help-block">{{ "vaultTimeoutDesc" | i18n }}</small>
</div>
<div class="form-group row" *ngIf="showCustom" formGroupName="custom">
<div class="col">

3
apps/desktop/src/app/components/password-reprompt.component.html
View File

@ -14,6 +14,7 @@
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
aria-describedby="masterPasswordHelp"
class="monospaced"
[(ngModel)]="masterPassword"
required
@ -38,7 +39,7 @@
</div>
</div>
</div>
<div class="box-footer">
<div id="masterPasswordHelp" class="box-footer">
{{ "passwordConfirmationDesc" | i18n }}
</div>
</div>

2
apps/desktop/src/app/components/user-verification.component.html
View File

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

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

@ -51,6 +51,7 @@
id="file"
class="form-control-file"
name="file"
aria-describedby="fileHelp"
required
[disabled]="disableSend"
/>
@ -64,16 +65,17 @@
<textarea
id="text"
name="text"
aria-describedby="textHelp"
[(ngModel)]="send.text.text"
rows="6"
[readOnly]="disableSend"
></textarea>
</div>
</div>
<div class="box-footer" *ngIf="!editMode && send.type === sendType.File">
<div id="fileHelp" class="box-footer" *ngIf="!editMode && send.type === sendType.File">
{{ "sendFileDesc" | i18n }} {{ "maxFileSize" | i18n }}
</div>
<div class="box-footer" *ngIf="send.type === sendType.Text">
<div id="textHelp" class="box-footer" *ngIf="send.type === sendType.Text">
{{ "sendTextDesc" | i18n }}
</div>
</div>
@ -126,15 +128,16 @@
id="maxAccessCount"
type="number"
name="maxAccessCount"
aria-describedby="maxAccessCountHelp"
[(ngModel)]="send.maxAccessCount"
[readOnly]="disableSend"
/>
</div>
</div>
<div class="box-footer" *ngIf="!editMode">
<div id="maxAccessCountHelp" class="box-footer" *ngIf="!editMode">
{{ "maxAccessCountDesc" | i18n }}
</div>
<div class="box-footer" *ngIf="editMode">
<div id="maxAccessCountHelp" class="box-footer" *ngIf="editMode">
<p>{{ "maxAccessCountDesc" | i18n }}</p>
{{ "currentAccessCount" | i18n }}: <strong>{{ send.accessCount }}</strong>
</div>
@ -149,6 +152,7 @@
<input
id="password"
name="password"
aria-describedby="passwordHelp"
type="{{ showPassword ? 'text' : 'password' }}"
[(ngModel)]="password"
[readOnly]="disableSend"
@ -174,26 +178,27 @@
</div>
</div>
</div>
<div class="box-footer">
<div id="passwordHelp" class="box-footer">
{{ "sendPasswordDesc" | i18n }}
</div>
</div>
<div class="box">
<h2 class="box-header">
{{ "notes" | i18n }}
<label for="notes">{{ "notes" | i18n }}</label>
</h2>
<div class="box-content">
<div class="box-content-row" appBoxRow>
<textarea
id="notes"
name="notes"
aria-describedby="notesHelp"
[(ngModel)]="send.notes"
rows="6"
[readOnly]="disableSend"
></textarea>
</div>
</div>
<div class="box-footer">
<div id="notesHelp" class="box-footer">
{{ "sendNotesDesc" | i18n }}
</div>
</div>

16
apps/desktop/src/app/send/efflux-dates.component.html
View File

@ -6,12 +6,13 @@
<select
id="deletionDate"
name="DeletionDateSelect"
aria-describedby="deletionDateHelp"
formControlName="selectedDeletionDatePreset"
required
>
<option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">{{ o.name }}</option>
</select>
<small class="help-block">{{ "deletionDateDesc" | i18n }}</small>
<small id="deletionDateHelp" class="help-block">{{ "deletionDateDesc" | i18n }}</small>
</div>
<div class="box-content-row" *ngIf="selectedDeletionDatePreset.value === 0 || editMode">
<label *ngIf="editMode" for="deletionDateCustom">{{ "deletionDate" | i18n }}</label>
@ -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"
/>
<small class="help-block" *ngIf="editMode">{{ "deletionDateDesc" | i18n }}</small>
<small id="deletionDateCustomHelp" class="help-block" *ngIf="editMode">{{
"deletionDateDesc" | i18n
}}</small>
</div>
<div class="box-content-row" appBoxRow *ngIf="!editMode">
<label for="expirationDate">{{ "expirationDate" | i18n }}</label>
<select
id="expirationDate"
name="expirationDateSelect"
aria-describedby="expirationDateHelp"
formControlName="selectedExpirationDatePreset"
required
>
<option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">{{ o.name }}</option>
</select>
<small class="help-block">{{ "expirationDateDesc" | i18n }}</small>
<small id="expirationDateHelp" class="help-block">{{ "expirationDateDesc" | i18n }}</small>
</div>
<div class="box-content-row" *ngIf="selectedExpirationDatePreset.value === 0 || editMode">
<label *ngIf="editMode" for="expirationDateCustom">{{ "expirationDate" | i18n }}</label>
@ -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"
/>
<small *ngIf="editMode" class="help-block">{{ "expirationDateDesc" | i18n }}</small>
<small *ngIf="editMode" id="expirationDateCustomHelp" class="help-block">{{
"expirationDateDesc" | i18n
}}</small>
</div>
</div>
</div>

4
apps/desktop/src/app/vault/attachments.component.html
View File

@ -45,10 +45,10 @@
<div class="box-content no-hover">
<div class="box-content-row">
<label for="file">{{ "file" | i18n }}</label>
<input type="file" id="file" name="file" required />
<input type="file" id="file" name="file" aria-describedby="fileHelp" required />
</div>
</div>
<div class="box-footer">
<div id="fileHelp" class="box-footer">
{{ "maxFileSize" | i18n }}
</div>
</div>

2
apps/desktop/src/app/vault/export.component.html
View File

@ -24,7 +24,7 @@
<app-user-verification ngDefaultControl formControlName="secret" name="secret">
</app-user-verification>
</div>
<div class="box-footer">
<div id="confirmIdentityHelp" class="box-footer">
<p>{{ "confirmIdentity" | i18n }}</p>
</div>
</div>

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

@ -341,7 +341,7 @@
/>
<label class="unstyled" for="usernameType_{{ o.value }}">
{{ o.name }}
<div class="small text-muted" *ngIf="o.desc">{{ o.desc }}</div>
<small class="help-block" *ngIf="o.desc">{{ o.desc }}</small>
</label>
</div>
</div>

3
apps/desktop/src/app/vault/share.component.html
View File

@ -18,6 +18,7 @@
<select
id="organization"
name="OrganizationId"
aria-describedby="organizationHelp"
[(ngModel)]="organizationId"
(change)="filterCollections()"
>
@ -25,7 +26,7 @@
</select>
</div>
</div>
<div class="box-footer">
<div id="organizationHelp" class="box-footer">
{{ "moveToOrgDesc" | i18n }}
</div>
</div>

36
apps/desktop/src/scss/misc.scss
View File

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