Tabs: In sortable tabs demo, the tabs do not receive focus on click

[cbowen84]

Adding either sortable or draggable to a tabs widget disables the keyboard functionality. This is easy to see using the example of tabs with sortable on the jQueryUI site. You can't use the keyboard to move between tabs and all accessibility is disabled. It's easy to modify this example to show that the same phenomena occurs for draggable.

I understand that sortable and draggable are not considered accessible and have no keyboard controls. However, I should be able to add them to a tabs widget without defeating the keyboard controls that are there normally. I currently can't add sortable as an option for sighted users without killing any functionality for screenreader users.

[Scott González]

I'm not seeing that. I do see that if you sort the currently focused tab, it loses focus, but the keyboard functionality continues to work fine once a tab is focused again.

[cbowen84]

Go to the tabs example and choose Default functionality. Click on the first tab. It highlights. Left and right arrow keys now can be used to go from tab to tab.

Now, go to the sortable example. Click on the first tab. It does not highlight and the arrow keys do not work. I've tried both Firefox and Chrome with the same behavior.

It is true that you can tab to the control with the keyboard. That takes a lot of tabs to get there, but it does work once you get there.

If you click on the text in the tab, not the tab, then do a tab, it will bring keyboard focus to the tab and then the arrow keys work. In fact, so will Back-Tab. It certainly does not work the same with sortable as it does without it and the behavior is somewhat erratic, though I guess it would be okay for screen reader users. But, for people who mix mouse and keyboard usage, it's got some problems.

[Scott González]

A much more accurate description of the problem then is that tabs do not receive focus on click when they're sortable. They keyboard functionality isn't broken at all.

This is actually intentional behavior for all interactions: we prevent click events when interacting with the element (e.g., when sorting). I'm not sure that we'll change that in any way, but it's certainly something to consider. More likely, we'll just change the demo to force focus on sort.

[Scott González]

In f1fa076:

Tabs: Don't blur focused tab on sort

Fixes #14627
Closes gh-1761