sugarcube-2
sugarcube-2 copied to clipboard
ariaClick always setting tabindex to 0
Issue
Adding a listener via the ariaClick()
method always sets the element's tabindex
to 0, even if it had a bespoke value beforehand. Source
This can lead to unexpected behavior such as:
$(`<button tabindex='-1'>`).ariaClick(...);
//tabindex is now 0
Suggestion
I feel the method should only set a value if it was undefined before.
The entire point of the .ariaClick()
method is to make WAI-ARIA compatible clickables, which means keyboard navigable (tabbing) as well.
What purpose does disabling keyboard navigation but not mouse clicking serve? Other than to disadvantage keyboard users?
What are you attempting to achieve?
In my case the buttons are inside a focusable wrapper which handles keyboard inputs and click them programmatically. Having the buttons be focusable made keyboard navigation very cumbersome (focus wrapper => button 1 => button 2
instead of tabbing directly to the next element).
But it surely is a niche, if not bad, example, my point is that this behaviour can be undesirable in more normal uses, for elements that start hidden or disabled.
You can just change the tab index attribute after the ariaClick call.
I can add a tabindex
option. E.g.,
$('<button>')
.ariaClick(
{ tabindex : -1 },
/* handler */
);
Relevant info: https://webaim.org/techniques/keyboard/tabindex
I'm unsure what you believe the relevance to this issue is.
Mainly to let @MalifaciousGames know that setting the tab index to anything but -1 or 0 isn't advised for accessibility reasons.