Buttons are interactive controls and thus focusable. If the button role is added to an element that is not focusable by itself (such as <span>, <div> or <p>) then, the tabindex attributes have to be used to make the button focusable.
But if another tag is used to create a custom button, the onclick event will only fire when clicked by the mouse cursor, even if role="button" is used. Because of this, the developer will have to surely add a separate key event handler to the element so that the button can be triggered,even when the space key is pressed.
Needs some javascript to capture the keyboard events for non-interactive elements
Even with
role="button"andtabindex="0". The toggle can be tabbed too, but not triggered.https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
Needs some javascript to capture the keyboard events for non-interactive elements