fix: resolve remaining accessibility findings across the component library - #2066
Merged
Conversation
YouTube/Vimeo iframes used $args.title (empty when none is passed, e.g. the video block), failing the Lighthouse frame-title audit. Use the resolved title instead (which also honours 'autotitle' from the oembed metadata, matching the Cloudinary path) and fall back to a provider label so the iframe title is never empty. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
button.html emitted aria-label="" when a button had neither a label nor a title, an empty explicit name. Only emit aria-label when it is non-empty (link-name); a genuinely nameless icon link is then the caller's responsibility to label. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The brand link always carried aria-label="Home", which overrides the visible brand text for text (logoless) brands and fails WCAG 2.5.3 (label-content-name-mismatch). Emit the aria-label only for logo/image brands, where there is no visible text to preserve. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The responsive tab/pills dropdown toggle used link-secondary, which fails 4.5:1 on the body background (color-contrast). Use link-body-emphasis for a readable, accessible toggle. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The Chroma line-number colour (#7f7f7f) is only 4.00:1 on the white code background, failing color-contrast. Darkened to #6c6c6c (5.25:1) while keeping the numbers visibly muted. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
A button group with aria-role="tablist" set role="tablist" on the container but its buttons carried no role="tab", failing aria-required-children. Inject role="tab" on the inner buttons when the group is a tablist. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for gethinode-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
A button with visible text already exposes that text as its accessible name, so the derived aria-label was redundant — and for a button with a badge it dropped the badge from the name, failing WCAG 2.5.3 (label-content-name-mismatch). Emit aria-label only when the button has no visible title (icon-only), using the explicit label. Supersedes the earlier empty-label guard. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
….15.5 Pulls the paired accessibility fixes into the exampleSite demos: mod-blocks v2.2.6 (gethinode/mod-blocks#171, video-message message-title contrast) and mod-docs v1.15.5 (gethinode/mod-docs#124, button demo labels + outline colours). With this repo's own button.html change, /en/docs/blocks/video-message and /en/docs/components/button both score accessibility 100 with no failing audits. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
markdumay
force-pushed
the
fix/a11y-element-sweep
branch
from
July 19, 2026 08:59
e5bc2af to
447f19a
Compare
Collaborator
Author
|
🎉 This PR is included in version 3.10.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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
1 participant
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.
What
A Lighthouse accessibility sweep across the whole component library (the exampleSite mounts mod-docs, rendering every element on its own
/en/docs/page — 21 blocks + 42 components, 65 pages) surfaced a small set of residual a11y issues. This fixes the theme-side ones.Baseline: 55 / 65 pages already scored 100. These fixes take the affected pages to 100.
Fixes (one commit each)
autotitle, provider fallback)frame-titleassets/video.htmllabel-content-name-mismatchassets/navbar.htmlaria-labelon icon-only buttons (a text/badge button's visible text is its name; the derived label dropped the badge → 2.5.3 mismatch)link-name,label-content-name-mismatchassets/button.htmllink-body-emphasis(waslink-secondary, 4.0:1)color-contrastassets/nav.html#7f7f7f→#6c6c6c(4.0→5.25:1)color-contrastscss/components/_syntax-light.scsstablistbutton groups injectrole="tab"on their buttonsaria-required-children_shortcodes/button-group.htmlPairs with
exampleSite/go.modby this PR, so the whole sweep lands together.Verification
Rebuilt the exampleSite and re-audited the affected pages: panels 96→100, file 96→100, button-group 95→100, navbar mismatch resolved, video-message 93→97, components-button 93→100 (all audits pass/n·a). Every theme-side finding from the 65-page sweep is resolved.
🤖 Generated with Claude Code