[test][avatar] Add axe tests and docs#48732
Conversation
mj12albert
added
accessibility
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
mj12albert
force-pushed
the
avatar-axe-coverage
branch
from
1f2c62c to
f4d9d8e
Compare
mj12albert
force-pushed
the
avatar-axe-coverage
branch
from
cdedf41 to
d006909
Compare
michelengelen
left a comment
michelengelen
left a comment
There was a problem hiding this comment.
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( |
There was a problem hiding this comment.
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.
3 participants
Doc: https://github.com/mj12albert/material-ui/blob/avatar-axe-coverage/packages/mui-material/src/Avatar/accessibility.md