#515262 by Everett Zufelt, mgifford: Fixed Autocomplete requires ARIA for screen-reader users

1 files changed, 19 insertions, 7 deletions

diff --git a/misc/autocomplete.js b/misc/autocomplete.js
index bb4d599ae..d66054bbc 100644
--- a/misc/autocomplete.js
+++ b/misc/autocomplete.js
@@ -12,10 +12,16 @@ Drupal.behaviors.autocomplete = {
       if (!acdb[uri]) {
         acdb[uri] = new Drupal.ACDB(uri);
       }
-      var input = $('#' + this.id.substr(0, this.id.length - 13))
-        .attr('autocomplete', 'OFF')[0];
-      $(input.form).submit(Drupal.autocompleteSubmit);
-      new Drupal.jsAC(input, acdb[uri]);
+      var $input = $('#' + this.id.substr(0, this.id.length - 13))
+        .attr('autocomplete', 'OFF')
+        .attr('aria-autocomplete', 'list');
+      $($input[0].form).submit(Drupal.autocompleteSubmit);
+      $input.parent()
+        .attr('role', 'application')
+        .append($('<span class="element-invisible" aria-live="assertive"></span>')
+          .attr('id', $input.attr('id') + '-autocomplete-aria-live')
+        );
+      new Drupal.jsAC($input, acdb[uri]);
     });
   }
 };
@@ -33,12 +39,13 @@ Drupal.autocompleteSubmit = function () {
 /**
  * An AutoComplete object.
  */
-Drupal.jsAC = function (input, db) {
+Drupal.jsAC = function ($input, db) {
   var ac = this;
-  this.input = input;
+  this.input = $input[0];
+  this.ariaLive = $('#' + $input.attr('id') + '-autocomplete-aria-live');
   this.db = db;
 
-  $(this.input)
+  $input
     .keydown(function (event) { return ac.onkeydown(this, event); })
     .keyup(function (event) { ac.onkeyup(this, event); })
     .blur(function () { ac.hidePopup(); ac.db.cancel(); });
@@ -141,6 +148,7 @@ Drupal.jsAC.prototype.highlight = function (node) {
   }
   $(node).addClass('selected');
   this.selected = node;
+  $(this.ariaLive).html($(this.selected).html());
 };
 
 /**
@@ -149,6 +157,7 @@ Drupal.jsAC.prototype.highlight = function (node) {
 Drupal.jsAC.prototype.unhighlight = function (node) {
   $(node).removeClass('selected');
   this.selected = false;
+  $(this.ariaLive).empty();
 };
 
 /**
@@ -166,6 +175,7 @@ Drupal.jsAC.prototype.hidePopup = function (keycode) {
     $(popup).fadeOut('fast', function () { $(popup).remove(); });
   }
   this.selected = false;
+  $(this.ariaLive).empty();
 };
 
 /**
@@ -220,6 +230,7 @@ Drupal.jsAC.prototype.found = function (matches) {
   if (this.popup) {
     if (ul.children().size()) {
       $(this.popup).empty().append(ul).show();
+      $(this.ariaLive).html(Drupal.t('Autocomplete popup'));
     }
     else {
       $(this.popup).css({ visibility: 'hidden' });
@@ -232,6 +243,7 @@ Drupal.jsAC.prototype.setStatus = function (status) {
   switch (status) {
     case 'begin':
       $(this.input).addClass('throbbing');
+      $(this.ariaLive).html(Drupal.t('Searching for matches...'));
       break;
     case 'cancel':
     case 'error':