I'm writing a component for a web application where I need to explicitly prevent an element from gaining focus on "tab" press.
According to W3c's specs I set tabIndex attribute to -1 to declare non-interactive elements.
Now I wonder what is the ARIA role expected for such non-interactive element?
<div
role="???"
tabIndex="-1"
onKeyDown="/* ... */"
onClick="/* ... */"
>
Lorem ipsum
</div>
In this particular case, if the element cannot receive focus, it does not need a role. That's not a general rule, though. There are lots of elements that can't receive keyboard focus but still have a valid role, such as headings, lists, and tables. Having a valid role helps screen readers understand the structure of the page and allows them to quickly navigate to those items (such as 'H' to go to the next heading, 'L' for the next list, or 'T' for the next table.) If your element does not have any semantic meaning, it does not need a role.
As a side note, there are cases where an element can have tabindex="-1" and have a valid role. If I implement my own list selector using <ul>/<li>, where every list item is a choice but I want the entire list as a whole to be one tab stop, then I will have tabindex="-1" on all the list items except for the one I want to receive tab focus. It will have tabindex="0". If I tab to the entire list, the focus will go to the item with tabindex="0". I can then arrow up/down through the list to make a different selection. As I arrow up/down, I'm toggling the value of tabindex on the appropriate list item.