[PM-19322] Risk Insights Accessibility (#16221)

* pm-19322 / replace a tag with button

* pm-19324 / focusable dirt cards

* pm-19324 / focus for all apps dirt cards

* pm-19325 / items in table focusable

* wrap dirt cards in button

* wrap span in button

* safari fixes

bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications.component.html

@@ -26,28 +26,42 @@
 <div class="tw-mt-4 tw-flex tw-flex-col" *ngIf="!(isLoading$ | async) && dataSource.data.length">
   <h2 class="tw-mb-6" bitTypography="h2">{{ "allApplications" | i18n }}</h2>
   <div class="tw-flex tw-gap-6">
-    <dirt-card
+    <button
-      #allAppsOrgAtRiskMembers
+      type="button"
-      class="tw-flex-1 tw-cursor-pointer"
+      class="tw-flex-1"
-      [ngClass]="{ 'tw-bg-primary-100': dataService.drawerInvokerId === 'allAppsOrgAtRiskMembers' }"
+      tabindex="0"
-      [title]="'atRiskMembers' | i18n"
-      [value]="applicationSummary.totalAtRiskMemberCount"
-      [maxValue]="applicationSummary.totalMemberCount"
       (click)="showOrgAtRiskMembers('allAppsOrgAtRiskMembers')"
     >
-    </dirt-card>
+      <dirt-card
-    <dirt-card
+        #allAppsOrgAtRiskMembers
-      #allAppsOrgAtRiskApplications
+        class="tw-w-full"
-      class="tw-flex-1 tw-cursor-pointer"
+        [ngClass]="{
-      [ngClass]="{
+          'tw-bg-primary-100': dataService.drawerInvokerId === 'allAppsOrgAtRiskMembers',
-        'tw-bg-primary-100': dataService.drawerInvokerId === 'allAppsOrgAtRiskApplications',
+        }"
-      }"
+        [title]="'atRiskMembers' | i18n"
-      [title]="'atRiskApplications' | i18n"
+        [value]="applicationSummary.totalAtRiskMemberCount"
-      [value]="applicationSummary.totalAtRiskApplicationCount"
+        [maxValue]="applicationSummary.totalMemberCount"
-      [maxValue]="applicationSummary.totalApplicationCount"
+      >
+      </dirt-card>
+    </button>
+    <button
+      type="button"
+      class="tw-flex-1"
+      tabindex="0"
       (click)="showOrgAtRiskApps('allAppsOrgAtRiskApplications')"
     >
-    </dirt-card>
+      <dirt-card
+        #allAppsOrgAtRiskApplications
+        class="tw-w-full"
+        [ngClass]="{
+          'tw-bg-primary-100': dataService.drawerInvokerId === 'allAppsOrgAtRiskApplications',
+        }"
+        [title]="'atRiskApplications' | i18n"
+        [value]="applicationSummary.totalAtRiskApplicationCount"
+        [maxValue]="applicationSummary.totalApplicationCount"
+      >
+      </dirt-card>
+    </button>
   </div>
   <div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4">
     <bit-search

bitwarden_license/bit-web/src/app/dirt/access-intelligence/app-table-row-scrollable.component.html

@@ -48,17 +48,14 @@
         <app-vault-icon *ngIf="row.ciphers.length > 0" [cipher]="row.ciphers[0]"></app-vault-icon>
       </td>
       <td
-        bitCell
         class="tw-cursor-pointer"
-        [ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }"
-        (click)="showAppAtRiskMembers(row.applicationName)"
-        (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
-        (keydown.space)="showAppAtRiskMembers(row.applicationName)"
-        role="button"
-        tabindex="0"
         [attr.aria-label]="'viewItem' | i18n"
+        [ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }"
+        bitCell
       >
-        <span>{{ row.applicationName }}</span>
+        <button type="button" tabindex="0" (click)="showAppAtRiskMembers(row.applicationName)">
+          <span>{{ row.applicationName }}</span>
+        </button>
       </td>
       <td
         bitCell

bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications.component.html

@@ -44,30 +44,42 @@
     </button>
   </div>
   <div class="tw-flex tw-gap-6">
-    <dirt-card
+    <button
-      #criticalAppsAtRiskMembers
+      type="button"
-      class="tw-flex-1 tw-cursor-pointer"
+      class="tw-flex-1"
-      [ngClass]="{
+      tabindex="0"
-        'tw-bg-primary-100': dataService.drawerInvokerId === 'criticalAppsAtRiskMembers',
-      }"
-      [title]="'atRiskMembers' | i18n"
-      [value]="applicationSummary.totalAtRiskMemberCount"
-      [maxValue]="applicationSummary.totalMemberCount"
       (click)="showOrgAtRiskMembers('criticalAppsAtRiskMembers')"
     >
-    </dirt-card>
+      <dirt-card
-    <dirt-card
+        #criticalAppsAtRiskMembers
-      #criticalAppsAtRiskApplications
+        class="tw-w-full"
-      class="tw-flex-1 tw-cursor-pointer"
+        [ngClass]="{
-      [ngClass]="{
+          'tw-bg-primary-100': dataService.drawerInvokerId === 'criticalAppsAtRiskMembers',
-        'tw-bg-primary-100': dataService.drawerInvokerId === 'criticalAppsAtRiskApplications',
+        }"
-      }"
+        [title]="'atRiskMembers' | i18n"
-      [title]="'atRiskApplications' | i18n"
+        [value]="applicationSummary.totalAtRiskMemberCount"
-      [value]="applicationSummary.totalAtRiskApplicationCount"
+        [maxValue]="applicationSummary.totalMemberCount"
-      [maxValue]="applicationSummary.totalApplicationCount"
+      >
+      </dirt-card>
+    </button>
+    <button
+      type="button"
+      class="tw-flex-1"
+      tabindex="0"
       (click)="showOrgAtRiskApps('criticalAppsAtRiskApplications')"
     >
-    </dirt-card>
+      <dirt-card
+        #criticalAppsAtRiskApplications
+        class="tw-w-full"
+        [ngClass]="{
+          'tw-bg-primary-100': dataService.drawerInvokerId === 'criticalAppsAtRiskApplications',
+        }"
+        [title]="'atRiskApplications' | i18n"
+        [value]="applicationSummary.totalAtRiskApplicationCount"
+        [maxValue]="applicationSummary.totalApplicationCount"
+      >
+      </dirt-card>
+    </button>
   </div>
   <div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4">
     <bit-search

bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html

@@ -15,15 +15,17 @@
       "dataLastUpdated" | i18n: (dataLastUpdated$ | async | date: "MMMM d, y 'at' h:mm a")
     }}</span>
     <span class="tw-flex tw-justify-center tw-w-16">
-      <a
+      <button
         *ngIf="!(isRefreshing$ | async)"
+        type="button"
         bitButton
-        buttonType="unstyled"
+        buttonType="secondary"
         class="tw-border-none !tw-font-normal tw-cursor-pointer !tw-py-0"
+        tabindex="0"
         [bitAction]="refreshData.bind(this)"
       >
         {{ "refresh" | i18n }}
-      </a>
+      </button>
       <span>
         <i
           *ngIf="isRefreshing$ | async"