[PS-557] Browser: Accessibility - change send list controls to buttons, make them keyboard-operable, improve screen reader experience (#2540)

* Change send list controls to buttons

make them keyboard focusable/operable

* Fix width/display of sends

* Make `.row-btn.disabled` also apply to natively `disabled` buttons without need for class

* Change accessible name for send group to use the send's name, not generic "Edit item" title

apps/browser/src/popup/components/send-list.component.html

@@ -1,12 +1,10 @@
-<button
-  type="button"
+<div
+  role="group"
   *ngFor="let s of sends"
-  (click)="selectSend(s)"
-  appStopClick
-  title="{{ title }} - {{ s.name }}"
+  appA11yTitle="{{ s.name }}"
   class="box-content-row box-content-row-flex"
 >
-  <div class="row-main">
+  <button type="button" class="row-main" (click)="selectSend(s)" appStopClick title="{{ title }} - {{ s.name }}">
     <div class="app-vault-icon">
       <div class="icon" aria-hidden="true">
         <i class="bwi bwi-fw bwi-lg bwi-file-text" *ngIf="s.type === sendType.Text"></i>
@@ -41,7 +39,11 @@
           <span class="sr-only">{{ "maxAccessCountReached" | i18n }}</span>
         </ng-container>
         <ng-container *ngIf="s.expired">
-          <i class="bwi bwi-clock text-muted" title="{{ 'expired' | i18n }}" aria-hidden="true"></i>
+          <i
+            class="bwi bwi-clock text-muted"
+            title="{{ 'expired' | i18n }}"
+            aria-hidden="true"
+          ></i>
           <span class="sr-only">{{ "expired" | i18n }}</span>
         </ng-container>
         <ng-container *ngIf="s.pendingDelete">
@@ -55,9 +57,10 @@
       </span>
       <span class="detail">{{ s.deletionDate | date: "medium" }}</span>
     </div>
-  </div>
+  </button>
   <div class="action-buttons">
-    <span
+    <button
+      type="button"
       class="row-btn"
       appStopClick
       appStopProp
@@ -65,10 +68,12 @@
       (click)="copySendLink(s)"
     >
       <i class="bwi bwi-lg bwi-files" aria-hidden="true"></i>
-    </span>
-    <span
+    </button>
+    <button
+      type="button"
       class="row-btn"
       [ngClass]="{ disabled: disabledByPolicy }"
+      [attr.disabled]="!disabledByPolicy ? '' : null"
       appStopClick
       appStopProp
       appA11yTitle="{{ 'removePassword' | i18n }}"
@@ -76,8 +81,9 @@
       *ngIf="s.password"
     >
       <i class="bwi bwi-lg bwi-undo" aria-hidden="true"></i>
-    </span>
-    <span
+    </button>
+    <button
+      type="button"
       class="row-btn"
       appStopClick
       appStopProp
@@ -85,6 +91,6 @@
       (click)="delete(s)"
     >
       <i class="bwi bwi-lg bwi-trash" aria-hidden="true"></i>
-    </span>
-  </div>
     </button>
+  </div>
+</div>

apps/browser/src/popup/scss/box.scss

@@ -482,7 +482,8 @@
         }
       }
 
-      &.disabled {
+      &.disabled,
+      &[disabled] {
         @include themify($themes) {
           color: themed("disabledIconColor");
           opacity: themed("disabledBoxOpacity");