Question on commit 181170f, delete button/tabindex

[jefflord]

@kevin-brown or anyone else, in this commit, 181170f, it says

The clear button has also been changed to use a `<button>` element,
though it is still removed from the tab order. This allows for the
purpose to be properly communicated to screen readers while not
disrupting the natural tab order of the select box.

While I love all the changes from this commit, and agree with this being changed to a button, I don't understand the tabindex and the "the natural tab order of the select box".

With tabindex="-1", KB only user cannot tab-to or access this item to delete. Can anyone explain why tabindex="-1" helps or fixes? I update the DOM to "correct" this and it works great for me. I just wonder why it's not the default.

Thanks

[kevin-brown]

The clear button is not focusable by standard keyboards without assistance. Select2 has key bindings for triggering the clear button (DELETE I believe, BACKSPACE in some cases) for those without tools overriding standard key bindings.

The challenge with tabbing in general is that Select2 first and foremost needs to replicate a standard select box. And a standard select box doesn't have a bonus clear button, so if it showed up in the natural tab order then it wouldn't be meeting that goal. But we have key bindings that try their best to accommodate for this following industry standards (WAI-ARIA primarily, browser engines when they don't cover it) to make up for this gap.

[jefflord]

kevin-brown Thanks for the reply.

I am very glad that actual thought was given to this topic. I now understand that what is meant by "the natural tab order of the select box" is the "usual way tab works for a normal select element". I can respect that.

However, the issues are these:

1. This is not a select input anymore, it's a "custom user control", and now has more responsibility than select element alone has. With great power comes great responsibility.
2. Delete does nothing I can tell, and backspace does work, but it's weird. These "issues", a) you need to hit backspace and then esc to quickly remove an item and b) you can only remove the last item.
3. Having any action-button that cannot be accessed with the KB is bad. This makes sense to me and comes from complaints I have received from paid "Level Access" evaluations.

I have no issues with changing my local select2, changing it to have a tabindex on these buttons, but it seems like it should be that way already. Another option, which I think would be in line with WCAG, would be to use the arrow keys to focus the delete buttons. I think this would address KB access to the buttons AND preserve "the natural tab order of the select box".

What do you think?