From 4e2d8988f2aa1950f04b92d646bbbc727f0c1d3f Mon Sep 17 00:00:00 2001
From: Maximilian Power <mpower@bitwarden.com>
Date: Mon, 17 Nov 2025 20:08:15 +0100
Subject: [PATCH] Update at-risk cards with accessibility improvements (#17427)

---
 .../all-applications.component.html           | 111 +++++++++----
 .../all-applications.component.ts             |   6 +-
 .../critical-applications.component.html      | 148 +++++++++++-------
 .../critical-applications.component.ts        |  13 +-
 4 files changed, 186 insertions(+), 92 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/all-applications.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/all-applications.component.html
index 26beaf349a9..b1c2faa4f05 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/all-applications.component.html
+++ b/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
-        type="button"
-        class="tw-flex-1"
-        tabindex="0"
-        (click)="dataService.setDrawerForOrgAtRiskMembers('allAppsOrgAtRiskMembers')"
+      <div
+        role="region"
+        [attr.aria-label]="'atRiskMembers' | 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 === '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>
-      </button>
-      <button
-        type="button"
-        class="tw-flex-1"
-        tabindex="0"
-        (click)="dataService.setDrawerForOrgAtRiskApps('allAppsOrgAtRiskApplications')"
+        <div class="tw-flex tw-flex-col tw-gap-1">
+          <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"
+                bitLink
+                [attr.aria-label]="('viewAtRiskMembers' | i18n) + ': ' + ('atRiskMembers' | i18n)"
+                (click)="dataService.setDrawerForOrgAtRiskMembers('allAppsOrgAtRiskMembers')"
+              >
+                {{ "viewAtRiskMembers" | i18n }}
+              </button>
+            </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',
+        }"
       >
-        <dirt-card
-          #allAppsOrgAtRiskApplications
-          class="tw-w-full"
-          [ngClass]="{
-            'tw-bg-primary-100': drawerDetails.invokerId === 'allAppsOrgAtRiskApplications',
-          }"
-          [title]="'atRiskApplications' | i18n"
-          [value]="applicationSummary.totalAtRiskApplicationCount"
-          [maxValue]="applicationSummary.totalApplicationCount"
-        >
-        </dirt-card>
-      </button>
+        <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
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/all-applications.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/all-applications.component.ts
index b4e2bf466b9..acad2901ba4 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/all-applications.component.ts
+++ b/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 {
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.html
index 04c7bd23797..332a91d28c1 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.html
+++ b/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,60 +17,101 @@
       }}
     </button>
   </div>
-  @if (dataService.drawerDetails$ | async; as drawerDetails) {
-    <div class="tw-flex tw-gap-6">
-      <button
-        type="button"
-        class="tw-flex-1"
-        tabindex="0"
-        (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>
-      </button>
-      <button
-        type="button"
-        class="tw-flex-1"
-        tabindex="0"
-        (click)="dataService.setDrawerForCriticalAtRiskApps('criticalAppsAtRiskApplications')"
-      >
-        <dirt-card
-          #criticalAppsAtRiskApplications
-          class="tw-w-full"
-          [ngClass]="{
-            'tw-bg-primary-100': drawerDetails.invokerId === 'criticalAppsAtRiskApplications',
-          }"
-          [title]="'atRiskApplications' | i18n"
-          [value]="applicationSummary.totalAtRiskApplicationCount"
-          [maxValue]="applicationSummary.totalApplicationCount"
-        >
-        </dirt-card>
-      </button>
+  <div class="tw-flex tw-gap-6">
+    <div
+      role="region"
+      [attr.aria-label]="'atRiskMembers' | 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 === 'criticalAppsAtRiskMembers',
+      }"
+    >
+      <div class="tw-flex tw-flex-col tw-gap-1">
+        <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"
+              bitLink
+              [attr.aria-label]="('viewAtRiskMembers' | i18n) + ': ' + ('atRiskMembers' | i18n)"
+              (click)="dataService.setDrawerForCriticalAtRiskMembers('criticalAppsAtRiskMembers')"
+            >
+              {{ "viewAtRiskMembers" | i18n }}
+            </button>
+          </p>
+        </div>
+      </div>
     </div>
-    <div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4">
-      <bit-search
-        [placeholder]="'searchApps' | i18n"
-        class="tw-grow"
-        [formControl]="searchControl"
-      ></bit-search>
+    <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',
+      }"
+    >
+      <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
+      [placeholder]="'searchApps' | i18n"
+      class="tw-grow"
+      [formControl]="searchControl"
+    ></bit-search>
+  </div>
 
-    <app-table-row-scrollable
-      [dataSource]="dataSource"
-      [showRowCheckBox]="false"
-      [showRowMenuForCriticalApps]="true"
-      [openApplication]="drawerDetails.invokerId || ''"
-      [showAppAtRiskMembers]="showAppAtRiskMembers"
-      [unmarkAsCritical]="removeCriticalApplication"
-    ></app-table-row-scrollable>
-  }
+  <app-table-row-scrollable
+    [dataSource]="dataSource"
+    [showRowCheckBox]="false"
+    [showRowMenuForCriticalApps]="true"
+    [openApplication]="drawerDetails.invokerId || ''"
+    [showAppAtRiskMembers]="showAppAtRiskMembers"
+    [unmarkAsCritical]="removeCriticalApplication"
+  ></app-table-row-scrollable>
 </div>
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.ts
index 7b7ca8c42da..1ea745929db 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.ts
+++ b/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 { CardComponent } from "@bitwarden/dirt-card";
+import {
+  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 {