Skip to content

[test][form helper text] Add axe tests and WCAG conformance report - #49553

Open
michelengelen wants to merge 2 commits into
mui:masterfrom
michelengelen:feature/mat-2025-a11yformhelpertext-assess-wcag-22-conformance
Open

michelengelen wants to merge 2 commits into
mui:masterfrom
michelengelen:feature/mat-2025-a11yformhelpertext-assess-wcag-22-conformance

Conversation

@michelengelen

@michelengelen michelengelen commented Oct 24, 2026 •

Copy link
Copy Markdown
Member

Adds axe coverage, WCAG unit tests, and a WCAG 2.2 Level A/AA conformance report for FormHelperText. This is Wave 1, item 7 of #49260. Part of #49411.

FormHelperText

Result Count
✅ Supports 11
⚠️ Partially Supports 2
❌ Does Not Support 0
➖ Not Applicable 42
🚩 Flagged 3/13

Known gaps:

  • 1.4.3 Contrast (Minimum). In dark mode, the Paper elevation overlay lowers the contrast of the default error.main (#f44336). Error text falls below 4.5:1 from elevation 2: 4.30:1 at elevation 2, 3.68:1 at elevation 8 (Menu, Popover), and 3.13:1 at elevation 24 (Dialog). At elevation 1, it is 4.52:1.
  • 4.1.3 Status Messages. The helper text has no live region. A screen reader probably does not announce an error that appears on blur until the user moves focus back to the field. This matches the TextField report.

Report: FormHelperText/accessibility.md

Changes

  • Tests. The FormHelperText.test.js "WCAG 2.2 conformance" block covers:
    • 1.3.1: TextField helper text is the input's description. A standalone helper text in a FormControl describes an Input only when the author connects it.
    • 1.4.3: the resting and error colors reach 4.5:1 in light mode. A tripwire confirms that dark error.main stays below 4.5:1 on the elevation 2 and 24 overlays (documented gap).
    • 3.3.1: a standalone Input in an error FormControl gets aria-invalid="true" and the helper text as its description.
    • 4.1.3: no live region on the helper text, and no [aria-live], [role="status"], or [role="alert"] anywhere in an error TextField (documented gap).
  • axe. FormHelperText has no docs page, so it follows the pattern of [test][FormControlLabel] Add axe tests and WCAG conformance report #49524: two fixtures own a new form-helper-text slug.
    • FormHelperTextA11yStates (standalone) asserts every rule.
    • FormHelperTextA11yVariants covers the three TextField variants, in the resting and error states. It records color-contrast without asserting it. The red label of the filled error field is a known TextField 1.4.3 failure that this fixture shows. axe can also return incomplete results where an input is empty or where the notched outline and the floating label overlap it. The helper text itself passes.
  • Playwright. FormHelperText is in the CSS layout suite on its states fixture.
  • Known gaps. FormHelperText is added to the 4.1.3 row. A new 1.4.3 row follows the palette row: "In dark mode, the elevation overlay lowers the contrast of error text below 4.5:1 on a Paper with elevation 2 or more, such as a Menu or a Dialog" (FormHelperText, TextField). [test][form label] Add axe tests and WCAG conformance report #49552 adds the same row; on merge, keep one row and join the affected lists.
  • TextField report. One bullet in the 1.4.3 region records the same dark-mode issue for the error label and the error helper text. TextField 1.4.3 stays Partially Supports.
  • Docs page. The hard-coded component count is removed, with the same text as the other Wave 1 PRs. [test][FormControlLabel] Add axe tests and WCAG conformance report #49524 changes the same line to "14 components", so the PR that merges second must keep the count-free text.

Decisions for review

  • 1.4.3 is Partially Supports, with responsibility Component. FormHelperText sets text.secondary and error.main itself. One root cause gets one ⚠️, on the component that creates it: the default dark error.main on elevated Paper.
  • The helper text of a disabled field is exempt from 1.4.3. It is part of an inactive user interface component, in WCAG's words. This is the same position as the TextField report. axe cannot see the link, so the fixtures leave out a disabled field. A disabled FormHelperText with no disabled field is not exempt. The report also advises that helper text which tells why a field is disabled is content the user needs, so it must stay readable.
  • The filled error field in the variants fixture has its visible label. An earlier version hid the label to avoid the known TextField failure (about 4.36:1). The fixture now shows the failure, and color-contrast is not asserted on it.
  • 1.4.1 finding. The CheckboxesGroup docs demo shows "You can display an error" in both states, so the error cue there is color only. This finding moves here from the FormGroup report.
  • 3.3.1 is Hybrid. The test proves the association and aria-invalid on a standalone input. Whether the words name the error is the author's content. The merged TextField report rates 3.3.1 Automated.
  • 2.4.6 and 4.1.2 are Not Applicable. Helper text is neither a label nor a component with a role.

Merge order with the sibling Wave 1 PRs

Do not hand-merge the generated blocks: after each rebase, run pnpm a11y:scorecard. If #49552 merges first, join the two dark-mode error rows in knownGaps.json.

Not done in this PR

  • The screen-reader checks from the issue have steps and pass conditions in the report. Nobody has run them yet.
  • Follow-up: align TextField 3.3.1 with this report (Hybrid, because the words of the message are the author's content).

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@code-infra-dashboard

code-infra-dashboard Bot commented Oct 24, 2026 •

Copy link
Copy Markdown

Deploy preview

Bundle size

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

No regressions in 32 benchmarks · ran 4m 06s · details


Check out the code infra dashboard for more information about this PR.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant