fix(a11y): name RichTextEditor and RichTextView text surfaces - #4685
Open
AKnassa wants to merge 1 commit into
Open
fix(a11y): name RichTextEditor and RichTextView text surfaces#4685AKnassa wants to merge 1 commit into
AKnassa wants to merge 1 commit into
Conversation
axe flagged every RichTextEditor story (aria-input-field-name, 12 serious + 1 critical label): the editor pointed aria-labelledby at an id no element carried, RichTextView's read-only textbox had no name at all, and one story shipped a bare textarea. - point aria-labelledby at the label element via Field's labelID, and give the contenteditable the control id htmlFor expects - add a label prop to RichTextView (default 'Rich text content'), mirroring RichTextEditorToolbar's label default - label the Markdown Serializers story textarea - burn 13 fixed entries out of .github/a11y-baseline.json (226->213) Verified: 53/53 lab tests, lab typecheck:docs, storybook typecheck, and the full axe audit on all 12 stories - 0 violations, gate green. Part of facebook#4681.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
github-actions
Bot
added
community
AKnassa
marked this pull request as ready for review
August 3, 2026 22:32
AKnassa
requested review from
cixzhang,
ejhammond and
imdreamrunner
as code owners
August 3, 2026 22:32
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR Modified ComponentsRichTextEditor (@astryxdesign/lab) · View in Storybook
Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
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.
Part of #4681 (weekly a11y scan). Clears all 13 RichTextEditor entries from the axe baseline: 12x
aria-input-field-name(serious) and 1xlabel(critical).What this does
Screen readers currently announce the RichTextEditor's editing area with no name, in every story. This PR wires up the accessible names so the editor, the read-only view, and the one demo textarea all announce what they are.
Why the violations happened
aria-labelledbyat the control id, but no element carries that id. A<label htmlFor>association cannot name a contenteditable div, so the name resolved to empty.RichTextViewrenders Lexical'sContentEditable, which keepsrole="textbox"(plusaria-readonly) even when non-editable, with no way to name it from outside. Swapping the role instead would trade this for a criticalaria-allowed-attrviolation, since Lexical hardcodesaria-readonlyand only textbox-family roles allow it.<textarea>demo input.What changed
RichTextEditorpasseslabelIDtoFieldand pointsaria-labelledbyat the label element; the contenteditable now carries the control id thathtmlForexpects.RichTextViewgains an optionallabelprop applied asaria-labelon the text region, defaulting to'Rich text content'(same pattern asRichTextEditorToolbar'slabeldefault).RichTextViewstory usages pass contextual labels..github/a11y-baseline.json: 226 -> 213 entries (deletions only).Verification
lab typecheck:docsandstorybook typecheckpass.accessibility-audit.js --components RichTextEditor --fail-on-newagainst the trimmed baseline): 0 violations across all 12 stories.No changeset: lab package (canary only), stories, and CI config.