tmedwards / sugarcube-2

SugarCube is a free (gratis and libre) story format for Twine/Twee.
https://www.motoslave.net/sugarcube/2/
BSD 2-Clause "Simplified" License
177 stars 41 forks source link

ariaClick always setting tabindex to 0 #266

Closed MalifaciousGames closed 2 months ago

MalifaciousGames commented 1 year ago

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.

tmedwards commented 1 year ago

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?

MalifaciousGames commented 1 year ago

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.

ChapelR commented 1 year ago

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

tmedwards commented 1 year ago

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

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

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

tmedwards commented 1 year ago

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

BawdyInkSlinger commented 1 year ago

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