Mirrors_Framework/awesome-python
1
0
Fork 0
mirror of https://github.com/vinta/awesome-python.git synced 2026-03-23 13:12:59 +08:00
Code Issues Actions 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

3
website/static/main.js
View File

@@ -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');
}
});
}

11
website/static/style.css
View File

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

15
website/templates/base.html
View File

@@ -41,7 +41,15 @@
<body>
<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">
<div class="footer-left">
@@ -69,11 +77,6 @@
</div>
</footer>
<noscript
><p class="noscript-msg">
Search and filtering require JavaScript.
</p></noscript
>
<script src="/static/main.js"></script>
</body>
</html>

13
website/templates/index.html
View File

@@ -1,10 +1,10 @@
{% extends "base.html" %} {% block content %}
{% extends "base.html" %} {% block header %}
<header class="hero">
<div class="hero-sheen" aria-hidden="true"></div>
<div class="hero-noise" aria-hidden="true"></div>
<div class="hero-shell">
<div class="hero-topbar">
<nav class="hero-topbar" aria-label="Site">
<span class="hero-brand-mini">Awesome Python</span>
<div class="hero-topbar-actions">
<a
@@ -15,7 +15,7 @@
>Submit a project</a
>
</div>
</div>
</nav>
<div class="hero-grid">
<div class="hero-copy">
@@ -68,7 +68,7 @@
<a href="#library-index" class="hero-scrollcue">Jump to the list</a>
</div>
</header>
{% endblock %} {% block content %}
<section class="results-section" id="library-index">
<div class="results-intro section-shell" data-reveal>
<div>
@@ -129,8 +129,8 @@
<th class="col-commit" data-sort="commit-time">Last Commit</th>
<th class="col-cat">Tags</th>
<th class="col-arrow">
<button class="back-to-top" aria-label="Back to search">
Search
<button class="back-to-top" aria-label="Back to top">
Top &uarr;
</button>
</th>
</tr>
@@ -139,7 +139,6 @@
{% for entry in entries %}
<tr
class="row"
role="button"
data-cats="{{ entry.categories | join('||') }}{% if entry.source_type == 'Built-in' %}||Built-in{% endif %}"
data-groups="{{ entry.groups | join('||') }}"
tabindex="0"