[PS-329] A11y: make view, copy, etc controls for ciphers/items keyboard focusable/operable, add screen reader improvements (#2507)

src/popup/components/action-buttons.component.html

@@ -1,4 +1,5 @@
-<span
+<button
+  type="button"
   class="row-btn"
   (click)="view()"
   appStopClick
@@ -7,9 +8,10 @@
   *ngIf="showView"
 >
   <i class="bwi bwi-lg bwi-list-alt" aria-hidden="true"></i>
-</span>
+</button>
 <ng-container *ngIf="cipher.type === cipherType.Login">
-  <span
+  <button
+    type="button"
     class="row-btn"
     appStopClick
     appStopProp
@@ -17,71 +19,84 @@
     (click)="launchCipher()"
     *ngIf="!showView"
     [ngClass]="{ disabled: !cipher.login.canLaunch }"
+    [attr.disabled]="!cipher.login.canLaunch ? '' : null"
   >
     <i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
-  </span>
+  </button>
-  <span
+  <button
+    type="button"
     class="row-btn"
     appStopClick
     appStopProp
     appA11yTitle="{{ 'copyUsername' | i18n }}"
     (click)="copy(cipher, cipher.login.username, 'username', 'Username')"
     [ngClass]="{ disabled: !cipher.login.username }"
+    [attr.disabled]="!cipher.login.username ? '' : null"
   >
     <i class="bwi bwi-lg bwi-user" aria-hidden="true"></i>
-  </span>
+  </button>
-  <span
+  <button
+    type="button"
     class="row-btn"
     appStopClick
     appStopProp
     appA11yTitle="{{ 'copyPassword' | i18n }}"
     (click)="copy(cipher, cipher.login.password, 'password', 'Password')"
     [ngClass]="{ disabled: !cipher.login.password || !cipher.viewPassword }"
+    [attr.disabled]="!cipher.login.password ? '' : null"
   >
     <i class="bwi bwi-lg bwi-key" aria-hidden="true"></i>
-  </span>
+  </button>
-  <span
+  <button
+    type="button"
     class="row-btn"
     appStopClick
     appStopProp
     appA11yTitle="{{ 'copyVerificationCode' | i18n }}"
     (click)="copy(cipher, cipher.login.totp, 'verificationCodeTotp', 'TOTP')"
     [ngClass]="{ disabled: !displayTotpCopyButton(cipher) }"
+    [attr.disabled]="!displayTotpCopyButton(cipher) ? '' : null"
   >
     <i class="bwi bwi-lg bwi-clock" aria-hidden="true"></i>
-  </span>
+  </button>
 </ng-container>
 <ng-container *ngIf="cipher.type === cipherType.Card">
-  <span
+  <button
+    type="button"
     class="row-btn"
     appStopClick
     appStopProp
     appA11yTitle="{{ 'copyNumber' | i18n }}"
     (click)="copy(cipher, cipher.card.number, 'number', 'Card Number')"
     [ngClass]="{ disabled: !cipher.card.number }"
+    [attr.disabled]="!cipher.card.number ? '' : null"
   >
     <i class="bwi bwi-lg bwi-hashtag" aria-hidden="true"></i>
-  </span>
+  </button>
-  <span
+  <button
+    type="button"
     class="row-btn"
     appStopClick
     appStopProp
     appA11yTitle="{{ 'copySecurityCode' | i18n }}"
     (click)="copy(cipher, cipher.card.code, 'securityCode', 'Security Code')"
     [ngClass]="{ disabled: !cipher.card.code }"
+    [attr.disabled]="!cipher.card.code ? '' : null"
   >
     <i class="bwi bwi-lg bwi-key" aria-hidden="true"></i>
-  </span>
+  </button>
 </ng-container>
 <ng-container *ngIf="cipher.type === cipherType.SecureNote">
-  <span
+  <button
+    type="button"
     class="row-btn"
     appStopClick
     appStopProp
     appA11yTitle="{{ 'copyNote' | i18n }}"
     (click)="copy(cipher, cipher.notes, 'note', 'Note')"
     [ngClass]="{ disabled: !cipher.notes }"
+    [attr.disabled]="!cipher.notes ? '' : null"
   >
     <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-  </span>
+  </button>
 </ng-container>

src/popup/components/cipher-row.component.html

@@ -1,13 +1,17 @@
-<button
+<div
-  type="button"
+  role="group"
-  (click)="selectCipher(cipher)"
+  appA11yTitle="{{ cipher.name }}"
-  (dblclick)="launchCipher(cipher)"
-  appStopClick
-  title="{{ title }} - {{ cipher.name }}"
   class="box-content-row box-content-row-flex virtual-scroll-item"
   [ngClass]="{ 'override-last': !last }"
 >
-  <div class="row-main">
+  <button
+    type="button"
+    (click)="selectCipher(cipher)"
+    (dblclick)="launchCipher(cipher)"
+    appStopClick
+    title="{{ title }} - {{ cipher.name }}"
+    class="row-main"
+  >
     <app-vault-icon [cipher]="cipher"></app-vault-icon>
     <div class="row-main-content">
       <span class="text">
@@ -31,7 +35,7 @@
       </span>
       <span class="detail">{{ cipher.subTitle }}</span>
     </div>
-  </div>
+  </button>
   <app-action-buttons
     [cipher]="cipher"
     [showView]="showView"
@@ -40,4 +44,4 @@
     class="action-buttons"
   >
   </app-action-buttons>
-</button>
+</div>

src/popup/scss/box.scss

@@ -136,6 +136,7 @@
         .row-main {
           display: flex;
           min-width: 0;
+          align-items: normal;
 
           .row-main-content {
             min-width: 0;
@@ -283,6 +284,7 @@
   .text,
   .detail {
     display: block;
+    text-align: left;
 
     @include themify($themes) {
       color: themed("textColor");