🎨 Palette: [UX improvement] Add keyboard accessibility for scrollable tables and focus states

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-24 - Keyboard Accessibility for Scrollable Containers
+**Learning:** Scrollable overflow containers (like tables) require an explicit tabindex="0", role="region", and aria-label so keyboard users can navigate and scroll them.
+**Action:** Always inspect overflow containers and add these attributes with context-appropriate labels.

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

@@ -98,6 +98,11 @@ body {
   text-decoration: none;
 }
 
+*:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 .nav a:hover,
 .nav a:focus-visible {
   color: var(--accent);