From 86885bc67a8666710904ab2c70decb85b7edd099 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Tue, 24 Mar 2026 12:38:19 +0800
Subject: [PATCH] fix(a11y): wrap sort column headers in button elements

Table sort triggers were bare th elements, which are not keyboard
focusable or announced as interactive by screen readers. Replace with
button elements inside th so keyboard users can activate sorting and
get proper focus-visible ring.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/style.css     | 15 ++++++++++++---
 website/templates/index.html |  6 +++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/website/static/style.css b/website/static/style.css
index 81352e41..84187702 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -624,16 +624,25 @@ kbd {
   text-underline-offset: 0.2em;
 }
 
-th[data-sort] {
+.sort-btn {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
   cursor: pointer;
   user-select: none;
-  transition: color 180ms ease;
 }
 
-th[data-sort]:hover {
+.sort-btn:hover {
   color: var(--accent-deep);
 }
 
+.sort-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 th[data-sort]::after {
   content: " \2193";
   opacity: 0;
diff --git a/website/templates/index.html b/website/templates/index.html
index 9fd8db40..9f8b1e24 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -114,9 +114,9 @@
       <thead>
         <tr>
           <th class="col-num"><span class="sr-only">#</span></th>
-          <th class="col-name" data-sort="name">Project Name</th>
-          <th class="col-stars" data-sort="stars">GitHub Stars</th>
-          <th class="col-commit" data-sort="commit-time">Last Commit</th>
+          <th class="col-name" data-sort="name"><button type="button" class="sort-btn">Project Name</button></th>
+          <th class="col-stars" data-sort="stars"><button type="button" class="sort-btn">GitHub Stars</button></th>
+          <th class="col-commit" data-sort="commit-time"><button type="button" class="sort-btn">Last Commit</button></th>
           <th class="col-cat">Tags</th>
           <th class="col-arrow">
             <button class="back-to-top" aria-label="Back to top">