[Tabs] Respect Pointer Cancellation accessibility guidelines

[davidm-m]

Feature request

Summary

Current behaviour for tabs is to activate as soon as the pointer is pressed. In order to meet WCAG Level A 2.2 this should instead be changed to meet one of the following:

1. No Down-Event a. The down-event of the pointer is not used to execute any part of the function;
2. Abort or Undo a. Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
3. Up Reversal a. The up-event reverses any outcome of the preceding down-event;
4. Essential a. Completing the function on the down-event is essential.

My recommendation is to go for 1. as other examples do.

Examples in other libraries

• Material UI's implementation of tabs already follows this.
• Radix Primitives https://github.com/radix-ui/primitives/issues/1879
• React Aria makes it configurable https://github.com/adobe/react-spectrum/pull/4342

Additionally, WCAG provides an example implementation. Observe that in this implementation the only pointer event listened for is onClick, which only fires when the pointer is released.

Motivation

Changing this improves consistency with other components that meet accessibility standards and allows users to recover from accidental clicks.

[mj12albert]

This was discussed in depth in https://github.com/mui/base-ui/issues/1323

I think we should make this configurable by the user, even if we keep the current default

[mj12albert]

We decided to change the default behavior to activate on click instead of pointerdown in order to pass the success criterion

Additionally it will not be made configurable at the moment, but we'll consider adding it back in the future

[benface]

the default behavior

it will not be made configurable

😅

[mnajdova]

In the end we decided to reuse the activateOnFocus prop in order to determine whether to use the click vs the mouse down event for activation.

So, by default tabs activate on click. If you set the activateOnFocus prop, it activates on focus & mouse down. If people need more granular configuration for different behavior we may consider adding new prop in the future.

[github-actions[bot]]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@3176