Toolkit for building accessible web apps with React
@ariakit/[email protected]
SelectListThe SelectList component can now be nested within a SelectPopover. This lets you render additional elements inside the popover without breaking the accessibility tree. The ARIA roles will be automatically adjusted to ensure a valid accessibility tree:
<SelectProvider>
<Select />
<SelectPopover>
<SelectHeading>Fruits</SelectHeading>
<SelectDismiss />
<SelectList>
<SelectItem value="Apple" />
<SelectItem value="Banana" />
</SelectList>
</SelectPopover>
</SelectProvider>
Two new components have been added to the Select module: SelectHeading and SelectDismiss.
You can use them alongside SelectList to add a heading and a dismiss button to the select popover:
<SelectProvider>
<Select />
<SelectPopover>
<SelectHeading>Fruits</SelectHeading>
<SelectDismiss />
<SelectList>
<SelectItem value="Apple" />
<SelectItem value="Banana" />
</SelectList>
</SelectPopover>
</SelectProvider>
--popover-transform-originThe Popover components now expose a --popover-transform-origin CSS variable. You can use this to set the transform-origin property for the popover content element in relation to the anchor element:
.popover {
transform-origin: var(--popover-transform-origin);
}
SelectPopover on clickTo ensure uniformity across all dropdown buttons in the library, the SelectPopover now opens when you click on the Select component, instead of on mouse/touch/pointer down.
This change also resolves a problem where the :active state wouldn't be triggered on the select button due to a focus change on mousedown.
ref warning in React 19.listElement state to the Select store.data-focus-visible being applied after a blur event.@ariakit/[email protected]
SelectListThe SelectList component can now be nested within a SelectPopover. This lets you render additional elements inside the popover without breaking the accessibility tree. The ARIA roles will be automatically adjusted to ensure a valid accessibility tree:
<SelectProvider>
<Select />
<SelectPopover>
<SelectHeading>Fruits</SelectHeading>
<SelectDismiss />
<SelectList>
<SelectItem value="Apple" />
<SelectItem value="Banana" />
</SelectList>
</SelectPopover>
</SelectProvider>
Two new components have been added to the Select module: SelectHeading and SelectDismiss.
You can use them alongside SelectList to add a heading and a dismiss button to the select popover:
<SelectProvider>
<Select />
<SelectPopover>
<SelectHeading>Fruits</SelectHeading>
<SelectDismiss />
<SelectList>
<SelectItem value="Apple" />
<SelectItem value="Banana" />
</SelectList>
</SelectPopover>
</SelectProvider>
--popover-transform-originThe Popover components now expose a --popover-transform-origin CSS variable. You can use this to set the transform-origin property for the popover content element in relation to the anchor element:
.popover {
transform-origin: var(--popover-transform-origin);
}
SelectPopover on clickTo ensure uniformity across all dropdown buttons in the library, the SelectPopover now opens when you click on the Select component, instead of on mouse/touch/pointer down.
This change also resolves a problem where the :active state wouldn't be triggered on the select button due to a focus change on mousedown.
ref warning in React 19.listElement state to the Select store.data-focus-visible being applied after a blur event.@ariakit/[email protected]
within function to queries.@ariakit/[email protected]
When rendering a Multi-selectable Combobox with the autoComplete prop set to "inline" or "both", the completion string will no longer be inserted into the input upon deselecting an item. This is because the completion string generally represents an addition action, whereas deselecting an item is a removal action.
Combobox to no longer use ReactDOM.flushSync when updating the value.resetValueOnSelect prop to ComboboxItem.resetValue method to combobox store.ComboboxValue component.@ariakit/[email protected]
When rendering a Multi-selectable Combobox with the autoComplete prop set to "inline" or "both", the completion string will no longer be inserted into the input upon deselecting an item. This is because the completion string generally represents an addition action, whereas deselecting an item is a removal action.
Combobox to no longer use ReactDOM.flushSync when updating the value.resetValueOnSelect prop to ComboboxItem.resetValue method to combobox store.@ariakit/[email protected]
undo utils.isTextbox, getTextboxValue.getInputType.resetValue method to combobox store.@ariakit/[email protected]
autoFocusOnHide behaviorPreviously, the autoFocusOnHide feature on ComboboxPopover was turned off by default. Most of the time, this didn't have any practical impact because the combobox input element was already focused when the popover was hidden.
Now, this feature is enabled by default and should work consistently even when virtualFocus is set to false.
The strokeWidth property on SVG elements rendered by CheckboxCheck, ComboboxCancel, ComboboxDisclosure, DialogDismiss, HovercardDisclosure, PopoverDisclosureArrow, and all components that use any of these now defaults to 1.5px instead of 1.5pt. This should make the strokes slightly thinner.
Remember, you can always override the SVG element rendered by these components by rendering custom children.
A new showMinLength prop has been added to the Combobox component. This prop lets you set the minimum length of the value before the combobox options appear. The default value is 0.
<Combobox showMinLength={2} />
Previously, achieving this behavior required combining three separate props: showOnChange, showOnClick, and showOnKeyPress. We've added this prop to simplify this common task.
These props continue to work as expected as they can be used to customize the behavior for each distinct event.
We've added the ability to render CompositeItem as an input element using the render prop:
<CompositeItem render={<input />} />
Before, you could only do this with the experimental CompositeInput component. Now, this functionality is integrated directly into the CompositeItem component.
Dialog calling autoFocusOnHide twice.@ariakit/[email protected]