#14627 closed bug (fixed)

Opened September 27, 2015 07:52PM UTC

Closed October 12, 2016 05:14PM UTC

Last modified October 12, 2016 05:15PM UTC

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

Reported by: cbowen84 Owned by: scottgonzalez
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.

Attachments (0)
Change History (5)

Changed September 28, 2015 04:13PM UTC by scottgonzalez comment:1

resolution: → worksforme
status: new → closed

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.

Changed October 01, 2015 03:01PM UTC by cbowen84 comment:2

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.

Changed October 01, 2015 03:40PM UTC by scottgonzalez comment:3

resolution: worksforme
status: closed → reopened
summary: Adding sortable or draggable to a tabs widget disables the keyboard functionality → Tabs: 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.

Changed October 12, 2016 05:14PM UTC by scottgonzalez comment:4

owner: → scottgonzalez
resolution: → fixed
status: reopened → closed

In [changeset:"f1fa076f62e99089257f6f8159cb2ce503f0abc2" f1fa076]:

#!CommitTicketReference repository="" revision="f1fa076f62e99089257f6f8159cb2ce503f0abc2"
Tabs: Don't blur focused tab on sort

Fixes #14627
Closes gh-1761

Changed October 12, 2016 05:15PM UTC by scottgonzalez comment:5

milestone: none → 1.12.2