[js-embedded-discovery COMMIT] /trunk/src/javascript/typeahead.js

[noreply at shibboleth.net]

Author: rdw
Date: Fri Jan 23 06:16:14 2015
New Revision: 137

URL: http://svn.shibboleth.net/view/js-embedded-discovery?rev=137&view=rev
Log:
EDS-26 Add some ARIA annotations to the autocomplete.  Work in progress

Modified:
    trunk/src/javascript/typeahead.js

Modified: trunk/src/javascript/typeahead.js
URL: http://svn.shibboleth.net/view/js-embedded-discovery/trunk/src/javascript/typeahead.js?rev=137&r1=136&r2=137&view=diff
==============================================================================
--- trunk/src/javascript/typeahead.js (original)
+++ trunk/src/javascript/typeahead.js Fri Jan 23 06:16:14 2015
@@ -26,6 +26,7 @@
     //
     var myThis = this;
    
+
     //
     // Set up the 'dropDown'
     //
@@ -35,7 +36,14 @@
 
     this.dropDown.style.width = this.textBox.offsetWidth;
     this.dropDown.current = -1;
+    this.textBox.setAttribute('role', 'listbox');
     document.body.appendChild(this.dropDown);
+
+    //
+    // Set ARIA on the input
+    //
+    this.textBox.setAttribute('role', 'combobox');
+    this.textBox.setAttribute('aria-controls', 'IdPSelectDropDown');
 
     //
     // mouse listeners for the dropdown box
@@ -191,6 +199,8 @@
         }
     }
     this.dropDown.style.visibility = 'hidden';
+    this.dropDown.setAttribute('aria-expanded', 'false');
+
 
     if (-1 == this.dropDown.current) {
         this.doUnselected();
@@ -206,6 +216,7 @@
         }
     }
     this.dropDown.style.visibility = 'visible';
+    this.dropDown.setAttribute('aria-expanded', 'true');
 };
 
 
@@ -280,7 +291,7 @@
 	    }
 	}
         div.appendChild(document.createTextNode(str));
-
+        div.setAttribute('role', 'option');
         this.dropDown.appendChild(div);
         i++;
     }
@@ -322,6 +333,8 @@
             // Highlight it
             //
             node.className = 'IdPSelectCurrent';
+            node.setAttribute('aria-selected', 'true');
+
             //
             // turn on the button
             //
@@ -336,6 +349,7 @@
             this.origin.value = this.results[i][1];
             this.origin.textValue = this.results[i][0];
         } else {
+            node.setAttribute('aria-selected', 'false');
             node.className = '';
         }
         i++;