Better accessibility for results

Options are correctly called out as focus moves around the results
list.

Author: kevin-brown

dist/css/select2.css

@@ -117,7 +117,7 @@
     display: block;
     padding: 6px; }
 .select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] {
-  color: #666; }
+  color: #999; }
 .select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
   background-color: #ddd; }
 .select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {

dist/css/select2.min.css

@@ -154,6 +154,7 @@ define('select2/results',[
   function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
+    this.options = options;
 
     Results.__super__.constructor.call(this);
   }
@@ -165,6 +166,10 @@ define('select2/results',[
       '<ul class="options" role="listbox"></ul>'
     );
 
+    if (this.options.get('multiple')) {
+      $results.attr('aria-multiselectable', 'true');
+    }
+
     this.$results = $results;
 
     return $results;
@@ -284,6 +289,10 @@ define('select2/results',[
   Results.prototype.bind = function (container, $container) {
     var self = this;
 
+    var id = container.id + '-results';
+
+    this.$results.attr('id', id);
+
     container.on('results:all', function (params) {
       self.clear();
       self.append(params.data);
@@ -308,13 +317,16 @@ define('select2/results',[
     container.on('open', function () {
       // When the dropdown is open, aria-expended="true"
       self.$results.attr('aria-expanded', 'true');
+      self.$results.attr('aria-hidden', 'false');
 
       self.setClasses();
     });
 
     container.on('close', function () {
       // When the dropdown is closed, aria-expended="false"
       self.$results.attr('aria-expanded', 'false');
+      self.$results.attr('aria-hidden', 'true');
+      self.$results.removeAttr('aria-activedescendant');
     });
 
     container.on('results:select', function () {
@@ -401,6 +413,10 @@ define('select2/results',[
       }
     });
 
+    container.on('results:focus', function (params) {
+      params.element.addClass('highlighted');
+    });
+
     this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
       var $this = $(this);
 
@@ -422,12 +438,21 @@ define('select2/results',[
     });
 
     this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
+      var data = $(this).data('data');
+
       self.$results.find('.option.highlighted').removeClass('highlighted');
-      $(this).addClass('highlighted');
+
+      self.trigger('results:focus', {
+        data: data,
+        element: $(this)
+      });
     });
 
     this.$results.on('mouseleave', '.option', function (evt) {
-      $(this).removeClass('highlighted');
+      if ($(this).hasClass('highlighted')) {
+        $(this).removeClass('highlighted');
+        self.$results.removeAttr('aria-activedescendant');
+      }
     });
   };
 
@@ -537,9 +562,11 @@ define('select2/selection/single',[
     SingleSelection.__super__.bind.apply(this, arguments);
 
     var id = container.id + '-container';
+    var resultsId = container.id + '-results';
 
     this.$selection.find('.rendered-selection').attr('id', id);
     this.$selection.attr('aria-labelledby', id);
+    this.$selection.attr('aria-owns', resultsId);
 
     this.$selection.on('mousedown', function (evt) {
       // Only respond to left clicks
@@ -576,6 +603,8 @@ define('select2/selection/single',[
       if (container.isOpen()) {
         if (key == KEYS.ENTER) {
           self.trigger('results:select');
+
+          evt.preventDefault();
         } else if (key == KEYS.UP) {
           self.trigger('results:previous');
 
@@ -588,10 +617,16 @@ define('select2/selection/single',[
       } else {
         if (key == KEYS.ENTER || key == KEYS.SPACE) {
           self.trigger('open');
+
+          evt.preventDefault();
         }
       }
     });
 
+    container.on('results:focus', function (params) {
+      self.$selection.attr('aria-activedescendant', params.data._resultId);
+    });
+
     container.on('selection:update', function (params) {
       self.update(params.data);
     });
@@ -622,7 +657,7 @@ define('select2/selection/single',[
     this.$selection.find('.rendered-selection').html(formatted);
 
     if (data[0]._resultId != null) {
-      this.$selection.attr('aria-activedescendent', data[0]._resultId);
+      this.$selection.attr('aria-activedescendant', data[0]._resultId);
     }
   };
 
@@ -1404,6 +1439,10 @@ define('select2/core',[
       self.trigger('close');
     });
 
+    this.results.on('results:focus', function (params) {
+      self.trigger('results:focus', params);
+    });
+
     this.on('open', function () {
       $container.addClass('open');
     });
@@ -1455,7 +1494,7 @@ define('select2/core',[
     var $container = $(
       '<span class="select2 select2-container select2-theme-default">' +
         '<span class="selection"></span>' +
-        '<span class="dropdown-wrapper"></span>' +
+        '<span class="dropdown-wrapper" aria-hidden="true"></span>' +
       '</span>'
     );