Major Changes
-
#3061
e53f778Thanks
@github-actions! - Moverole="listbox"and related ARIA semantics from the
contentpart to thelistpart. Thecontentpart now acts as a presentational wrapper (orrole="dialog"when
opted in), allowing consumers to render headers, footers, search inputs, tabs, and other widgets inside the popup
without polluting the listbox's accessibility tree.Breaking change — markup must wrap items in
<div {...api.getListProps()}>inside
<div {...api.getContentProps()}>:// Before <div {...api.getPositionerProps()}> {options.length > 0 && ( <ul {...api.getContentProps()}> {options.map(item => <li {...api.getItemProps({ item })}>...</li>)} </ul> )} </div> // After <div {...api.getPositionerProps()}> <div {...api.getContentProps()}> {options.length > 0 && ( <div {...api.getListProps()}> {options.map(item => <div {...api.getItemProps({ item })}>...</div>)} </div> )} </div> </div>
Other changes:
- Replaced
compositewithpopupType: "listbox" | "dialog"(default"listbox"). One declaration captures the
popover-style pattern:- Drives
aria-haspopupon the trigger ("listbox"or"dialog"). - Drives content's
role("presentation"or"dialog"). - Drives trigger's keyboard handling default (
"dialog"enables arrow-key handling on the trigger when focused). - Drives label-click target default (
"dialog"makes label clicks focus the trigger;"listbox"letshtmlFor
focus the input). - Migrate
composite: false→popupType: "dialog". List always carriesrole="listbox"regardless.
- Drives
aria-controlson the input and trigger now lists both the list id and content id (multi-id, valid ARIA). Keeps the
dismissable utility's trigger-ancestor scrollbar exclusion working without per-machine wiring.- The list element is the scroll anchor.
scrollIntoViewrootEl,scrollToIndexFn, andscrollToTop(renamed from
scrollContentToTop) all target the list element. - New
listpart added to the anatomy. NewgetListId/getListElDOM helpers andids.listoverride.
- Replaced
Patch Changes
- Updated dependencies [
5820feb]:- @zag-js/anatomy@2.0.0-next.0
- @zag-js/types@2.0.0-next.0
- @zag-js/dom-query@2.0.0-next.0
- @zag-js/core@2.0.0-next.0
- @zag-js/dismissable@2.0.0-next.0
- @zag-js/focus-visible@2.0.0-next.0
- @zag-js/popper@2.0.0-next.0
- @zag-js/collection@2.0.0-next.0
- @zag-js/utils@2.0.0-next.0
- @zag-js/live-region@2.0.0-next.0