Opened 9 years ago

Closed 5 years ago

#3079 closed bug (fixed)

Tabs: keyboard accessibility

Reported by: acheetham Owned by:
Priority: blocker Milestone: 1.9.0
Component: ui.tabs Version: 1.6rc6
Keywords: keyboard a11y Cc: davidb
Blocked by: Blocking:

Description (last modified by Scott González)

Currently, tabs are navigated using the Tab key, but the more appropriate method is to use the Tab key to navigate *to* the group of tabs, and then use the Arrow keys to navigate amongst the tabs:

http://dev.aol.com/dhtml_style_guide

Also, when you do use the keyboard to navigate between tabs (but without pressing Enter to select a tab) there is no change in class, and hence no possibility to apply visual queues.


There's documentation about this on the planning wiki.

Change History (19)

comment:1 Changed 9 years ago by klaus.hartl

Priority: majorminor
Type: bugfeature

comment:2 Changed 9 years ago by Cloudream

Milestone: TDB

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

Milestone: TBD1.next
Owner: klaus.hartl deleted
Priority: minorcritical
Status: newassigned
Type: featurebug
Version: 1.5.11.6rc6

comment:4 Changed 8 years ago by kliehm

According to the WAI-ARIA Best Practices document, tabs in a web page should behave exactly like browser tabs. So you tab on the active tab, and if you continue tabbing you get on items in the active tabpanel. Switching tabs is done by arrow keys (left, right, up, down), CTRL-tab and CTRL-SHIFT-tab, and even page-up and page-down - however, I couldn't prevent event propagation on those keys. I have a rather small script that does that including ARIA goodness, though it's not jQuery UI-fied. If I can help just let me know.

comment:5 Changed 8 years ago by kliehm

I should add that switching through tabs should be in carousel mode, i.e. from the last tab to the first and vice versa.

comment:6 Changed 8 years ago by kliehm

May I bring to your attention that this bug is "assigned", but the owner has been deleted. I suppose if it ever is to be worked on and resolved it needs an owner, doesn't it?

comment:7 Changed 8 years ago by Scott González

Milestone: 1.next1.8

comment:9 Changed 8 years ago by Scott González

Milestone: 1.81.next

Bumping to 1.9, which will contain a major push for a11y.

comment:10 Changed 7 years ago by Scott González

Milestone: 1.next1.9
Priority: criticalmajor

comment:11 Changed 6 years ago by Scott González

Description: modified (diff)
Priority: majorblocker
Status: assignedopen
Summary: Tabs not properly keyboard accessibleTabs: keyboard accessibility

comment:13 Changed 6 years ago by eikes

edit: updated th pull request

comment:15 Changed 6 years ago by Scott González

From Everett Zufelt (#7846): When using open on mouseover it appears to no longer be possible to open tabs via keyboard.

comment:16 Changed 6 years ago by Scott González

#7846 is a duplicate of this ticket.

comment:17 Changed 6 years ago by Scott González

Keywords: a11y added; accessibility removed

comment:18 Changed 6 years ago by ezufelt

Tabs demo 1.9pre

After using keyboard to add a new tab in the Simple Manipulation demo, or opening a tab in the Collapse demo, focus is set to first element in the DOM.

comment:19 Changed 6 years ago by Scott González

#3483 is a duplicate of this ticket.

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

Resolution: fixed
Status: openclosed

Tabs: Implement ARIA + Key handling. Fixes #3079 - Tabs: keyboard accessibility. Fixes #7845 - Tabs: default accessibility.

Changeset: 48588d3bef746129aa66e5fa915da2962a1a4014

Note: See TracTickets for help on using tickets.