[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

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

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>