fix: meet contrast on video-message message titles - #171
Merged
Conversation
The message cards use the muted 'card-icon-secondary' treatment, so the title inherits --bs-secondary; on the section's bg-body-tertiary background that grey is only 4.44:1, failing WCAG color-contrast. Render the message title in the body colour (the icon keeps its accent), which restores readable, accessible titles. Surfaced by the component-library Lighthouse sweep. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Author
|
🎉 This PR is included in version 2.2.6 🎉 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
Surfaced by the Hinode component-library Lighthouse sweep (pairs with gethinode/hinode#2066).
The
video-messageblock renders its message cards with the mutedcard-icon-secondarytreatment, so the card title inherits--bs-secondary(#6c757d). Because the section itself isbg-body-tertiary(#f8f9fa), the title text lands at 4.44:1 — just under the WCAG 4.5:1 threshold (color-contrast).Fix: render the message title in the body colour so it's readable; the icon keeps its
--bs-secondaryaccent (icons only need 3:1). Scoped to.video-message, so no other block changes.Verification
Rebuilt the Hinode exampleSite with this branch swapped in (module replacement) and re-audited
/en/docs/blocks/video-message/: accessibility 93 → 100, color-contrast now passes.🤖 Generated with Claude Code