From e25d43642b0e51bf8a72bb95105af81026b9e703 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Fri, 17 Apr 2026 14:24:14 -0400
Subject: [PATCH] chore(security): a11y polish on scan comparison and history
 (#665)

Add aria-label to the Scan history entry button, aria-labels to the
pagination chevrons, and aria-live polite + aria-label on the page
indicator so screen readers hear "Page 2 of 5" instead of "2 slash 5"
when navigating the comparison sheet and scan history list.
---
 frontend/src/components/ResourcesView.tsx       | 1 +
 frontend/src/components/ScanComparisonSheet.tsx | 9 +++++++--
 frontend/src/components/SecurityHistoryView.tsx | 9 +++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ResourcesView.tsx b/frontend/src/components/ResourcesView.tsx
index 65c66e8e..dea679ba 100644
--- a/frontend/src/components/ResourcesView.tsx
+++ b/frontend/src/components/ResourcesView.tsx
@@ -721,6 +721,7 @@ export default function ResourcesView() {
                             }));
                         }}
                         title="View completed vulnerability scans and compare them"
+                        aria-label="Open scan history"
                     >
                         <History className="w-4 h-4 mr-2" strokeWidth={1.5} />
                         Scan history
diff --git a/frontend/src/components/ScanComparisonSheet.tsx b/frontend/src/components/ScanComparisonSheet.tsx
index 7b644af1..46c8483f 100644
--- a/frontend/src/components/ScanComparisonSheet.tsx
+++ b/frontend/src/components/ScanComparisonSheet.tsx
@@ -251,17 +251,21 @@ export function ScanComparisonSheet({
                 {crossImage ? 'Shared' : 'Unchanged'} ({data.unchanged.length})
               </Button>
               {needsPagination && (
-                <div className="flex items-center gap-1 ml-auto">
+                <div className="flex items-center gap-1 ml-auto" aria-live="polite">
                   <Button
                     variant="ghost"
                     size="icon"
                     className="h-6 w-6"
                     onClick={() => setPage(Math.max(0, safePage - 1))}
                     disabled={safePage === 0}
+                    aria-label="Previous page"
                   >
                     <ChevronLeft className="w-4 h-4" strokeWidth={1.5} />
                   </Button>
-                  <span className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center">
+                  <span
+                    className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center"
+                    aria-label={`Page ${safePage + 1} of ${totalPages}`}
+                  >
                     {safePage + 1} / {totalPages}
                   </span>
                   <Button
@@ -270,6 +274,7 @@ export function ScanComparisonSheet({
                     className="h-6 w-6"
                     onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
                     disabled={safePage >= totalPages - 1}
+                    aria-label="Next page"
                   >
                     <ChevronRight className="w-4 h-4" strokeWidth={1.5} />
                   </Button>
diff --git a/frontend/src/components/SecurityHistoryView.tsx b/frontend/src/components/SecurityHistoryView.tsx
index 055ac0ff..70fe81e6 100644
--- a/frontend/src/components/SecurityHistoryView.tsx
+++ b/frontend/src/components/SecurityHistoryView.tsx
@@ -192,17 +192,21 @@ export function SecurityHistoryView() {
               />
             </div>
             {needsPagination && (
-              <div className="flex items-center gap-1 ml-auto">
+              <div className="flex items-center gap-1 ml-auto" aria-live="polite">
                 <Button
                   variant="ghost"
                   size="icon"
                   className="h-6 w-6"
                   onClick={() => setPage(Math.max(0, safePage - 1))}
                   disabled={safePage === 0}
+                  aria-label="Previous page"
                 >
                   <ChevronLeft className="w-4 h-4" strokeWidth={1.5} />
                 </Button>
-                <span className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center">
+                <span
+                  className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center"
+                  aria-label={`Page ${safePage + 1} of ${totalPages}`}
+                >
                   {safePage + 1} / {totalPages}
                 </span>
                 <Button
@@ -211,6 +215,7 @@ export function SecurityHistoryView() {
                   className="h-6 w-6"
                   onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
                   disabled={safePage >= totalPages - 1}
+                  aria-label="Next page"
                 >
                   <ChevronRight className="w-4 h-4" strokeWidth={1.5} />
                 </Button>