nextui icon indicating copy to clipboard operation
nextui copied to clipboard

[Feature Request] Add Tooltip prop to disable focus

Open TechnologicNick opened this issue 2 years ago • 1 comments

Is your feature request related to a problem? Please describe.

I made a table that has buttons wrapped in tooltips, just like in the custom cells example. When navigating to the buttons using the keyboard, the tooltip <div> is focussed instead. To navigate to the button, an additional keypress is required.

Describe the solution you'd like

As a user, I expected the button to be selected, but the tooltip element is selected instead.

Ideal steps I would like to see:

  1. Navigate to the desired row.
  2. Navigate to the desired button, without the Tooltip's <button> element receiving focus first.

Describe alternatives you've considered

Currently, I'm passing the disabled prop to the Tooltip. This changes the behaviour exactly to what I want. The Tooltip's button is taken out of the Accessibility Tree and the child buttons are still focusable.

Using the disabled prop is not ideal, because this suggests the Tooltip will not show when hovered, even though it does. The disabled prop is also not in the Tooltip's Props type, causing Typescript to mark it as an error, even though it's actually passed to the Tooltip's <button> element.

Screenshots or Videos

Current tooltip focus behaviour: Current tooltip focus behaviour

Desired tooltip focus behaviour: Desired tooltip focus behaviour

TechnologicNick avatar May 26 '22 23:05 TechnologicNick

Hey @TechnologicNick thanks for reporting it, we will migrate the current Tooltip behaviour to https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html which provides better accessibility and focus management, stay tuned

jrgarciadev avatar Jun 06 '22 14:06 jrgarciadev

Hey please upgrade to V2 since V1 will no receive more updates.

jrgarciadev avatar Aug 02 '23 16:08 jrgarciadev