From 1de8682b61c6c56e40918d95b07b5d765d32236a Mon Sep 17 00:00:00 2001
From: Oleh Omelchenko <ptrvtch@protonmail.com>
Date: Thu, 11 Jun 2026 19:28:12 +0300
Subject: [PATCH] Datasets: make preview scroll region keyboard-reachable

---
 src/app/components/DatasetsModal.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/components/DatasetsModal.tsx b/src/app/components/DatasetsModal.tsx
index 724bbcd..dfe4cfd 100644
--- a/src/app/components/DatasetsModal.tsx
+++ b/src/app/components/DatasetsModal.tsx
@@ -349,11 +349,15 @@ function DatasetDetail({
         <h4 className={styles.sectionTitle}>Preview</h4>
         {previewRows ? (
           <>
-            {/* TODO: a11y — this scroll container isn't keyboard-reachable; when the
-                preview overflows, keyboard-only users can't scroll it (WCAG 2.1.1).
-                A council pass should decide the pattern (tabindex=0 + aria-label region,
-                or a different overflow treatment) before we lean on it more. */}
-            <div className={styles.previewTableWrap}>
+            {/* A scrollable region needs a tab stop + name so keyboard-only users can
+                reach and scroll it when the preview overflows (WCAG 2.1.1; WAI-ARIA APG
+                — a focusable `region` with an accessible name). */}
+            <div
+              className={styles.previewTableWrap}
+              role="region"
+              aria-label={`Data preview for ${dataset.name}`}
+              tabIndex={0}
+            >
               <table className={styles.previewTable}>
                 <thead>
                   <tr>