Skip to content

[test][avatar] Add axe tests and docs - #48732

Closed
mj12albert wants to merge 9 commits into
mui:masterfrom
mj12albert:avatar-axe-coverage
Closed

[test][avatar] Add axe tests and docs#48732
mj12albert wants to merge 9 commits into
mui:masterfrom
mj12albert:avatar-axe-coverage

Conversation

@mj12albert

@mj12albert mj12albert commented Jun 26, 2026

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

Doc: https://github.com/mj12albert/material-ui/blob/avatar-axe-coverage/packages/mui-material/src/Avatar/accessibility.md

@mj12albert mj12albert added accessibility a11y test scope: avatar Changes related to the avatar. labels Jun 26, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented Jun 26, 2026

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-48732--material-ui.netlify.app/
QR code for https://deploy-preview-48732--material-ui.netlify.app/

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.

@mj12albert
mj12albert force-pushed the avatar-axe-coverage branch from 1f2c62c to f4d9d8e Compare June 26, 2026 02:55
@mj12albert
mj12albert force-pushed the avatar-axe-coverage branch from cdedf41 to d006909 Compare June 26, 2026 03:23
@mj12albert
mj12albert marked this pull request as ready for review June 26, 2026 04:22

@michelengelen michelengelen left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one single finding from claude.
I reviewed the .md file and it looks clean.

Can be merged as ist or with a tighter guard around the test, your call!

style.textContent =
'* { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }';
document.head.appendChild(style);
const avatar = Array.from(document.querySelectorAll('.MuiAvatar-root')).find(

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Array.from(...).find(node => node.textContent === 'OP') returns undefined if the LetterAvatars fixture is renamed, the "OP" avatar text is changed, or the route resolves incorrectly. The immediately following range.selectNodeContents(avatar) throws a TypeError (DOM spec requires a Node). Because style.remove() sits after the throw point, the injected * { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } style sheet persists in document.head for all subsequent Playwright tests in the same browser session, silently corrupting every screenshot taken afterward. Fix: wrap the measurement block in try { … } finally { style.remove(); } and add an explicit assertion that avatar is non-null before proceeding.

@michelengelen

Copy link
Copy Markdown
Member

Closing in favour of #48917.

@mj12albert has left the company, so this branch can no longer be rebased or
updated. To keep the work alive, the series has been rebased onto current master
and reopened from a maintained fork. Commit authorship is preserved — the
component commits are still authored to Albert.

The full series is #48915#48926, ending in a public accessibility conformance
report (#48926) that answers #14187. Nothing from this PR is lost; the report,
tests, and demos all carry over.

Thanks @mj12albert for the original work.

@mj12albert
mj12albert deleted the avatar-axe-coverage branch August 5, 2026 01:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y scope: avatar Changes related to the avatar. test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants