Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-18 11:05:41 +01:00
Code Issues Projects Releases Wiki Activity

View entry: add labels to readonly fields, expand aria-label for repeated toggles

Browse Source 
Closes https://github.com/bitwarden/browser/issues/1984
This commit is contained in:
Patrick H. Lauke 2021-12-16 01:26:00 +00:00
parent 77c107cd21
commit 557dd8f68d
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/popup/vault/view-custom-fields.component.html
View File

@ -27,13 +27,13 @@
</div>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
<button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{field.name}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
*ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
(click)="toggleFieldValue(field)">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
</button>
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
<button type="button" class="row-btn" appStopClick attr.aria-label="{{'copyValue' | i18n}} {{field.name}}" appA11yTitle="{{'copyValue' | i18n}}"
*ngIf="field.value && field.type !== fieldType.Boolean && field.type !== fieldType.Linked &&
!(field.type === fieldType.Hidden && !cipher.viewPassword)"
(click)="copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')">

30
src/popup/vault/view.component.html
View File

@ -16,17 +16,17 @@
</div>
<div class="box-content">
<div class="box-content-row">
<span class="row-label">{{'name' | i18n}}</span>
<input type="text" [value]="cipher.name" readonly aria-readonly="true" />
<label for="name">{{'name' | i18n}}</label>
<input id="name" type="text" [value]="cipher.name" readonly aria-readonly="true" />
</div>
<!-- Login -->
<div *ngIf="cipher.login">
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.username">
<div class="row-main">
<span class="row-label draggable" draggable="true"
<label for="loginUsername" class="row-label draggable" draggable="true"
(dragstart)="setTextDataOnDrag($event, cipher.login.username)">{{'username' | i18n}}
</span>
<input type="text" [value]="cipher.login.username" readonly aria-readonly="true" />
</label>
<input id="loginUsername" type="text" [value]="cipher.login.username" readonly aria-readonly="true" />
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyUsername' | i18n}}"
@ -54,7 +54,7 @@
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
aria-hidden="true"></i>
</button>
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
<button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'password' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="togglePassword()" *ngIf="cipher.viewPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
@ -103,7 +103,7 @@
<span [hidden]="!showCardNumber" class="monospaced">{{cipher.card.number}}</span>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
<button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'number' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="toggleCardNumber()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
@ -129,7 +129,7 @@
<span [hidden]="!showCardCode" class="monospaced">{{cipher.card.code}}</span>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
<button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'securityCode' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="toggleCardCode()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
@ -191,18 +191,18 @@
<div class="box-content">
<div class="box-content-row box-content-row-flex" *ngFor="let u of cipher.login.uris; let i = index">
<div class="row-main">
<span class="row-label" *ngIf="!u.isWebsite">{{'uri' | i18n}}</span>
<span class="row-label" *ngIf="u.isWebsite">{{'website' | i18n}}</span>
<label for="hostOrUri{{i}}" class="row-label" *ngIf="!u.isWebsite">{{'uri' | i18n}}</label>
<label for="hostOrUri{{i}}" class="row-label" *ngIf="u.isWebsite">{{'website' | i18n}}</label>
<span title="{{u.uri}}">
<input type="text" [value]="u.hostOrUri" readonly aria-readonly="true" />
<input id="hostOrUri{{i}}" type="text" [value]="u.hostOrUri" readonly aria-readonly="true" />
</span>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
<button type="button" class="row-btn" appStopClick attr.aria-label="{{'launch' | i18n}} {{u.uri}}" appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
(click)="launch(u)">
<i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
</button>
<button type="button" class="row-btn"appStopClick appA11yTitle="{{'copyUri' | i18n}}"
<button type="button" class="row-btn"appStopClick attr.aria-label="{{'copyUri' | i18n}} {{u.uri}}" appA11yTitle="{{'copyUri' | i18n}}"
(click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
@ -212,11 +212,11 @@
</div>
<div class="box" *ngIf="cipher.notes">
<div class="box-header">
{{'notes' | i18n}}
<label for="notes">{{'notes' | i18n}}</label>
</div>
<div class="box-content">
<div class="box-content-row">
<textarea [value]="cipher.notes" rows="6" readonly aria-readonly="true"></textarea>
<textarea id="notes" [value]="cipher.notes" rows="6" readonly aria-readonly="true"></textarea>
</div>
</div>
</div>