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

[PS-1301] Accessibility: improve item edit for URIs and custom fields (#3305) 

* Add `role="group"` and accName to URI and custom field groups (browser)

Provides more context when editing fields (to understand what the remove, options, etc buttons are all about)

* Add `aria-describedby` to custom field value fields (browser)

provides further context other than the generic "Value" label

* Add `role="group"` and accName to URI and custom field groups, add `aria-describedby` to custom field value fields (desktop)

* Add `role="group"` and accName to URI and custom field groups, add `aria-describedby` to custom field value fields (web)

* Use `attr.aria-label` instead of `appA11yTitle`

don't need/want the tooltips appearing everywhere
This commit is contained in:
Patrick H. Lauke 2022-08-19 13:17:20 +01:00 committed by GitHub
parent c53ed9956e
commit a48bf9269f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/browser/src/popup/vault/add-edit-custom-fields.component.html
View File

@ -6,11 +6,13 @@
<!-- Current custom fields -->
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
<div
role="group"
class="box-content-row box-content-row-multi box-draggable-row"
appBoxRow
cdkDrag
*ngFor="let f of cipher.fields; let i = index; trackBy: trackByFunction"
[ngClass]="{ 'box-content-row-checkbox': f.type === fieldType.Boolean }"
attr.aria-label="{{ f.name }}"
>
<button
type="button"
@ -41,6 +43,7 @@
*ngIf="f.type === fieldType.Text"
placeholder="{{ 'value' | i18n }}"
appInputVerbatim
attr.aria-describedby="fieldName{{ i }}"
/>
<!-- Hidden -->
<input
@ -53,6 +56,7 @@
*ngIf="f.type === fieldType.Hidden"
placeholder="{{ 'value' | i18n }}"
[disabled]="!cipher.viewPassword && !f.newField"
attr.aria-describedby="fieldName{{ i }}"
/>
<!-- Linked -->
<select
@ -60,6 +64,7 @@
name="Field.Value{{ i }}"
[(ngModel)]="f.linkedId"
*ngIf="f.type === fieldType.Linked && cipher.linkedFieldOptions != null"
attr.aria-describedby="fieldName{{ i }}"
>
<option *ngFor="let o of linkedFieldOptions" [ngValue]="o.value">{{ o.name }}</option>
</select>
@ -74,6 +79,7 @@
appTrueFalseValue
trueValue="true"
falseValue="false"
attr.aria-describedby="fieldName{{ i }}"
/>
<div
class="action-buttons"

2
apps/browser/src/popup/vault/add-edit.component.html
View File

@ -402,9 +402,11 @@
<div class="box-content">
<ng-container *ngIf="cipher.login.hasUris">
<div
role="group"
class="box-content-row box-content-row-multi"
appBoxRow
*ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
attr.aria-label="{{ 'uriPosition' | i18n: i + 1 }}"
>
<button
type="button"

7
apps/desktop/src/app/vault/add-edit-custom-fields.component.html
View File

@ -5,10 +5,12 @@
<div class="box-content">
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
<div
role="group"
class="box-content-row box-content-row-multi box-draggable-row"
cdkDrag
*ngFor="let f of cipher.fields; let i = index; trackBy: trackByFunction"
[ngClass]="{ 'box-content-row-checkbox': f.type === fieldType.Boolean }"
attr.aria-label="{{ f.name }}"
>
<button
type="button"
@ -39,6 +41,7 @@
*ngIf="f.type === fieldType.Text"
placeholder="{{ 'value' | i18n }}"
appInputVerbatim
attr.aria-describedby="fieldName{{ i }}"
/>
<!-- Password -->
<input
@ -51,6 +54,7 @@
placeholder="{{ 'value' | i18n }}"
[disabled]="!cipher.viewPassword && !f.newField"
appInputVerbatim
attr.aria-describedby="fieldName{{ i }}"
/>
<!-- Linked -->
<select
@ -58,6 +62,7 @@
name="Field.Value{{ i }}"
[(ngModel)]="f.linkedId"
*ngIf="f.type === fieldType.Linked && cipher.linkedFieldOptions != null"
attr.aria-describedby="fieldName{{ i }}"
>
<option *ngFor="let o of linkedFieldOptions" [ngValue]="o.value">{{ o.name }}</option>
</select>
@ -72,6 +77,7 @@
appTrueFalseValue
trueValue="true"
falseValue="false"
attr.aria-describedby="fieldName{{ i }}"
/>
<div
class="action-buttons"
@ -84,6 +90,7 @@
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="f.showValue"
(click)="toggleFieldValue(f)"
attr.aria-describedby="fieldName{{ i }}"
>
<i
class="bwi bwi-lg"

2
apps/desktop/src/app/vault/add-edit.component.html
View File

@ -391,9 +391,11 @@
<div class="box-content">
<ng-container *ngIf="cipher.login.hasUris">
<div
role="group"
class="box-content-row box-content-row-multi"
appBoxRow
*ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
attr.aria-label="{{ 'uriPosition' | i18n: i + 1 }}"
>
<button
type="button"

6
apps/web/src/app/vault/add-edit-custom-fields.component.html
View File

@ -2,9 +2,11 @@
<h3 class="mt-4">{{ "customFields" | i18n }}</h3>
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
<div
role="group"
class="row"
cdkDrag
*ngFor="let f of cipher.fields; let i = index; trackBy: trackByFunction"
attr.aria-label="{{ f.name }}"
>
<div class="col-5 form-group">
<div class="d-flex">
@ -42,6 +44,7 @@
[(ngModel)]="f.value"
appInputVerbatim
[disabled]="cipher.isDeleted || viewOnly"
attr.aria-describedby="fieldName{{ i }}"
/>
<div class="input-group-append">
<button
@ -65,6 +68,7 @@
appInputVerbatim
autocomplete="new-password"
[disabled]="cipher.isDeleted || viewOnly || (!cipher.viewPassword && !f.newField)"
attr.aria-describedby="fieldName{{ i }}"
/>
<div class="input-group-append">
<button
@ -101,6 +105,7 @@
[(ngModel)]="f.linkedId"
*ngIf="f.type === fieldType.Linked && cipher.linkedFieldOptions != null"
[disabled]="cipher.isDeleted || viewOnly"
attr.aria-describedby="fieldName{{ i }}"
>
<option *ngFor="let o of linkedFieldOptions" [ngValue]="o.value">{{ o.name }}</option>
</select>
@ -117,6 +122,7 @@
trueValue="true"
falseValue="false"
[disabled]="cipher.isDeleted || viewOnly"
attr.aria-describedby="fieldName{{ i }}"
/>
</div>
<button

2
apps/web/src/app/vault/add-edit.component.html
View File

@ -273,8 +273,10 @@
</div>
<ng-container *ngIf="cipher.login.hasUris">
<div
role="group"
class="row"
*ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
attr.aria-label="{{ 'uriPosition' | i18n: i + 1 }}"
>
<div class="col-7 form-group">
<label for="loginUri{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>