Mirrors_Framework/awesome-python
1
0
Fork 0
mirror of https://github.com/vinta/awesome-python.git synced 2026-03-25 05:33:05 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(a11y): wrap sort column headers in button elements

Browse Source 
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>
This commit is contained in:
Vinta Chen
2026-03-24 12:38:19 +08:00
parent d58c915a0b
commit 86885bc67a
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
website/static/style.css
View File

@@ -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;

6
website/templates/index.html
View File

@@ -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">