mirror of
https://github.com/material-components/material-web.git
synced 2024-08-16 17:10:22 +03:00
BREAKING CHANGE: `querySelector` for `[role]` and `[aria-*]` attributes may no longer work. See `@material/web/migrations/v2/README.md` and `@material/web/migrations/v2/query-selector-aria.ts`. Browser/SR test results (go/mwc-double-aria-test-results) - ✅ VoiceOver on Chrome - ✅ VoiceOver on iOS Safari - ✅ TalkBack on Chrome - ✅ ChromeVox on Chrome - ✅ NVDA on Chrome - ✅ NVDA on Firefox - ✅ JAWS on Chrome - ✅ JAWS on Firefox (Optional) - ❓ VoiceOver on Safari - ❓ VoiceOver on Firefox PiperOrigin-RevId: 648859827 |
||
---|---|---|
.. | ||
query-selector-aria_test.ts | ||
query-selector-aria.ts | ||
README.md |
Breaking changes from v1 to v2
ARIA attribute querySelector
What changed?
role
and aria-*
attributes now shift at runtime to data-role
and
data-aria-*
attributes. This fixes a screen reader bug around labels
announcing more than once.
What broke?
Using querySelector
or querySelectorAll
with [role]
or [aria-*]
attribute selectors.
<md-checkbox aria-label="Agree"></md-checkbox>
<script>
const agreeCheckbox = document.querySelector(
'md-checkbox[aria-label="Agree"]'
);
// `agreeCheckbox` is null!
</script>
How to fix?
Provide selector strings to ariaSelector()
before querying.
import {ariaSelector} from '@material/web/migrations/v2/query-selector-aria';
const agreeCheckbox = document.querySelector(
ariaSelector('md-checkbox[aria-label="Agree"]')
);
Note: Element APIs, such as element.getAttribute('role')
and
element.ariaLabel
will continue to work as expected.