eslint-plugin-jsx-a11y icon indicating copy to clipboard operation
eslint-plugin-jsx-a11y copied to clipboard

New rule: Don't allow `aria-hidden` on focusable elements

Open khiga8 opened this issue 3 years ago • 0 comments

Hi team. I'd like to propose a rule that flags when aria-hidden="true' is set on focusable elements or on elements with descendants that are focusable. The rationale is that aria-hidden should be reserved for elements that are non-interactive since assistive technology users can still reach interactive elements in keyboard even with aria-hidden="true". Setting aria-hidden="true" on focusable elements can lead to unexpected behavior or be confusing.

An exception for this rule could be if a tabindex="-1" is set to remove it from keyboard order or if it's an input element with disabled. (While this could be an exception, I don't think this is necessarily a "good" approach since it's questionable whether interactive elements should be considered decorative, to begin with)

I would consider the following as focusable elements: textarea, button, a, input, summary.

What do you think? Am I missing anything?

I'm happy to start a draft PR.

khiga8 avatar Jul 28 '22 19:07 khiga8