📎 Implement useFocusableInteractive - jsx-a11y/interactive-supports-focus

[Conaclos]

Description

Implement interactive-supports-focus.

Want to contribute? Lets you know you are interested! We will assign you to the issue to prevent several people to work on the same issue. Don't worry, we can unassign you later if you are no longer interested in the issue! Read our contributing guide and analyzer contributing guide.

Suggested name: useFocusableInteractive

[fujiyamaorange]

@Conaclos
The eslint link looks same as #2610 👀

[DerTimonius]

I'd like to work on this one 🙂

[DerTimonius]

Currently working on this, I'm already making good progress!

There are two questions that came up:

1. Should the third case of the original rule be included here? To me, it feels a bit disconnected

Case: This element is not a button, link, menuitem, etc. It is catching bubbled events from elements that it contains
If your element is catching bubbled click or key events from descendant elements, then the proper role for this element is presentation.

<div
  onClick={onClickHandler}
  role="presentation">
  <button>Save</button>
</div> 

Marking an element with the role presentation indicates to assistive technology that this element should be ignored; it exists to support the web application and is not meant for humans to interact with directly.

2. Should the rule have options to make some elements not only focusable, but also tabbable as suggested in the original rule?

[ematipico]

1. Yeah you're right, the third case is weird. In that case, we should suggest a different role (covered by another rule I think). We should ignore it.
2. Usually we start without options unless they are needed for the first round of implementation.