Opened 10 years ago

Closed 10 years ago

#8218 closed defect (fixed)

stackContainers: may need to set selected on current tab

Reported by: Becky Gibson Owned by: Becky Gibson
Priority: high Milestone: 1.4
Component: Accessibility Version: 1.2.1
Keywords: Cc: Joseph Scheuhammer
Blocked By: Blocking:

Description

There is some discrepancy in the ARIA spec of Nov. 14, 2008 about the use of the expanded and selected states for tab buttons in a TabContainer? (thus this also affects accordionContainer). See http://www.w3.org/WAI/PF/Group/track/issues/79 (apologies if that is in private space)

The spec states that expanded=true should be set on the current tab and also indicates the selected=true must be set on the current tab.

Thus the possibilities are:

  • expanded and selected are functionally synonomous, and this is a misprint.
  • both are required. For an accoridion, 'expanded' would be the set of expanded tabpanels, and selected would indicate the one the user is focussed on.

Waiting for clarification of the specification.

Change History (8)

comment:1 Changed 10 years ago by Becky Gibson

Milestone: tbd1.4

this won't be supported until the next FF release (I think that will be 3.2) so moving to 1.4

comment:2 Changed 10 years ago by Becky Gibson

(In [16459]) fixes #8281 refs #8218 updated postCreate for AccordionButton? to remove any spaces from dijit.domNode.id before using it as the id for the titleTextNode. The HTML spec doesn't allow any spaces in an id and thus the labelledby by relationship that relied on the id of titleTextNode was not getting set properly. I did not change the id value of the domNode as that could have been set by the developer, I only modify the value to be set on a node that dijit generates. Since I was in the file I also set the aria-selected property on the selected tab.

comment:3 Changed 10 years ago by davidb

The current best practices for tab and tabpanel indicate to use aria-selected, I would remove aria-expanded here as long as the sr behavior is ok.

comment:4 Changed 10 years ago by Joseph Scheuhammer

The current last call draft of the spec, released earlier this week, is clear on this.

  • any tab whose tabpanel is, well, expanded, should have aria-expanded set to true.
  • the currently active tab should have its aria-selected state set to true.

This amounts to the same thing for single-selectable stack containers: the expanded panel is the selected one, and there can only be one.

The need for both states arises when dealing with a multiselectable tabpanel (often called an "accordion") where multiple panels can be expanded but only one can be selected. Dijit doesn't have such a component yet.

The details are in the spec for role tab. An example of a multiselectable tablist is here: http://test.cita.uiuc.edu/aria/tabpanel/tabpanel2.php

Note: I trust the spec more than the best practices at this point. The spec is at last call, but the best practices is still a working draft.

comment:5 Changed 10 years ago by dante

does the "currently active tab" have to be a single element (the one with focus / selected state). I ask considering the "nested tabs" scenario, where each first level tab set has a "sub tab container" (which in 1.3 was included to have no tab buttons and potentially look like a stripe)

just thinking out loud.

comment:6 in reply to:  5 Changed 10 years ago by Joseph Scheuhammer

Replying to dante:

does the "currently active tab" have to be a single element (the one with focus / selected state).

Note that focus and selected are two different states: For example, keyboard focus can be, and frequently will be, on something in the expanded tab panel itself. Nonetheless its associated tab is still in the aria-selected state, informing the AT which tab is "active".

I ask considering the "nested tabs" scenario, where each first level tab set has a "sub tab container" (which in 1.3 was included to have no tab buttons and potentially look like a stripe)

just thinking out loud.

My guess is that both the top level tab and its sub-tab have aria-selected="true". What this is providing to the a11y API is information about each stack container. Consider a case where there are two tabpanels on the page but they are not nested. Each one will have an active tab regardless of where the user is currently focussed. They could be (1) on the first tabpanel, (2) the second, or (3) somewhere else entirely.

comment:7 Changed 10 years ago by Becky Gibson

since our tab panels are not multiselectable (only one is visible at a time) we just need to add aria-selected with the appropriate value to the tab buttons.

comment:8 Changed 10 years ago by Becky Gibson

Resolution: fixed
Status: newclosed

(In [20448]) fixes #8218 added aria-selected on tab buttons.

Note: See TracTickets for help on using tickets.