sugarcube-2 icon indicating copy to clipboard operation
sugarcube-2 copied to clipboard

ariaClick always setting tabindex to 0

Open MalifaciousGames opened this issue 1 year ago • 7 comments

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.

MalifaciousGames avatar Aug 20 '23 21:08 MalifaciousGames

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?

tmedwards avatar Aug 20 '23 22:08 tmedwards

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.

MalifaciousGames avatar Aug 21 '23 22:08 MalifaciousGames

You can just change the tab index attribute after the ariaClick call.

ChapelR avatar Aug 22 '23 02:08 ChapelR

I can add a tabindex option. E.g.,

$('<button>')
	.ariaClick(
		{ tabindex : -1 },
		/* handler */
	);

tmedwards avatar Sep 21 '23 20:09 tmedwards

Relevant info: https://webaim.org/techniques/keyboard/tabindex

BawdyInkSlinger avatar Sep 25 '23 18:09 BawdyInkSlinger

I'm unsure what you believe the relevance to this issue is.

tmedwards avatar Sep 25 '23 21:09 tmedwards

Mainly to let @MalifaciousGames know that setting the tab index to anything but -1 or 0 isn't advised for accessibility reasons.

BawdyInkSlinger avatar Oct 01 '23 08:10 BawdyInkSlinger