fix(storybook): replace failing WCAG AA annotation colours across all stories#4311
Open
HelloOjasMutreja wants to merge 1 commit into
Open
Conversation
… stories facebook#666, facebook#888, and facebook#999 on a white background all fall just below the WCAG 2.1 AA contrast threshold (4.5:1 for normal text). Each has a measured ratio of roughly 4.48:1, 3.54:1, and 2.85:1 respectively. Replace all three with #4E606F (ratio ~5.5:1), which is already the maintainer-established accessible annotation colour in TabList.stories.tsx (set on TabList's size-label spans). Using the same value keeps the visual appearance consistent across story scaffolding. Affected files: 24 story files across Banner, Button, Calendar, Chat, ChatComposerInput, ChatReasoning, CodeEditorPerf, CodeEditorTheme, Icon, Markdown, MarkdownCitations, NumberInput, PowerSearch, SegmentedControl, TabList, TableColumnResize, TableFiltering, TablePagination, TableSelection, TableSortable, TableStickyColumns, Thumbnail, Tokenizer, ToolbarEdgeCompensation. Only colour properties are changed (color: '...'). No backgroundColor, component logic, prop, or story behaviour is touched.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
github-actions
Bot
added
community
Contributor
PR Analysis ReportNo new or modified components detected. Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | View full report |
HelloOjasMutreja
marked this pull request as ready for review
July 25, 2026 05:59
HelloOjasMutreja
requested review from
cixzhang,
ejhammond and
imdreamrunner
as code owners
July 25, 2026 05:59
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.
Summary
Fixes a WCAG 2.1 AA
color-contrastviolation that was appearing in the CI PR Analysis Report for any PR touching components with Storybook stories.#666,#888, and#999are used throughout story scaffolding as annotation / helper-text colours. All three fail the 4.5:1 AA threshold on a white background:#999#888#666Replace all three with
#4E606F(5.5:1 on white), which is already the maintainer-established accessible annotation colour -- it appears inTabList.stories.tsxon the size-label scaffolding spans and was set by a maintainer. Using the same value makes annotation text visually and semantically consistent across all story files.Scope
Story scaffolding only --
apps/storybook/stories/. No component source, no prop, no test, no behaviour is touched. Pure cosmetic fix to story demo text.24 files changed, 71 colour-value substitutions. Only
color:properties are updated;backgroundColorand all other CSS properties are untouched.Affected files
Banner, Button, Calendar, Chat, ChatComposerInput, ChatReasoning, CodeEditorPerf, CodeEditorTheme, Icon, Markdown, MarkdownCitations, NumberInput, PowerSearch, SegmentedControl, TabList, TableColumnResize, TableFiltering, TablePagination, TableSelection, TableSortable, TableStickyColumns, Thumbnail, Tokenizer, ToolbarEdgeCompensation.
Testing
No unit tests needed -- this is a pure visual/style fix to story scaffolding. The colour values are verified by contrast-ratio arithmetic:
#4E606Fon#FFFFFF= 5.5:1 (passes AA). All pre-commit checks pass (SYNC, package boundaries, changesets, demo media, executable bits).