mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 00:33:44 +00:00
7d3063942e
* 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)
289 lines
10 KiB
HTML
289 lines
10 KiB
HTML
<header>
|
|
<div class="left">
|
|
<button type="button" routerLink="/tabs/settings">
|
|
<span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
|
|
<span>{{ "back" | i18n }}</span>
|
|
</button>
|
|
</div>
|
|
<h1 class="center">
|
|
<span class="title">{{ "options" | i18n }}</span>
|
|
</h1>
|
|
<div class="right"></div>
|
|
</header>
|
|
<main tabindex="-1">
|
|
<div class="box">
|
|
<h2>
|
|
<button
|
|
type="button"
|
|
class="box-header-expandable"
|
|
(click)="showGeneral = !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
|
|
</button>
|
|
</h2>
|
|
</div>
|
|
<ng-container *ngIf="showGeneral">
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row" appBoxRow>
|
|
<label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</label>
|
|
<select
|
|
id="defaultUriMatch"
|
|
name="DefaultUriMatch"
|
|
aria-describedby="defaultUriMatchHelp"
|
|
[(ngModel)]="defaultUriMatch"
|
|
(change)="saveDefaultUriMatch()"
|
|
>
|
|
<option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{ o.name }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="defaultUriMatchHelp" class="box-footer">
|
|
{{ "defaultUriMatchDetectionDesc" | i18n }}
|
|
</div>
|
|
</div>
|
|
<div class="box" *ngIf="showClearClipboard">
|
|
<div class="box-content">
|
|
<div class="box-content-row" appBoxRow>
|
|
<label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
|
|
<select
|
|
id="clearClipboard"
|
|
name="ClearClipboard"
|
|
aria-describedby="clearClipboardHelp"
|
|
[(ngModel)]="clearClipboard"
|
|
(change)="saveClearClipboard()"
|
|
>
|
|
<option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">
|
|
{{ o.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="clearClipboardHelp" class="box-footer">{{ "clearClipboardDesc" | i18n }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="totp">{{ "enableAutoTotpCopy" | i18n }}</label>
|
|
<input
|
|
id="totp"
|
|
type="checkbox"
|
|
aria-describedby="totpHelp"
|
|
(change)="updateAutoTotpCopy()"
|
|
[(ngModel)]="enableAutoTotpCopy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="totpHelp" class="box-footer">{{ "disableAutoTotpCopyDesc" | i18n }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="addlogin-notification-bar">{{ "enableAddLoginNotification" | i18n }}</label>
|
|
<input
|
|
id="addlogin-notification-bar"
|
|
type="checkbox"
|
|
aria-describedby="addlogin-notification-barHelp"
|
|
(change)="updateAddLoginNotification()"
|
|
[(ngModel)]="enableAddLoginNotification"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="addlogin-notification-barHelp" class="box-footer">
|
|
{{ "addLoginNotificationDesc" | i18n }}
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="changedpass-notification-bar">{{
|
|
"enableChangedPasswordNotification" | i18n
|
|
}}</label>
|
|
<input
|
|
id="changedpass-notification-bar"
|
|
type="checkbox"
|
|
aria-describedby="changedpass-notification-barHelp"
|
|
(change)="updateChangedPasswordNotification()"
|
|
[(ngModel)]="enableChangedPasswordNotification"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="changedpass-notification-barHelp" class="box-footer">
|
|
{{ "changedPasswordNotificationDesc" | i18n }}
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="context-menu">{{ "enableContextMenuItem" | i18n }}</label>
|
|
<input
|
|
id="context-menu"
|
|
type="checkbox"
|
|
aria-describedby="context-menuHelp"
|
|
(change)="updateContextMenuItem()"
|
|
[(ngModel)]="enableContextMenuItem"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="context-menuHelp" class="box-footer">{{ "contextMenuItemDesc" | i18n }}</div>
|
|
</div>
|
|
</ng-container>
|
|
<div class="box box-section-divider">
|
|
<h2>
|
|
<button
|
|
type="button"
|
|
class="box-header-expandable"
|
|
(click)="showDisplay = !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
|
|
</button>
|
|
</h2>
|
|
</div>
|
|
<ng-container *ngIf="showDisplay">
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="showCardsCurrentTab">{{ "showCardsCurrentTab" | i18n }}</label>
|
|
<input
|
|
id="showCardsCurrentTab"
|
|
type="checkbox"
|
|
aria-describedby="showCardsCurrentTabHelp"
|
|
(change)="updateShowCardsCurrentTab()"
|
|
[(ngModel)]="showCardsCurrentTab"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="showCardsCurrentTabHelp" class="box-footer">
|
|
{{ "showCardsCurrentTabDesc" | i18n }}
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="showIdentitiesCurrentTab">{{ "showIdentitiesCurrentTab" | i18n }}</label>
|
|
<input
|
|
id="showIdentitiesCurrentTab"
|
|
type="checkbox"
|
|
aria-describedby="showIdentitiesCurrentTabHelp"
|
|
(change)="updateShowIdentitiesCurrentTab()"
|
|
[(ngModel)]="showIdentitiesCurrentTab"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="showIdentitiesCurrentTabHelp" class="box-footer">
|
|
{{ "showIdentitiesCurrentTabDesc" | i18n }}
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="favicon">{{ "enableFavicon" | i18n }}</label>
|
|
<input
|
|
id="favicon"
|
|
type="checkbox"
|
|
aria-describedby="faviconHelp"
|
|
(change)="updateFavicon()"
|
|
[(ngModel)]="enableFavicon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="faviconHelp" class="box-footer">{{ "faviconDesc" | i18n }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="badge">{{ "enableBadgeCounter" | i18n }}</label>
|
|
<input
|
|
id="badge"
|
|
type="checkbox"
|
|
aria-describedby="badgeHelp"
|
|
(change)="updateBadgeCounter()"
|
|
[(ngModel)]="enableBadgeCounter"
|
|
/>
|
|
</div>
|
|
</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"
|
|
aria-describedby="themeHelp"
|
|
[(ngModel)]="theme"
|
|
(change)="saveTheme()"
|
|
>
|
|
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="themeHelp" class="box-footer">{{ "themeDesc" | i18n }}</div>
|
|
</div>
|
|
</ng-container>
|
|
<div class="box box-section-divider">
|
|
<h2>
|
|
<button
|
|
type="button"
|
|
class="box-header-expandable"
|
|
(click)="showAutofill = !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
|
|
</button>
|
|
</h2>
|
|
</div>
|
|
<ng-container *ngIf="showAutofill">
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
<label for="autofill">{{ "enableAutoFillOnPageLoad" | i18n }}</label>
|
|
<input
|
|
id="autofill"
|
|
type="checkbox"
|
|
aria-describedby="autofillHelp"
|
|
(change)="updateAutoFillOnPageLoad()"
|
|
[(ngModel)]="enableAutoFillOnPageLoad"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="autofillHelp" class="box-footer">
|
|
{{ "enableAutoFillOnPageLoadDesc" | i18n }}
|
|
<b>{{ "warning" | i18n }}</b
|
|
>: {{ "experimentalFeature" | i18n }}
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-content">
|
|
<div class="box-content-row" appBoxRow>
|
|
<label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</label>
|
|
<select
|
|
id="defaultAutofill"
|
|
name="DefaultAutofill"
|
|
aria-describedby="defaultAutofillHelp"
|
|
[(ngModel)]="autoFillOnPageLoadDefault"
|
|
(change)="updateAutoFillOnPageLoadDefault()"
|
|
[disabled]="!enableAutoFillOnPageLoad"
|
|
>
|
|
<option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">
|
|
{{ o.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="defaultAutofillHelp" class="box-footer">
|
|
{{ "defaultAutoFillOnPageLoadDesc" | i18n }}
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</main>
|