gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-07-31 06:02:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(security): a11y polish on scan comparison and history (#665)

Browse Source 
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.
This commit is contained in:
Anso
2026-04-17 14:24:14 -04:00
committed by GitHub
parent 08b63f216e
commit e25d43642b
3 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ResourcesView.tsx
+1
View File
@@ -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
frontend/src/components/ScanComparisonSheet.tsx
+7 -2
View File
@@ -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>
frontend/src/components/SecurityHistoryView.tsx
+7 -2
View File
@@ -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>