Repository navigation
fix(a11y): correct ARIA naming on overlay and progress indicator - #249
Merged
squidfunk merged 1 commit intoOct 1, 2026
Merged
Conversation
The drawer overlay used aria-label on a <label> element, but the label's implicit role prohibits naming, so axe-core flagged aria-prohibited-attr on every page. The overlay is a decorative click-to-dismiss backdrop that duplicates the drawer toggle, so it should not be named or exposed. Mark it aria-hidden and drop the prohibited aria-label. The instant-navigation progress indicator declared role="progressbar" with no accessible name, tripping aria-progressbar-name on every page. Add an aria-label sourced from a new translatable "progress" string so assistive technology announces the loading state. Rebuilt dist assets to match, per CONTRIBUTING. AI-Assisted: true AI-Provider: Anthropic AI-Model: claude-sonnet-4-5 AI-Tool: kiro Signed-off-by: Adam Moss <2951486+adam-moss@users.noreply.github.com>
Member
|
Thanks, LGTM! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two theme templates render ARIA roles without valid accessible names,
producing WCAG 2.2 violations on every generated page. This fixes both.
Found while auditing a Zensical-built documentation site with Playwright +
axe-core (WCAG 2.2 A/AA). Each issue reproduced on all 250 audited pages.
Changes
aria-prohibited-attr— drawer overlay (src/base.html)The overlay is
<label class="md-overlay" for="__drawer" aria-label="…">.aria-labelis not permitted on an element whose implicit role prohibitsnaming, so axe-core reports
aria-prohibited-attr. The overlay is adecorative backdrop that mirrors the drawer toggle; it carries no unique
meaning for assistive technology. Fix: remove the
aria-labeland addaria-hidden="true".aria-progressbar-name— instant-navigation progress (src/partials/progress.html)<div class="md-progress" role="progressbar">has no accessible name, soaxe-core reports
aria-progressbar-name.role="progressbar"permitsnaming, so this adds
aria-labelfrom a new translatable string(
"progress": "Loading"inen.html), following the existinglang.t()pattern used by
toc.html.Rebuilt assets
dist/was rebuilt withnpm run buildper CONTRIBUTING; the threedist/changes correspond exactly to the threesrc/edits, with nounrelated churn.
Testing
npm run buildcompletes cleanly.dist/base.htmlanddist/partials/progress.htmlreflect both fixes.
Notes
en.html) translation gains the newprogresskey.Other language files are unchanged and will fall through to the key name
until translated.