Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#14627 closed bug (fixed)

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

Reported by: cbowen84 Owned by: Scott González
Priority: minor Milestone: 1.12.2
Component: ui.tabs Version: 1.11.3
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (5)

comment:1 Changed 3 years ago by Scott González

Resolution: worksforme
Status: newclosed

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.

comment:2 Changed 3 years ago by 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.

comment:3 Changed 3 years ago by Scott González

Resolution: worksforme
Status: closedreopened
Summary: Adding sortable or draggable to a tabs widget disables the keyboard functionalityTabs: In sortable tabs demo, the tabs do not receive focus on click

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.

comment:4 Changed 2 years ago by Scott González

Owner: set to Scott González
Resolution: fixed
Status: reopenedclosed

In f1fa076:

Tabs: Don't blur focused tab on sort

Fixes #14627
Closes gh-1761

comment:5 Changed 2 years ago by Scott González

Milestone: none1.12.2
Note: See TracTickets for help on using tickets.