Skip to content

[test][avatar] Add axe tests and WCAG conformance report - #48917

Open
michelengelen wants to merge 4 commits into
mui:masterfrom
michelengelen:a11y/stack/avatar
Open

[test][avatar] Add axe tests and WCAG conformance report#48917
michelengelen wants to merge 4 commits into
mui:masterfrom
michelengelen:a11y/stack/avatar

Conversation

@michelengelen

@michelengelen michelengelen commented Aug 4, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Adds axe coverage and the WCAG 2.2 Level A/AA conformance report for Avatar, plus an a11y-only fixture for image avatars.

Result Count
✅ Supports 9
⚠️ Partially Supports 2
❌ Does Not Support 0
➖ Not Applicable 44

Known gaps: default letter/fallback avatars render white on grey[400] (~1.9:1) (1.4.3), and meaningful icon avatars fall below 3:1 (1.4.11).

Report: Avatar/accessibility.md

Important

How to review this PR

Layer 4 of 14 in a stacked series (#48915 → #48926). Its branch is built on a11y/stack/button (#48916). GitHub cannot chain PR bases across a fork, so every PR in the series targets master instead.

Review only the last commit — 1482433. Everything above it belongs to the layers below, and disappears as those merge.

Original work by @mj12albert. Supersedes #48732, rebased onto current master.

Part of the WCAG conformance effort (#14187).

This was referenced Aug 4, 2026
Open
Closed
@code-infra-dashboard

code-infra-dashboard Bot commented Aug 4, 2026 •
edited
Loading

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

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

@michelengelen michelengelen added test accessibility a11y scope: avatar Changes related to the avatar. labels Aug 5, 2026
@michelengelen
michelengelen force-pushed the a11y/stack/avatar branch 5 times, most recently from 9e4e570 to 644a4c7 Compare August 6, 2026 10:43
@michelengelen
michelengelen marked this pull request as ready for review August 7, 2026 10:15
@michelengelen
michelengelen force-pushed the a11y/stack/avatar branch 2 times, most recently from 69a1db9 to 2edd548 Compare August 7, 2026 13:00
@mj12albert @michelengelen
[test] Add an assertions mode to the axe regression harness
a0b8a93 
Lets a fixture assert every axe rule it exercises rather than only the
CSS-dependent visual ones, which is what the per-component WCAG reports
need.
@mj12albert @michelengelen
[test] Automate the CSS-dependent WCAG criteria
8e3e84e 
Adds a table-driven Playwright suite covering 1.4.10 Reflow, 1.4.4 Resize
Text and 1.4.12 Text Spacing across the assessed components. axe has no rule
for any of them, so they were rated Manual on evidence from source review.
@mj12albert @michelengelen
[test][button] Add axe test coverage and WCAG conformance report
5c23780
@mj12albert @michelengelen
[test][avatar] Add axe tests and WCAG conformance report
1482433
@michelengelen michelengelen mentioned this pull request Aug 11, 2026
Merged
@michelengelen

michelengelen commented Aug 18, 2026

Copy link
Copy Markdown
Member Author

PR review

Nothing merge-blocking. The unit tests are precise (fallback icon hidden, decorative SvgIcon hidden) and the two-layer demoMeta rules resolve correctly under last-match-wins. One redundancy against the css-layout suite and one optional hardening.

Simplifications (1)

1. 🟡 The bespoke Avatar 1.4.12 test duplicates the css-layout suite

Location: test/regressions/index.test.js:353

describe('Avatar', () => {
  test('1.4.12 Text Spacing: initials stay visible under the WCAG overrides', ...

#48936, earlier in this stack, already runs 1.4.12 on /docs-components-avatars/LetterAvatars through CSS_LAYOUT_SUITES — same spacing overrides, same range-vs-box clip math, same 0.5px tolerance. The report's citation ("Confirmed by a Playwright regression test in test/regressions/index.test.js") is satisfied by the generic suite. The only unique value here is the guard that LetterAvatars still renders an "OP" avatar.

Failure scenario: two tests cover one criterion; a future change updates the generic suite's thresholds and leaves this copy behind, and the two drift apart.

Fix: remove the bespoke describe, or shrink it to the "OP avatar still exists" guard if that guard is worth keeping.

Tests (1)

2. ℹ️ Avatar demos assert only visual axe rules

The avatar rules omit assertions: 'all' (button and checkbox use it). An image-alt regression on AvatarA11yImage — the fixture built to exercise that rule — is only caught by the committed-JSON drift check, not by a direct assertion. That guard is real, but assertions: 'all' on the clean fixtures would fail closer to the cause.

Verdict

Approve after nits - correct enrolment and tests; the duplicate 1.4.12 check is worth removing.

🤖 Review generated with Claude Code

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Aug 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@silviuaavram silviuaavram Awaiting requested review from silviuaavram
@siriwatknp siriwatknp Awaiting requested review from siriwatknp

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

accessibility a11y PR: out-of-date The pull request has merge conflicts and can't be merged. scope: avatar Changes related to the avatar. test

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@michelengelen @mj12albert