fix: correct accessibility issues in the button demos - #124
Merged
Conversation
Two a11y fixes surfaced by the component Lighthouse sweep (pairs with gethinode/hinode#2066): - The icon-only LinkedIn button had no accessible name; add label="LinkedIn" (link-name). - The outlined-buttons example showed warning/info/light, whose text is 1.1-1.9:1 on the light preview (those variants are only legible on dark backgrounds). Drop them from the outline example; all eight colours remain in the solid 'Colored buttons' example above. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Author
|
🎉 This PR is included in version 1.15.5 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
markdumay
added a commit
to gethinode/hinode
that referenced
this pull request
Jul 19, 2026
….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
added a commit
to gethinode/hinode
that referenced
this pull request
Jul 19, 2026
….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>
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
Two accessibility issues in the button docs, surfaced by the Hinode component Lighthouse sweep (pairs with gethinode/hinode#2066).
Icon-only LinkedIn button had no accessible name (
link-name). The "icon only" example omitted the title, so the link had no name. Addedlabel="LinkedIn"— which also models how to label an icon-only button.Outlined-buttons example showed inaccessible colours (
color-contrast).outline-warning(1.6:1),outline-info(1.9:1) andoutline-light(1.1:1) render low-contrast text on the light preview background — those variants are only legible on dark backgrounds. Removed them from the outline example; all eight colours still appear in the solid Colored buttons example above, so nothing is hidden about the API.Verification
Rebuilt the Hinode exampleSite with this branch (+ hinode#2066) swapped in and re-audited
/en/docs/components/button/: accessibility 93 → 100, no failing audits (link-name,color-contrastpass;label-content-name-mismatchno longer applicable).🤖 Generated with Claude Code