🎨 Palette: Make scrollable data table keyboard accessible

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-09-06 - Make scrollable tables keyboard accessible
+**Learning:** Scrollable data tables that clip overflow content are inaccessible to keyboard users unless they are explicitly placed in the tab order (e.g., via tabindex=0) and given an accessible name (e.g., aria-label).
+**Action:** Always add tabindex="0", role="region", an aria-label, and explicit focus-visible styles to containers with overflow-x: auto.

site/src/pages/index.astro

@@ -25,7 +25,7 @@ const description =
 
   <h2>What is measured</h2>
 
-  <div class="scroller">
+  <div class="scroller" tabindex="0" role="region" aria-label="Measurement results">
     <table>
       <thead>
         <tr><th>Setting</th><th>Result</th></tr>

site/src/styles/global.css

@@ -211,6 +211,11 @@ li {
   margin: 0 0 1.1rem;
 }
 
+.scroller:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
 table {
   border-collapse: collapse;
   width: 100%;