eslint-plugin-jsx-a11y
eslint-plugin-jsx-a11y copied to clipboard
jsx-eslint
Listbox optional or wrong interactive-supports-focus
Hey folks, First of all, great work here! I really appreciate this linting tool. It helps me and my developers to learn accessibility while we are coding! Thanx for that.
But I have found a little problem with the rule interactive-supports-focus. It returns the following message on my listbox element:
ESLint: Elements with the 'listbox' interactive role must be focusable. (jsx-a11y/interactive-supports-focus).
"Translated" the rule says to me: put a tabindex="0" or tabindex="-1" here.
In the rule you feature a list of possible values, that includes "listbox". Listbox might be an interactive element, but it does not have to have a tabindex.
Please check Example 1: List Autocomplete with Manual Selection at W3C ARIA 1.1 Practices. In this example, the listbox works like an autocomplete or similar. Here you have to programatically control the focus in the listbox (arrow keys up and down), while the focus must stay in the corresponding input. You can see this as well in the attribute list of listbox on the same site: Listbox Popup.
So the linting rule is wrong in this case.
BUT it can have a tabindex: There is also another example at W3C, where the listbox is part of a select or dropdown-like widget. Here, it can have a tabindex.
In this case, leaving out the tabindex migth be wrong and the linting rule would be fired correctly.
My question: Is there a way to make this rule optional for listbox? Or maybe it is just wrong here.
Greets, Martin
