Changeset 12985

Timestamp:

03/09/08 09:20:01 (9 months ago)

Author:

becky

Message:

fixes #5525 Add ARIA activedescendant support for FF3; mark each option with ARIA option state and assign an id to each option when created. Shorten labels on examples in test_ComboBox.html

Location:

dijit/trunk

Files:

• form/ComboBox.js (modified) (5 diffs)
• tests/form/test_ComboBox.html (modified) (3 diffs)

dijit/trunk/form/ComboBox.js

@@ -405 +405 @@
                                 this._isShowingNow=false;
                                 dijit.setWaiState(this.comboNode, "expanded", "false");
+                                dijit.removeWaiState(this.focusNode,"activedescendant");
                         }
                 },
@@ -453 +454 @@
                         // get the text that the user manually entered (cut off autocompleted text)
                         this.focusNode.value = this.focusNode.value.substring(0, this._getCaretPos(this.focusNode));
+                        //set up ARIA activedescendant
+                        dijit.setWaiState(this.focusNode, "activedescendant", dojo.attr(node, "id")); 
                         // autocomplete the rest of the option to announce change
                         this._autoCompleteText(newValue);
@@ -512 +515 @@
                 _startSearch: function(/*String*/ key){
                         if(!this._popupWidget){
-                                var popupId = dojo.attr(this.domNode, "id") + "_popup";
+                                var popupId = this.id + "_popup";
                                 this._popupWidget = new dijit.form._ComboBoxMenu({
                                         onChange: dojo.hitch(this, this._selectOption),
                                         id:popupId
                                 });
-                                dijit.setWaiState(this.textbox,"controls",popupId); // associate popup with textbox
+                                dijit.removeWaiState(this.focusNode,"activedescendant");
+                                dijit.setWaiState(this.textbox,"owns",popupId); // associate popup with textbox
                         }
                         // create a new query to prevent accidentally querying for a hidden
@@ -704 +708 @@
                         var labelObject = labelFunc(item);
                         var menuitem = dojo.doc.createElement("li");
+                        dijit.setWaiRole(menuitem, "option");
                         if(labelObject.html){
                                 menuitem.innerHTML = labelObject.label;
@@ -724 +729 @@
                         // display "Previous . . ." button
                         this.previousButton.style.display = (dataObject.start == 0) ? "none" : "";
+                        dojo.attr(this.previousButton, "id", this.id + "_prev");
                         // create options using _createOption function defined by parent
                         // ComboBox (or FilteringSelect) class
                         // #2309:
                         //              iterate over cache nondestructively
-                        dojo.forEach(results, function(item){
+                        dojo.forEach(results, function(item, i){
                                 var menuitem = this._createOption(item, labelFunc);
                                 menuitem.className = "dijitMenuItem";
+                                dojo.attr(menuitem, "id", this.id + i);
                                 this.domNode.insertBefore(menuitem, this.nextButton);
                         }, this);
                         // display "Next . . ." button
                         this.nextButton.style.display = (dataObject.count == results.length) ? "" : "none";
+                        dojo.attr(this.nextButton,"id", this.id + "_next")
                 },
 

dijit/trunk/tests/form/test_ComboBox.html

@@ -72 +72 @@
 
         <p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p>
-        <label for="setvaluetest">US State test 1 (200% Courier font):</label>
+        <label for="setvaluetest">US State test 1</label> (200% Courier font):
         <select id="setvaluetest"
                         name="state1"
@@ -159 +159 @@
 
         <p>ComboBox #2: url, autoComplete=true:</p>
-        <label for="datatest">US State test 2 (8pt font): </label>
+        <label for="datatest">US State test 2</label> (8pt font): 
         <input dojoType="dijit.form.ComboBox"
                         value="California"
@@ -172 +172 @@
         <span>Value: <input id="value2" disabled value="California"></span>
         <hr>
-        <label for="datatestDijit">Dijit List test #1 (150% font): </label>
+        <label for="datatestDijit">Dijit List test #1</label> (150% font): 
         <input dojoType="dijit.form.ComboBox"
                         value="dijit.Editor"