feat: improve table accessibility and mobile expand tags

- Add sr-only headings for search/filter and results regions
- Add role=region and aria-label to .table-wrap for landmark navigation
- Add tabindex=0 and focus outline to .table-wrap for keyboard reachability
- Add sr-only text to empty Details column header
- Add role=button to expandable rows
- Add .expand-tags-mobile to show category/group tags in expand row on mobile
- Show .expand-tags-mobile via media query at <=900px breakpoint

Co-Authored-By: Claude <noreply@anthropic.com>

website/static/style.css

@@ -201,6 +201,11 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   overflow-x: auto;
 }
 
+.table-wrap:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
 .table {
   width: 100%;
   border-collapse: separate;
@@ -321,6 +326,20 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   line-height: 1.6;
 }
 
+.expand-tags-mobile {
+  display: none;
+  gap: 0.4rem;
+  margin-bottom: 0.4rem;
+}
+
+.expand-tag {
+  font-size: var(--text-xs);
+  color: oklch(45% 0.06 240);
+  background: var(--bg);
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+}
+
 .expand-also-see {
   margin-top: 0.25rem;
   font-size: var(--text-xs);
@@ -419,6 +438,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
 /* === Responsive === */
 @media (max-width: 900px) {
   .col-group { display: none; }
+  .expand-tags-mobile { display: flex; }
 }
 
 @media (max-width: 640px) {

website/templates/index.html

@@ -29,6 +29,7 @@
   </div>
 </header>
 
+<h2 class="sr-only">Search and filter</h2>
 <div class="controls">
   <div class="search-wrap">
     <svg
@@ -60,7 +61,8 @@
   </div>
 </div>
 
-<div class="table-wrap">
+<h2 class="sr-only">Results</h2>
+<div class="table-wrap" tabindex="0" role="region" aria-label="Libraries table">
   <table class="table">
     <thead>
       <tr>
@@ -69,13 +71,14 @@
         <th class="col-stars">GitHub Stars</th>
         <th class="col-cat">Category</th>
         <th class="col-group">Group</th>
-        <th class="col-arrow"></th>
+        <th class="col-arrow"><span class="sr-only">Details</span></th>
       </tr>
     </thead>
     <tbody>
       {% for entry in entries %}
       <tr
         class="row"
+        role="button"
         data-cat="{{ entry.category }}"
         data-group="{{ entry.group }}"
         tabindex="0"
@@ -108,6 +111,10 @@
         <td></td>
         <td colspan="5">
           <div class="expand-content">
+            <div class="expand-tags-mobile">
+              <span class="expand-tag">{{ entry.category }}</span>
+              <span class="expand-tag">{{ entry.group }}</span>
+            </div>
             {% if entry.description %}
             <div class="expand-desc">{{ entry.description | safe }}</div>
             {% endif %} {% if entry.also_see %}