From a48bf9269fad98868c49376f2e234793f5074afd Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 19 Aug 2022 13:17:20 +0100
Subject: [PATCH] [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
---
 .../src/popup/vault/add-edit-custom-fields.component.html  | 6 ++++++
 apps/browser/src/popup/vault/add-edit.component.html       | 2 ++
 .../src/app/vault/add-edit-custom-fields.component.html    | 7 +++++++
 apps/desktop/src/app/vault/add-edit.component.html         | 2 ++
 .../src/app/vault/add-edit-custom-fields.component.html    | 6 ++++++
 apps/web/src/app/vault/add-edit.component.html             | 2 ++
 6 files changed, 25 insertions(+)

diff --git a/apps/browser/src/popup/vault/add-edit-custom-fields.component.html b/apps/browser/src/popup/vault/add-edit-custom-fields.component.html
index c6129233e1f..def0af30031 100644
--- a/apps/browser/src/popup/vault/add-edit-custom-fields.component.html
+++ b/apps/browser/src/popup/vault/add-edit-custom-fields.component.html
@@ -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"
diff --git a/apps/browser/src/popup/vault/add-edit.component.html b/apps/browser/src/popup/vault/add-edit.component.html
index c4f2dffabf0..95c8644e030 100644
--- a/apps/browser/src/popup/vault/add-edit.component.html
+++ b/apps/browser/src/popup/vault/add-edit.component.html
@@ -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"
diff --git a/apps/desktop/src/app/vault/add-edit-custom-fields.component.html b/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
index 17416fa728c..7afbab45b38 100644
--- a/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
+++ b/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
@@ -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"
diff --git a/apps/desktop/src/app/vault/add-edit.component.html b/apps/desktop/src/app/vault/add-edit.component.html
index 14222de0aa8..d0e85813622 100644
--- a/apps/desktop/src/app/vault/add-edit.component.html
+++ b/apps/desktop/src/app/vault/add-edit.component.html
@@ -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"
diff --git a/apps/web/src/app/vault/add-edit-custom-fields.component.html b/apps/web/src/app/vault/add-edit-custom-fields.component.html
index 736aa181e48..3d02f2d3b82 100644
--- a/apps/web/src/app/vault/add-edit-custom-fields.component.html
+++ b/apps/web/src/app/vault/add-edit-custom-fields.component.html
@@ -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
diff --git a/apps/web/src/app/vault/add-edit.component.html b/apps/web/src/app/vault/add-edit.component.html
index d7aa44f8772..5ec27d02065 100644
--- a/apps/web/src/app/vault/add-edit.component.html
+++ b/apps/web/src/app/vault/add-edit.component.html
@@ -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>