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
We are changing the names of these files to reduce similarity with CSS modules and avoid clashing with tooling built around that. If you're importing `*/internal/styles.css.js`, swap to `*/internal/styles.js`.
PiperOrigin-RevId: 611265000
fixes#4967
also fixes list-root focus ring and focusout
BREAKING CHANGE: the new ListController behavior no longer waits for event.preventDefault asynchronously because it was causing keyboard navigations to scroll the page.
PiperOrigin-RevId: 568300155
BREAKING CHANGE: `<md-list-item>` now uses slots instead of properties and has removed many prescriptive items (such as avatar, image, and video items). The default slot can be used for any custom content.
```html
<md-list-item>
<div slot="overline">OVERLINE</div>
<div slot="headline">First line</div>
<div slot="supporting-text">Second+ lines</div>
<div slot="trailing-supporting-text">Trailing</div>
<md-icon slot="start">star</md-icon>
<md-icon slot="end">star</md-icon>
</md-list-item>
```
Add `type="button"` or `type="link"` for interactive list items.
PiperOrigin-RevId: 567732201
BREAKING CHANGE: the `noninteractive` property has been replaced by the `interactive` property, and by default, a list-item will no longer show a ripple or focus ring.
What to change:
- To preserve prior default behavior, add the `interactive` attribute explicitly.
- Any setting of a truthy `noninteractive` attribute or property can be removed as it's the new default behavior.
PiperOrigin-RevId: 566696782
BREAKING CHANGE: the data-variant=".." selectors in list-item and all variants have been removed in favor of their respective slots. e.g. a slotted icon of the form `md-icon[slot=end][data-variant=icon]` should now be `md-icon[slot=end-icon]`.
PiperOrigin-RevId: 566258893
BREAKING CHANGE: Aria and roles on List have been moved to the host element. list-tabindex attribute should be migrated to tabindex attribute. type attribute should be migrated to role attribute.
PiperOrigin-RevId: 565767899
Note: tests have changed significantly because there is no longer a concept of "nothing activated" in the list.
BREAKING CHANGE: removed `active` from list-item, menu-item, and select-option. Instead, List uses tabindex to track whether something is focusable.
PiperOrigin-RevId: 565531998
default focus is now FIRST_ITEM and instead of LIST_ROOT and the menu / list itself has tabindex -1 by default as our a11y model recommends
PiperOrigin-RevId: 565244488
Fixes#4817
We need to communicate between components when an event has been handled (e.g. keyboard navigation or clicking). This CL focuses on listening to `defaultPrevented` in order to communicate that something was handled. We also have to patch ripple on submenu to make sure that the ripple isn't triggered.
PiperOrigin-RevId: 561748634
lots of hard coded stuff to enable our tests. Cleaning this up for generalized client usage.
BREAKING CHANGE: menu harnesses will not automatically open menus in quick mode anymore and interactions in menu and list harnesses will not automatically go to the first item but rather the menu roots.
PiperOrigin-RevId: 561746073
## Why?
Because currently `md-list` and `md-menu` can accept any aria role as a `type` property. However this can result in invalid roles being added, e.g. `progressbar` is allowed as a valid `type`.
Instead this change scopes the `type` to the following:
- `<md-list>` `type` can be any of: `'menu'|'menubar'|'listbox'|'list'|''`.
- `<md-menu>` `type` can be any of: `'menu'|'menubar'|'listbox'|'list'`.
PiperOrigin-RevId: 560180446
trailing text had an extra 16px added to its inline margin. Also use margin over padding because padding was messing with shape tokens applying to the padding whitespace.
PiperOrigin-RevId: 557581151