Make useButton work for non-button html elements

[ZarkoPernar]

Package name(s)

Core (@salt-ds/core)

Package version(s)

All

Description

It seems like useButton was primarily made to work for the native button html element. While making a div in to a button with useButton I encountered several issues that need to be addressed:

• active class is applied onClick, instead of onMouseDown/onMouseUp
• aria-disabled is only applied when a disabled button is also focusable
• onKeyUp does not trigger onClick when the user presses enter

Steps to reproduce

function DivButton({disabled}) {
  const {buttonProps, active} = useButton({
    disabled,
    onClick: () => console.log("clicked"),
  });

  console.log({active})

  return <div {...buttonProps}>Fake Button</div>
}

Expected behavior

• when the target element is not a button disabled prop does not apply for non-native interactive elements like a div or a span, aria-disabled should be used instead
• when the target element is not a button onKeyUp should trigger a click
• active class should be applied when the mouse is down on the element

We should add a feature flag, or an elementType?: string option to useButton like react-aria does in order to change some of the default behaviours like the disabled/aria-disabled. Others should be simply patched.

Operating system

• [X] macOS
• [ ] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

Browser

• [X] Chrome
• [ ] Safari
• [ ] Firefox
• [ ] Edge

Are you a JPMorgan Chase & Co. employee?

• [X] I am an employee of JPMorgan Chase & Co.

[james-nash]

What's your use-case for faking a button with a div?

[ZarkoPernar]

@james-nash nested buttons are one example but there are other cases where you have complex layouts in a clickable element, there the native button won't suffice.