MUI Framework Awareness

MUI components have built-in accessibility features. Audit rules MUST account for framework defaults to avoid false positives.

Component Defaults

SvgIcon

Behavior: Automatically adds aria-hidden="true" when titleAccess prop is undefined
Source: node_modules/@mui/material/SvgIcon/SvgIcon.js

Rule: Do NOT flag MUI icons as missing aria-hidden unless titleAccess is set

// Only flag if titleAccess is set (should have aria-label or be visible):
<SvgIcon titleAccess="Icon name" />

// Do NOT flag (auto aria-hidden):
<SearchIcon />
<Timeline />

Alert

Behavior: Defaults to role="alert" (assertive live region)

Rule: Do NOT recommend adding role="alert" - it's already there

// Only suggest role="status" if polite announcement is more appropriate:
<Alert severity="success" role="status">Item saved</Alert>

Button

Behavior: Has minimum 36.5px height by default

Rule: Usually meets 24x24px target size requirement

// Only flag if size="small" or custom sx reduces below 24px:
<Button size="small" sx={{ minHeight: '20px' }} /> // Flag this
<Button>Normal</Button> // Don't flag

TextField

Behavior: Automatically associates label with input via id

Rule: Do NOT flag as missing label if label prop is provided

// This is accessible (auto-associated):
<TextField label="Email" />

// Only flag if no label and no aria-label:
<TextField /> // Flag this

Autocomplete

Behavior: Manages aria-expanded, aria-controls, aria-activedescendant

Rule: Do NOT flag ARIA attributes - they're managed by component

// All ARIA is handled internally:
<Autocomplete options={options} renderInput={(params) => <TextField {...params} />} />

False Positive Checklist

Before flagging a MUI component violation:

Check if MUI provides default accessibility behavior
Verify the violation exists in rendered output (use browser DevTools)
Test with actual screen reader to confirm issue
Check MUI documentation for accessibility notes

Common False Positives

Automated Finding	Why It's False	Reality
"Icon missing aria-hidden"	MUI adds it automatically	Check rendered HTML
"Alert missing role"	Default is role="alert"	Only change if polite needed
"Button too small"	36.5px default height	Check actual rendered size
"Input missing label"	TextField manages labels	Check for label prop
"Missing aria-expanded"	Autocomplete manages it	Check rendered state

2.6 KiB Raw Blame History