Elements with an interactive role and interaction handlers (mouse or key press) must be focusable.
Case: I got the error "Elements with the '${role}' interactive role must be tabbable". How can I fix this?
This element is a stand-alone control like a button, a link or a form element. A user should be able to reach this element by pressing the tab key on their keyboard.
Add the tabindex property to your component. A value of zero indicates that this element can be tabbed to.
<div
role="button"
@click="doSth"
tabindex=0 />
-- or --
Replace the component with one that renders semantic html element like <button>, <a href> or <input> -- whichever fits your purpose.
Generally buttons, links and form elements should be reachable via tab key presses. An element that can be tabbed to is said to be in the tab ring.
Case: I got the error "Elements with the '${role}' interactive role must be focusable". How can I fix this?
This element is part of a group of buttons, links, menu items, etc. Or this element is part of a composite widget. Composite widgets prescribe standard keyboard interaction patterns. Within a group of similar elements -- like a button bar -- or within a composite widget, elements that can be focused are given a tabindex of -1. This makes the element focusable but not tabbable. Generally one item in a group should have a tabindex of zero so that a user can tab to the component. Once an element in the component has focus, your key management behaviors will control traversal within the component's pieces. As the UI author, you will need to implement the key handling behaviors such as listening for traversal key (up/down/left/right) presses and moving the page focus between the focusable elements in your widget.
<div role="menu">
<div role="menuitem" tabindex="0">Open</div>
<div role="menuitem" tabindex="-1">Save</div>
<div role="menuitem" tabindex="-1">Close</div>
</div>
In the example above, the first item in the group can be tabbed to. The developer provides the ability to traverse to the subsequent items via the up/down/left/right arrow keys. Traversing via arrow keys is not provided by the browser or the assistive technology. See Fundamental Keyboard Navigation Conventions for information about established traversal behaviors for various UI widgets.
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
@click="doSth"
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.
- AX_FOCUS_02
- Mozilla Developer Network - ARIA Techniques
- Fundamental Keyboard Navigation Conventions
- WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets
This rule takes an options object with the key tabbable. The value is an array of interactive ARIA roles that should be considered tabbable, not just focusable. Any interactive role not included in this list will be flagged as needing to be focusable (tabindex of -1).
'jsx-a11y/interactive-supports-focus': [
'error',
{
tabbable: [
'button',
'checkbox',
'link',
'searchbox',
'spinbutton',
'switch',
'textbox',
],
},
]
<!-- Good: div with @click attribute is hidden from screen reader -->
<div aria-hidden @click={() => void 0} />
<!-- Good: span with @click attribute is in the tab order -->
<span @click="doSomething();" tabindex="0" role="button">Click me!</span>
<!-- Good: span with @click attribute may be focused programmatically -->
<span @click="doSomething();" tabindex="-1" role="menuitem">Click me too!</span>
<!-- Good: anchor element with href is inherently focusable -->
<a href="javascript:void(0);" @click="doSomething();">Click ALL the things!</a>
<!-- Good: buttons are inherently focusable -->
<button @click="doSomething();">Click the button</button>
<!-- Bad: span with @click attribute has no tabindex -->
<span @click="submitForm();" role="button">Submit</span>
<!-- Bad: anchor element without href is not focusable -->
<a @click="showNextPage();" role="button">Next page</a>