No way to disable *Trigger components without disabling the trigger.

[kylemh]

Provide your feedback here.

I want to be able to visually and functionally disable a button without preventing it from being focusable.

🔦 Context

Some helpful context in here: https://github.com/adobe/react-spectrum/issues/8687

My goal is to allow buttons to never be disabled and - through required props - force developers to create disabled buttons that automatically provide reason feedback to touch, pointer, and assistive tech users. Specificaly, we conditionally fire a Toast using const isCoarsePointer = useMediaQuery('(pointer: coarse)'); and show a Tooltip for non-touch devices.

💻 Code Sample

I was hoping I could so something like this:

<Button
  isDisabled={false}
  aria-disabled={isDisabled || isLoading}
  onPress={(e) => {
    if (isDisabled || isLoading) {
      e.preventDefault(); // i know this doesn't exist
    }
  }}
>

but you cant prevent default of onPress.

Then I tried:

<Pressable isDisabled={isDisabled || isLoading}>
  <button {...myButtonComponentProps} disabled={false} aria-disabled={isDisabled || isLoading} />
</Pressable>

but with this setup Tooltips don't seem to trigger on focus.

In https://github.com/adobe/react-spectrum/issues/8687, I was extremely happy to see aria-disabled get propogated, but it seems it's not all I'll need, unless there's some other way for me to accomplish my goals?

Version

1.1.13

What browsers are you seeing the problem on?

Chrome

If other, please specify

No response

What operating system are you using?

MacOS