mirror of
https://github.com/material-components/material-web.git
synced 2024-07-07 10:06:44 +03:00
5df9410e60
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.