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

fix(website): accessibility and defensive layout improvements

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-03-22 16:10:14 +08:00
parent cd3c8ad076
commit 4bb9c1240b
4 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/static/main.js
+3
View File
@@ -212,6 +212,9 @@ function updateSortIndicators() {
th.classList.remove('sort-asc', 'sort-desc'); th.classList.remove('sort-asc', 'sort-desc');
if (activeSort && th.dataset.sort === activeSort.col) { if (activeSort && th.dataset.sort === activeSort.col) {
th.classList.add('sort-' + activeSort.order); th.classList.add('sort-' + activeSort.order);
th.setAttribute('aria-sort', activeSort.order === 'asc' ? 'ascending' : 'descending');
} else {
th.removeAttribute('aria-sort');
} }
}); });
} }
website/static/style.css
+8 -3
View File
@@ -38,7 +38,7 @@
} }
html { html {
font-size: 16px; font-size: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@@ -523,8 +523,9 @@ kbd {
scroll-margin-top: 1rem; scroll-margin-top: 1rem;
} }
.table-wrap:focus { .table-wrap:focus-visible {
outline: none; outline: 2px solid var(--accent);
outline-offset: -2px;
} }
.table { .table {
@@ -617,6 +618,8 @@ kbd {
color: var(--ink); color: var(--ink);
font-size: clamp(1rem, 1.5vw, 1.08rem); font-size: clamp(1rem, 1.5vw, 1.08rem);
font-weight: 700; font-weight: 700;
overflow-wrap: break-word;
word-break: break-word;
} }
.col-name > a:hover { .col-name > a:hover {
@@ -734,6 +737,8 @@ th[data-sort].sort-asc::after {
color: var(--ink-soft); color: var(--ink-soft);
line-height: 1.7; line-height: 1.7;
text-wrap: pretty; text-wrap: pretty;
overflow-wrap: break-word;
word-break: break-word;
animation: expand-in 220ms cubic-bezier(0.22, 1, 0.36, 1); animation: expand-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
} }
website/templates/base.html
+9 -6
View File
@@ -41,7 +41,15 @@
<body> <body>
<a href="#content" class="skip-link">Skip to content</a> <a href="#content" class="skip-link">Skip to content</a>
<main id="content">{% block content %}{% endblock %}</main> {% block header %}{% endblock %}
<main id="content">
<noscript
><p class="noscript-msg">
Search and filtering require JavaScript.
</p></noscript
>
{% block content %}{% endblock %}
</main>
<footer class="footer"> <footer class="footer">
<div class="footer-left"> <div class="footer-left">
@@ -69,11 +77,6 @@
</div> </div>
</footer> </footer>
<noscript
><p class="noscript-msg">
Search and filtering require JavaScript.
</p></noscript
>
<script src="/static/main.js"></script> <script src="/static/main.js"></script>
</body> </body>
</html> </html>
website/templates/index.html
+6 -7
View File
@@ -1,10 +1,10 @@
{% extends "base.html" %} {% block content %} {% extends "base.html" %} {% block header %}
<header class="hero"> <header class="hero">
<div class="hero-sheen" aria-hidden="true"></div> <div class="hero-sheen" aria-hidden="true"></div>
<div class="hero-noise" aria-hidden="true"></div> <div class="hero-noise" aria-hidden="true"></div>
<div class="hero-shell"> <div class="hero-shell">
<div class="hero-topbar"> <nav class="hero-topbar" aria-label="Site">
<span class="hero-brand-mini">Awesome Python</span> <span class="hero-brand-mini">Awesome Python</span>
<div class="hero-topbar-actions"> <div class="hero-topbar-actions">
<a <a
@@ -15,7 +15,7 @@
>Submit a project</a >Submit a project</a
> >
</div> </div>
</div> </nav>
<div class="hero-grid"> <div class="hero-grid">
<div class="hero-copy"> <div class="hero-copy">
@@ -68,7 +68,7 @@
<a href="#library-index" class="hero-scrollcue">Jump to the list</a> <a href="#library-index" class="hero-scrollcue">Jump to the list</a>
</div> </div>
</header> </header>
{% endblock %} {% block content %}
<section class="results-section" id="library-index"> <section class="results-section" id="library-index">
<div class="results-intro section-shell" data-reveal> <div class="results-intro section-shell" data-reveal>
<div> <div>
@@ -129,8 +129,8 @@
<th class="col-commit" data-sort="commit-time">Last Commit</th> <th class="col-commit" data-sort="commit-time">Last Commit</th>
<th class="col-cat">Tags</th> <th class="col-cat">Tags</th>
<th class="col-arrow"> <th class="col-arrow">
<button class="back-to-top" aria-label="Back to search"> <button class="back-to-top" aria-label="Back to top">
Search Top &uarr;
</button> </button>
</th> </th>
</tr> </tr>
@@ -139,7 +139,6 @@
{% for entry in entries %} {% for entry in entries %}
<tr <tr
class="row" class="row"
role="button"
data-cats="{{ entry.categories | join('||') }}{% if entry.source_type == 'Built-in' %}||Built-in{% endif %}" data-cats="{{ entry.categories | join('||') }}{% if entry.source_type == 'Built-in' %}||Built-in{% endif %}"
data-groups="{{ entry.groups | join('||') }}" data-groups="{{ entry.groups | join('||') }}"
tabindex="0" tabindex="0"