ariakit/ariakit @ariakit/react@0.4.38

on GitHub

Keyboard activation dispatches a PointerEvent

The click that Command synthesizes for Enter and Space on an element that isn't natively clickable is now a PointerEvent built by the window that owns the element, reporting pointerId: -1 and an empty pointerType. That is what Chromium, Firefox, and WebKit dispatch for a click no pointer caused, so a handler reading event.pointerType or checking event instanceof PointerEvent now sees the same shape it sees on a native button.

<Ariakit.Button
  render={<div />}
  onClick={(event) => {
    // After Enter or Space: was false, now true.
    event.nativeEvent instanceof PointerEvent;
  }}
/>

This reaches every component built on Command: Button, Checkbox, Radio, CompositeItem, MenuItem, MenuItemCheckbox, MenuItemRadio, ComboboxItem, SelectItem, Tab, ToolbarItem, ToolbarContainer, Disclosure, DialogDisclosure, DialogDismiss, PopoverDisclosure, PopoverDismiss, HovercardDisclosure, HovercardDismiss, MenuButton, MenuDismiss, Select, SelectDismiss, ComboboxSelect, ComboboxCancel, ComboboxDisclosure, ComboboxDismiss, FormSubmit, FormReset, FormPush, FormRemove, FormCheckbox, and FormRadio.

Other updates

• Fixed ComboboxItem so an explicit focusOnHover boolean or callback value neither activates an item on hover nor clears the active item on hover end while the combobox is closed.
• Fixed ComboboxList and ComboboxPopover, which builds on it, not moving focus back to the combobox when the list itself receives focus and the document contains a form named activeElement.
• Fixed keyboard activation on non-native Command elements and components built on Command, such as Button, so their synthetic clicks use the element's owner window for view and are composed.
• Fixed Composite and components built on it, such as Menu and Toolbar, building the events they synthesize with the outer window's constructors, so an item inside a same-origin iframe received events that failed instanceof against that frame's own interfaces.
• Fixed Portal and components built on it, such as Tooltip, as well as Combobox, when the document contains a form named defaultView.
• Fixed Dialog throwing instead of opening when it renders a form with a control named self, document, or ownerDocument, and on Safari throwing before the dialog was ever opened, so the page failed without anyone interacting with it.
• Fixed Dialog and components built on it, such as Popover and Menu, pulling focus back from an element the application focused outside them during placement when the document contains a form named activeElement.
• Fixed Focusable and components built on it, such as Tab and Button, so a middle click no longer opens the destination of a disabled element rendered as a link, including one kept reachable by accessibleWhenDisabled, which Tab enables by default.
• Fixed Dialog and components built on it, such as Popover and Menu, failing to return focus to the element that opened it when the document contains a form named activeElement.
• Fixed SelectItem so an authored focusOnHover callback no longer runs while the select is closed, keeping its side effects from activating an item, changing the value, or moving focus in a collapsed always-visible SelectList. Thanks to @waterWang.
• Fixed Tab not receiving DOM focus when the selected tab changes while another tab holds focus and the document contains a form named activeElement.
• Fixed TooltipAnchor, HovercardAnchor, and MenuButton to respect the resolved disabled and accessibleWhenDisabled state on hover in any composition order. Thanks to @btzr-io and @mayank99.
• Updated dependencies: @ariakit/react-components@0.5.0