Update at-risk cards with accessibility improvements (#17427)

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

@@ -5,42 +5,85 @@
   <div class="tw-mt-4 tw-flex tw-flex-col">
     <h2 class="tw-mb-6" bitTypography="h2">{{ "allApplications" | i18n }}</h2>
     <div class="tw-flex tw-gap-6">
-      <button
+      <div
-        type="button"
+        role="region"
-        class="tw-flex-1"
+        [attr.aria-label]="'atRiskMembers' | i18n"
-        tabindex="0"
+        class="tw-flex-1 tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg tw-p-4"
-        (click)="dataService.setDrawerForOrgAtRiskMembers('allAppsOrgAtRiskMembers')"
-      >
-        <dirt-card
-          #allAppsOrgAtRiskMembers
-          class="tw-w-full"
         [ngClass]="{
           'tw-bg-primary-100': drawerDetails.invokerId === 'allAppsOrgAtRiskMembers',
         }"
-          [title]="'atRiskMembers' | i18n"
-          [value]="applicationSummary.totalAtRiskMemberCount"
-          [maxValue]="applicationSummary.totalMemberCount"
       >
-        </dirt-card>
+        <div class="tw-flex tw-flex-col tw-gap-1">
-      </button>
+          <span bitTypography="h6" class="tw-flex tw-text-main" id="allAppsOrgAtRiskMembersLabel">{{
+            "atRiskMembers" | i18n
+          }}</span>
+          <div class="tw-flex tw-items-baseline tw-gap-2" role="status" aria-live="polite">
+            <span
+              bitTypography="h3"
+              class="!tw-mb-0"
+              aria-describedby="allAppsOrgAtRiskMembersLabel"
+              >{{ applicationSummary.totalAtRiskMemberCount }}</span
+            >
+            <span bitTypography="body2">{{
+              "cardMetrics" | i18n: applicationSummary.totalMemberCount
+            }}</span>
+          </div>
+          <div class="tw-flex tw-items-baseline tw-mt-1 tw-gap-2">
+            <p bitTypography="body1" class="tw-mb-0">
               <button
                 type="button"
-        class="tw-flex-1"
+                bitLink
-        tabindex="0"
+                [attr.aria-label]="('viewAtRiskMembers' | i18n) + ': ' + ('atRiskMembers' | i18n)"
-        (click)="dataService.setDrawerForOrgAtRiskApps('allAppsOrgAtRiskApplications')"
+                (click)="dataService.setDrawerForOrgAtRiskMembers('allAppsOrgAtRiskMembers')"
               >
-        <dirt-card
+                {{ "viewAtRiskMembers" | i18n }}
-          #allAppsOrgAtRiskApplications
+              </button>
-          class="tw-w-full"
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        role="region"
+        [attr.aria-label]="'atRiskApplications' | i18n"
+        class="tw-flex-1 tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg tw-p-4"
         [ngClass]="{
           'tw-bg-primary-100': drawerDetails.invokerId === 'allAppsOrgAtRiskApplications',
         }"
-          [title]="'atRiskApplications' | i18n"
-          [value]="applicationSummary.totalAtRiskApplicationCount"
-          [maxValue]="applicationSummary.totalApplicationCount"
       >
-        </dirt-card>
+        <div class="tw-flex tw-flex-col tw-gap-1">
+          <span
+            bitTypography="h6"
+            class="tw-flex tw-text-main"
+            id="allAppsOrgAtRiskApplicationsLabel"
+            >{{ "atRiskApplications" | i18n }}</span
+          >
+          <div class="tw-flex tw-items-baseline tw-gap-2" role="status" aria-live="polite">
+            <span
+              bitTypography="h3"
+              class="!tw-mb-0"
+              aria-describedby="allAppsOrgAtRiskApplicationsLabel"
+              >{{ applicationSummary.totalAtRiskApplicationCount }}</span
+            >
+            <span bitTypography="body2">{{
+              "cardMetrics" | i18n: applicationSummary.totalApplicationCount
+            }}</span>
+          </div>
+          <div class="tw-flex tw-items-baseline tw-mt-1 tw-gap-2">
+            <p bitTypography="body1" class="tw-mb-0">
+              <button
+                type="button"
+                bitLink
+                [attr.aria-label]="
+                  ('viewAtRiskApplications' | i18n) + ': ' + ('atRiskApplications' | i18n)
+                "
+                (click)="dataService.setDrawerForOrgAtRiskApps('allAppsOrgAtRiskApplications')"
+              >
+                {{ "viewAtRiskApplications" | i18n }}
               </button>
+            </p>
+          </div>
+        </div>
+      </div>
     </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/all-applications/all-applications.component.ts

@@ -18,12 +18,13 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
   IconButtonModule,
+  LinkModule,
   NoItemsModule,
   SearchModule,
   TableDataSource,
   ToastService,
+  TypographyModule,
 } from "@bitwarden/components";
-import { CardComponent } from "@bitwarden/dirt-card";
 import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module";
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
 import { PipesModule } from "@bitwarden/web-vault/app/vault/individual-vault/pipes/pipes.module";
@@ -39,13 +40,14 @@ import { ApplicationsLoadingComponent } from "../shared/risk-insights-loading.co
   imports: [
     ApplicationsLoadingComponent,
     HeaderModule,
-    CardComponent,
+    LinkModule,
     SearchModule,
     PipesModule,
     NoItemsModule,
     SharedModule,
     AppTableRowScrollableComponent,
     IconButtonModule,
+    TypographyModule,
   ],
 })
 export class AllApplicationsComponent implements OnInit {

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

@@ -1,3 +1,4 @@
+@let drawerDetails = dataService.drawerDetails$ | async;
 <div class="tw-mt-4 tw-flex tw-flex-col">
   <div class="tw-flex tw-justify-between tw-mb-4">
     <h2 bitTypography="h2">{{ "criticalApplications" | i18n }}</h2>
@@ -16,44 +17,86 @@
       }}
     </button>
   </div>
-  @if (dataService.drawerDetails$ | async; as drawerDetails) {
   <div class="tw-flex tw-gap-6">
-      <button
+    <div
-        type="button"
+      role="region"
-        class="tw-flex-1"
+      [attr.aria-label]="'atRiskMembers' | i18n"
-        tabindex="0"
+      class="tw-flex-1 tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg tw-p-4"
-        (click)="dataService.setDrawerForCriticalAtRiskMembers('criticalAppsAtRiskMembers')"
-      >
-        <dirt-card
-          #criticalAppsAtRiskMembers
-          class="tw-w-full"
       [ngClass]="{
         'tw-bg-primary-100': drawerDetails.invokerId === 'criticalAppsAtRiskMembers',
       }"
-          [title]="'atRiskMembers' | i18n"
-          [value]="applicationSummary.totalAtRiskMemberCount"
-          [maxValue]="applicationSummary.totalMemberCount"
     >
-        </dirt-card>
+      <div class="tw-flex tw-flex-col tw-gap-1">
-      </button>
+        <span bitTypography="h6" class="tw-flex tw-text-main" id="criticalAppsAtRiskMembersLabel">{{
+          "atRiskMembers" | i18n
+        }}</span>
+        <div class="tw-flex tw-items-baseline tw-gap-2" role="status" aria-live="polite">
+          <span
+            bitTypography="h3"
+            class="!tw-mb-0"
+            aria-describedby="criticalAppsAtRiskMembersLabel"
+            >{{ applicationSummary.totalAtRiskMemberCount }}</span
+          >
+          <span bitTypography="body2">{{
+            "cardMetrics" | i18n: applicationSummary.totalMemberCount
+          }}</span>
+        </div>
+        <div class="tw-flex tw-items-baseline tw-mt-1 tw-gap-2">
+          <p bitTypography="body1" class="tw-mb-0">
             <button
               type="button"
-        class="tw-flex-1"
+              bitLink
-        tabindex="0"
+              [attr.aria-label]="('viewAtRiskMembers' | i18n) + ': ' + ('atRiskMembers' | i18n)"
-        (click)="dataService.setDrawerForCriticalAtRiskApps('criticalAppsAtRiskApplications')"
+              (click)="dataService.setDrawerForCriticalAtRiskMembers('criticalAppsAtRiskMembers')"
             >
-        <dirt-card
+              {{ "viewAtRiskMembers" | i18n }}
-          #criticalAppsAtRiskApplications
+            </button>
-          class="tw-w-full"
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      role="region"
+      [attr.aria-label]="'atRiskApplications' | i18n"
+      class="tw-flex-1 tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg tw-p-4"
       [ngClass]="{
         'tw-bg-primary-100': drawerDetails.invokerId === 'criticalAppsAtRiskApplications',
       }"
-          [title]="'atRiskApplications' | i18n"
-          [value]="applicationSummary.totalAtRiskApplicationCount"
-          [maxValue]="applicationSummary.totalApplicationCount"
     >
-        </dirt-card>
+      <div class="tw-flex tw-flex-col tw-gap-1">
+        <span
+          bitTypography="h6"
+          class="tw-flex tw-text-main"
+          id="criticalAppsAtRiskApplicationsLabel"
+          >{{ "atRiskApplications" | i18n }}</span
+        >
+        <div class="tw-flex tw-items-baseline tw-gap-2" role="status" aria-live="polite">
+          <span
+            bitTypography="h3"
+            class="!tw-mb-0"
+            aria-describedby="criticalAppsAtRiskApplicationsLabel"
+            >{{ applicationSummary.totalAtRiskApplicationCount }}</span
+          >
+          <span bitTypography="body2">{{
+            "cardMetrics" | i18n: applicationSummary.totalApplicationCount
+          }}</span>
+        </div>
+        <div class="tw-flex tw-items-baseline tw-mt-1 tw-gap-2">
+          <p bitTypography="body1" class="tw-mb-0">
+            <button
+              type="button"
+              bitLink
+              [attr.aria-label]="
+                ('viewAtRiskApplications' | i18n) + ': ' + ('atRiskApplications' | i18n)
+              "
+              (click)="dataService.setDrawerForCriticalAtRiskApps('criticalAppsAtRiskApplications')"
+            >
+              {{ "viewAtRiskApplications" | i18n }}
             </button>
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
   <div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4">
     <bit-search
@@ -71,5 +114,4 @@
     [showAppAtRiskMembers]="showAppAtRiskMembers"
     [unmarkAsCritical]="removeCriticalApplication"
   ></app-table-row-scrollable>
-  }
 </div>

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

@@ -17,8 +17,14 @@ import { createNewSummaryData } from "@bitwarden/bit-common/dirt/reports/risk-in
 import { OrganizationReportSummary } from "@bitwarden/bit-common/dirt/reports/risk-insights/models/report-models";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { OrganizationId } from "@bitwarden/common/types/guid";
-import { NoItemsModule, SearchModule, TableDataSource, ToastService } from "@bitwarden/components";
+import {
-import { CardComponent } from "@bitwarden/dirt-card";
+  LinkModule,
+  NoItemsModule,
+  SearchModule,
+  TableDataSource,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
 import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module";
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
 import { PipesModule } from "@bitwarden/web-vault/app/vault/individual-vault/pipes/pipes.module";
@@ -33,13 +39,14 @@ import { AccessIntelligenceSecurityTasksService } from "../shared/security-tasks
   selector: "dirt-critical-applications",
   templateUrl: "./critical-applications.component.html",
   imports: [
-    CardComponent,
     HeaderModule,
+    LinkModule,
     SearchModule,
     NoItemsModule,
     PipesModule,
     SharedModule,
     AppTableRowScrollableComponent,
+    TypographyModule,
   ],
 })
 export class CriticalApplicationsComponent implements OnInit {