Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#8281 closed defect (fixed)

AccordionContainer: some programmatically created tabs don't have proper a11y info

Reported by: Becky Gibson Owned by: Becky Gibson
Priority: high Milestone: 1.3
Component: Accessibility Version: 1.2.3
Keywords: Cc:
Blocked By: Blocking:

Description

The screen reader doesn't always speak the name of the accordion tab title when it is created programmatically. This changed between 1.1 and 1.2 when accordionPane was removed.

see dijit/tests/layout/test_AccordionContainer_prog.html in Dojo 1.2.3 branch (or look at dijit/tests/AccordionContainer.html in current branch (as of Dec 12, 2008). The titles for the first three tabs are not spoken by the screen reader and there is no accessibility name assigned to those tabs (this can be seen using MS Inspect tool). However, Pane 4 is also created programmatically and it works correctly. The HTML for the panes are essentially the same.

Attachments (1)

8281.patch (1.7 KB) - added by Joseph Scheuhammer 10 years ago.

Download all attachments as: .zip

Change History (10)

comment:1 Changed 11 years ago by Adam Peller

Owner: changed from Becky Gibson to Joseph Scheuhammer

clown... can you take a look at this?

comment:2 Changed 10 years ago by Becky Gibson

in an interesting twist - IE 8 RC1 DOES speak the tab titles but neither FF2 nor FF3 do!

comment:3 Changed 10 years ago by Becky Gibson

This also works correctly in Firefox 3.2 Minefield daily build so we may not be able to fix within Dojo. I'll do a bit more poking before closing this ticket.

comment:4 Changed 10 years ago by Becky Gibson

The problem was the switch to using labelledby in [14238] which fixed the problem of the screen reader announcing the +/- but broke announcement of the name when the accordion is created programmatically. This seems to work in IE8 because they do not support labelledby and are announcing the +/- along with the title. I have stepped through the code in the debugger and I see the labelledby being properly set, the only thing I can think of is a timing issue when the accordion is created programmatically vs. in markup.

comment:5 Changed 10 years ago by Joseph Scheuhammer

The problem was the manner in which the IDs were created for the labels and, hence, the IDREF for the aria-labelledby attribute. For the first three panes, the IDs contained a space character; e.g., id="pane 1_button". There were no such spaces in the case of the fourth pane. Changing the base id to use an underscore instead fixes the problem, (e.g., id="pane_1_button").

Attaching "8281.patch" that has the modifications to the unit test file "dijit/tests/layout/AccordionContainer.html". The unit tests were run on FF3/Mac, FF2/Mac, FF3/WinXP, FF2/WinXP, and IE8RC1/WinXP.

Changed 10 years ago by Joseph Scheuhammer

Attachment: 8281.patch added

comment:6 Changed 10 years ago by Joseph Scheuhammer

Summary: accordionContainer: some programmatically created tabs don't have proper a11y info[patch] [cla] accordionContainer: some programmatically created tabs don't have proper a11y info

comment:7 Changed 10 years ago by Becky Gibson

Owner: changed from Joseph Scheuhammer to Becky Gibson
Summary: [patch] [cla] accordionContainer: some programmatically created tabs don't have proper a11y infoaccordionContainer: some programmatically created tabs don't have proper a11y info

better way to fix is where the id gets generated in AccordionConatiner?.js

comment:8 Changed 10 years ago by Becky Gibson

Resolution: fixed
Status: newclosed

(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:9 Changed 10 years ago by bill

Summary: accordionContainer: some programmatically created tabs don't have proper a11y infoAccordionContainer: some programmatically created tabs don't have proper a11y info

Oh I wish we had just disallowed spaces in id's (for any widget) from the beginning. I suppose that's technically a back-compat break to start enforcing that now.

Note: See TracTickets for help on using tickets.