Changeset 14238

Timestamp:

07/03/08 06:52:36 (5 months ago)

Author:

becky

Message:

fixes #6605, #7092. Update the template and code to set the ARIA selected state to true on current tab, false on others. Added ARIA presentation roles on layout divs - this fixes the numbering problem of 7092. Also, use ARIA labelledby property to assign the title so that the +- which are used for high contrast are not spoken by the screen reader.

Location:

dijit/trunk/layout

Files:

• AccordionContainer.js (modified) (2 diffs)
• templates/AccordionPane.html (modified) (1 diff)

dijit/trunk/layout/AccordionContainer.js

@@ -184 +184 @@
                 dojo.setSelectable(this.titleNode, false);
                 this.setSelected(this.selected);
+                dojo.attr(this.titleTextNode, "id", this.domNode.id+"_title");
+                dijit.setWaiState(this.focusNode, "labelledby", dojo.attr(this.titleTextNode, "id"));
         },
 
@@ -218 +220 @@
                 this.selected = isSelected;
                 dojo[(isSelected ? "addClass" : "removeClass")](this.titleNode,"dijitAccordionTitle-selected");
+                dijit.setWaiState(this.focusNode, "expanded", isSelected);
                 this.focusNode.setAttribute("tabIndex", isSelected ? "0" : "-1");
         },

dijit/trunk/layout/templates/AccordionPane.html

@@ -1 @@
-<div
+<div waiRole="presentation"
         ><div dojoAttachPoint='titleNode,focusNode' dojoAttachEvent='ondijitclick:_onTitleClick,onkeypress:_onTitleKeyPress,onfocus:_handleFocus,onblur:_handleFocus,onmouseenter:_onTitleEnter,onmouseleave:_onTitleLeave'
-                class='dijitAccordionTitle' wairole="tab"
+                class='dijitAccordionTitle' wairole="tab" waiState="expanded-false"
                 ><span class='dijitInline dijitAccordionArrow' waiRole="presentation"></span
                 ><span class='arrowTextUp' waiRole="presentation">+</span
                 ><span class='arrowTextDown' waiRole="presentation">-</span
                 ><span waiRole="presentation" dojoAttachPoint='titleTextNode' class='dijitAccordionText'>${title}</span></div
-        ><div><div dojoAttachPoint='containerNode' style='overflow: hidden; height: 1px; display: none'
+        ><div waiRole="presentation"><div dojoAttachPoint='containerNode' style='overflow: hidden; height: 1px; display: none'
                 class='dijitAccordionBody' wairole="tabpanel"
         ></div></div>