From 4bb9c1240b64a15b5a96769f57553491809d4cc6 Mon Sep 17 00:00:00 2001 From: Vinta Chen Date: Sun, 22 Mar 2026 16:10:14 +0800 Subject: [PATCH] fix(website): accessibility and defensive layout improvements - Add aria-sort attributes to table header on sort state changes - Replace .table-wrap:focus outline:none with focus-visible outline - Move noscript message above the fold into main, before content - Upgrade hero-topbar div to nav with aria-label for landmark semantics - Remove role=button from tr elements (invalid ARIA on native elements) - Fix back-to-top button label and text (was labelled 'Back to search') - Switch font-size from 16px to 100% to respect user browser preferences - Add overflow-wrap and word-break to .col-name and description cells Co-Authored-By: Claude --- website/static/main.js | 3 +++ website/static/style.css | 11 ++++++++--- website/templates/base.html | 15 +++++++++------ website/templates/index.html | 13 ++++++------- 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/website/static/main.js b/website/static/main.js index c1d8d019..83d5be04 100644 --- a/website/static/main.js +++ b/website/static/main.js @@ -212,6 +212,9 @@ function updateSortIndicators() { th.classList.remove('sort-asc', 'sort-desc'); if (activeSort && th.dataset.sort === activeSort.col) { th.classList.add('sort-' + activeSort.order); + th.setAttribute('aria-sort', activeSort.order === 'asc' ? 'ascending' : 'descending'); + } else { + th.removeAttribute('aria-sort'); } }); } diff --git a/website/static/style.css b/website/static/style.css index fbccd2d2..26349eb3 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -38,7 +38,7 @@ } html { - font-size: 16px; + font-size: 100%; scroll-behavior: smooth; } @@ -523,8 +523,9 @@ kbd { scroll-margin-top: 1rem; } -.table-wrap:focus { - outline: none; +.table-wrap:focus-visible { + outline: 2px solid var(--accent); + outline-offset: -2px; } .table { @@ -617,6 +618,8 @@ kbd { color: var(--ink); font-size: clamp(1rem, 1.5vw, 1.08rem); font-weight: 700; + overflow-wrap: break-word; + word-break: break-word; } .col-name > a:hover { @@ -734,6 +737,8 @@ th[data-sort].sort-asc::after { color: var(--ink-soft); line-height: 1.7; text-wrap: pretty; + overflow-wrap: break-word; + word-break: break-word; animation: expand-in 220ms cubic-bezier(0.22, 1, 0.36, 1); } diff --git a/website/templates/base.html b/website/templates/base.html index cf48cfd5..317594d0 100644 --- a/website/templates/base.html +++ b/website/templates/base.html @@ -41,7 +41,15 @@ -
{% block content %}{% endblock %}
+ {% block header %}{% endblock %} +
+ + {% block content %}{% endblock %} +
@@ -69,11 +77,6 @@
- diff --git a/website/templates/index.html b/website/templates/index.html index 6abd906a..7168ba88 100644 --- a/website/templates/index.html +++ b/website/templates/index.html @@ -1,10 +1,10 @@ -{% extends "base.html" %} {% block content %} +{% extends "base.html" %} {% block header %}
-
+
+
@@ -68,7 +68,7 @@ Jump to the list
- +{% endblock %} {% block content %}
@@ -129,8 +129,8 @@ Last Commit Tags - @@ -139,7 +139,6 @@ {% for entry in entries %}