Interactive elements should be focusable JS-0751
Performance
4 months ago
—
4 months old
Elements with the 'button' interactive role must be tabbable
50 aria-hidden="true"
51 style={{ ...dClass }}
52 >
53 <div54 className="modal-backdrop-custom bg-dark bg-opacity-50 vw-100 vh-100 position-fixed"55 onClick={onClose}56 role="button"57 />58 <div
59 className="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered modal-sm"
60 role="document"
Description
Elements with an interactive role and interaction handlers (mouse or key press) must be focusable as it will be helpful for keyboard and screen reader users.
Bad Practice
<!-- Bad: span with onClick attribute has no tabindex -->
<span onclick="submitForm();" role="button">Submit</span>
<!-- Bad: anchor element without href is not focusable -->
<a onclick="showNextPage();" role="button">Next page</a>
Recommended
<!-- Good: div with onClick attribute is hidden from screen reader -->
<div aria-hidden onClick={() => void 0} />
<!-- Good: span with onClick attribute is in the tab order -->
<span onClick="doSomething();" tabIndex="0" role="button">Click me!</span>
<!-- Good: span with onClick attribute may be focused programmatically -->
<span onClick="doSomething();" tabIndex="-1" role="menuitem">Click me too!</span>
<!-- Good: anchor element with href is inherently focusable -->
<a href="javascript:void(0);" onClick="doSomething();">Click ALL the things!</a>
<!-- Good: buttons are inherently focusable -->
<button onClick="doSomething();">Click the button :)</button>