Better accessibility for multiple select boxes

dist/js/select2.amd.full.js

@@ -570,11 +570,31 @@ define('select2/selection/base',[
   BaseSelection.prototype.bind = function (container, $container) {
     var self = this;
 
+    var id = container.id + '-container';
+    var resultsId = container.id + '-results';
+
+    this.$selection.attr('aria-owns', resultsId);
+
+    this.$selection.on('keydown', function (evt) {
+      self.trigger('keypress', evt);
+
+      if (evt.which === KEYS.SPACE) {
+        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);
     });
 
     container.on('open', function () {
+      // When the dropdown is open, aria-expanded="true"
+      self.$selection.attr('aria-expanded', 'true');
+
       $(document.body).on('mousedown.select2.' + container.id, function (e) {
         var $target = $(e.target);
 
@@ -594,10 +614,16 @@ define('select2/selection/base',[
           $element.select2('close');
         });
       });
+    });
 
-      container.on('close', function () {
-        $(document.body).off('mousedown.select2.' + container.id);
-      });
+    container.on('close', function () {
+      // When the dropdown is closed, aria-expanded="false"
+      self.$selection.attr('aria-expanded', 'false');
+      self.$selection.removeAttr('aria-activedescendant');
+
+      self.$selection.focus();
+
+      $(document.body).off('mousedown.select2.' + container.id);
     });
   };
 
@@ -685,11 +711,9 @@ 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
@@ -702,19 +726,6 @@ define('select2/selection/single',[
       });
     });
 
-    container.on('open', function () {
-      // When the dropdown is open, aria-expanded="true"
-      self.$selection.attr('aria-expanded', 'true');
-    });
-
-    container.on('close', function () {
-      // When the dropdown is closed, aria-expanded="false"
-      self.$selection.attr('aria-expanded', 'false');
-      self.$selection.removeAttr('aria-activedescendant');
-
-      self.$selection.focus();
-    });
-
     this.$selection.on('focus', function (evt) {
       // User focuses on the container
     });
@@ -723,18 +734,6 @@ define('select2/selection/single',[
       // User exits the container
     });
 
-    this.$selection.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      if (evt.which === KEYS.SPACE) {
-        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);
     });
@@ -782,11 +781,14 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select">' +
+      '<span class="multiple-select" tabindex="0" role="combobox" ' +
+        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
         '<ul class="rendered-selection"></ul>' +
       '</span>'
     );
 
+    $selection.attr('title', this.$element.attr('title'));
+
     this.$selection = $selection;
 
     return $selection;

dist/js/select2.amd.js

@@ -570,11 +570,31 @@ define('select2/selection/base',[
   BaseSelection.prototype.bind = function (container, $container) {
     var self = this;
 
+    var id = container.id + '-container';
+    var resultsId = container.id + '-results';
+
+    this.$selection.attr('aria-owns', resultsId);
+
+    this.$selection.on('keydown', function (evt) {
+      self.trigger('keypress', evt);
+
+      if (evt.which === KEYS.SPACE) {
+        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);
     });
 
     container.on('open', function () {
+      // When the dropdown is open, aria-expanded="true"
+      self.$selection.attr('aria-expanded', 'true');
+
       $(document.body).on('mousedown.select2.' + container.id, function (e) {
         var $target = $(e.target);
 
@@ -594,10 +614,16 @@ define('select2/selection/base',[
           $element.select2('close');
         });
       });
+    });
 
-      container.on('close', function () {
-        $(document.body).off('mousedown.select2.' + container.id);
-      });
+    container.on('close', function () {
+      // When the dropdown is closed, aria-expanded="false"
+      self.$selection.attr('aria-expanded', 'false');
+      self.$selection.removeAttr('aria-activedescendant');
+
+      self.$selection.focus();
+
+      $(document.body).off('mousedown.select2.' + container.id);
     });
   };
 
@@ -685,11 +711,9 @@ 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
@@ -702,19 +726,6 @@ define('select2/selection/single',[
       });
     });
 
-    container.on('open', function () {
-      // When the dropdown is open, aria-expanded="true"
-      self.$selection.attr('aria-expanded', 'true');
-    });
-
-    container.on('close', function () {
-      // When the dropdown is closed, aria-expanded="false"
-      self.$selection.attr('aria-expanded', 'false');
-      self.$selection.removeAttr('aria-activedescendant');
-
-      self.$selection.focus();
-    });
-
     this.$selection.on('focus', function (evt) {
       // User focuses on the container
     });
@@ -723,18 +734,6 @@ define('select2/selection/single',[
       // User exits the container
     });
 
-    this.$selection.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      if (evt.which === KEYS.SPACE) {
-        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);
     });
@@ -782,11 +781,14 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select">' +
+      '<span class="multiple-select" tabindex="0" role="combobox" ' +
+        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
         '<ul class="rendered-selection"></ul>' +
       '</span>'
     );
 
+    $selection.attr('title', this.$element.attr('title'));
+
     this.$selection = $selection;
 
     return $selection;

dist/js/select2.full.js

@@ -10105,11 +10105,31 @@ define('select2/selection/base',[
   BaseSelection.prototype.bind = function (container, $container) {
     var self = this;
 
+    var id = container.id + '-container';
+    var resultsId = container.id + '-results';
+
+    this.$selection.attr('aria-owns', resultsId);
+
+    this.$selection.on('keydown', function (evt) {
+      self.trigger('keypress', evt);
+
+      if (evt.which === KEYS.SPACE) {
+        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);
     });
 
     container.on('open', function () {
+      // When the dropdown is open, aria-expanded="true"
+      self.$selection.attr('aria-expanded', 'true');
+
       $(document.body).on('mousedown.select2.' + container.id, function (e) {
         var $target = $(e.target);
 
@@ -10129,10 +10149,16 @@ define('select2/selection/base',[
           $element.select2('close');
         });
       });
+    });
 
-      container.on('close', function () {
-        $(document.body).off('mousedown.select2.' + container.id);
-      });
+    container.on('close', function () {
+      // When the dropdown is closed, aria-expanded="false"
+      self.$selection.attr('aria-expanded', 'false');
+      self.$selection.removeAttr('aria-activedescendant');
+
+      self.$selection.focus();
+
+      $(document.body).off('mousedown.select2.' + container.id);
     });
   };
 
@@ -10220,11 +10246,9 @@ 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
@@ -10237,19 +10261,6 @@ define('select2/selection/single',[
       });
     });
 
-    container.on('open', function () {
-      // When the dropdown is open, aria-expanded="true"
-      self.$selection.attr('aria-expanded', 'true');
-    });
-
-    container.on('close', function () {
-      // When the dropdown is closed, aria-expanded="false"
-      self.$selection.attr('aria-expanded', 'false');
-      self.$selection.removeAttr('aria-activedescendant');
-
-      self.$selection.focus();
-    });
-
     this.$selection.on('focus', function (evt) {
       // User focuses on the container
     });
@@ -10258,18 +10269,6 @@ define('select2/selection/single',[
       // User exits the container
     });
 
-    this.$selection.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      if (evt.which === KEYS.SPACE) {
-        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);
     });
@@ -10317,11 +10316,14 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select">' +
+      '<span class="multiple-select" tabindex="0" role="combobox" ' +
+        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
         '<ul class="rendered-selection"></ul>' +
       '</span>'
     );
 
+    $selection.attr('title', this.$element.attr('title'));
+
     this.$selection = $selection;
 
     return $selection;

dist/js/select2.js

@@ -998,11 +998,31 @@ define('select2/selection/base',[
   BaseSelection.prototype.bind = function (container, $container) {
     var self = this;
 
+    var id = container.id + '-container';
+    var resultsId = container.id + '-results';
+
+    this.$selection.attr('aria-owns', resultsId);
+
+    this.$selection.on('keydown', function (evt) {
+      self.trigger('keypress', evt);
+
+      if (evt.which === KEYS.SPACE) {
+        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);
     });
 
     container.on('open', function () {
+      // When the dropdown is open, aria-expanded="true"
+      self.$selection.attr('aria-expanded', 'true');
+
       $(document.body).on('mousedown.select2.' + container.id, function (e) {
         var $target = $(e.target);
 
@@ -1022,10 +1042,16 @@ define('select2/selection/base',[
           $element.select2('close');
         });
       });
+    });
 
-      container.on('close', function () {
-        $(document.body).off('mousedown.select2.' + container.id);
-      });
+    container.on('close', function () {
+      // When the dropdown is closed, aria-expanded="false"
+      self.$selection.attr('aria-expanded', 'false');
+      self.$selection.removeAttr('aria-activedescendant');
+
+      self.$selection.focus();
+
+      $(document.body).off('mousedown.select2.' + container.id);
     });
   };
 
@@ -1113,11 +1139,9 @@ 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
@@ -1130,19 +1154,6 @@ define('select2/selection/single',[
       });
     });
 
-    container.on('open', function () {
-      // When the dropdown is open, aria-expanded="true"
-      self.$selection.attr('aria-expanded', 'true');
-    });
-
-    container.on('close', function () {
-      // When the dropdown is closed, aria-expanded="false"
-      self.$selection.attr('aria-expanded', 'false');
-      self.$selection.removeAttr('aria-activedescendant');
-
-      self.$selection.focus();
-    });
-
     this.$selection.on('focus', function (evt) {
       // User focuses on the container
     });
@@ -1151,18 +1162,6 @@ define('select2/selection/single',[
       // User exits the container
     });
 
-    this.$selection.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      if (evt.which === KEYS.SPACE) {
-        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);
     });
@@ -1210,11 +1209,14 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select">' +
+      '<span class="multiple-select" tabindex="0" role="combobox" ' +
+        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
         '<ul class="rendered-selection"></ul>' +
       '</span>'
     );
 
+    $selection.attr('title', this.$element.attr('title'));
+
     this.$selection = $selection;
 
     return $selection;

src/js/select2/selection/base.js

@@ -17,11 +17,31 @@ define([
   BaseSelection.prototype.bind = function (container, $container) {
     var self = this;
 
+    var id = container.id + '-container';
+    var resultsId = container.id + '-results';
+
+    this.$selection.attr('aria-owns', resultsId);
+
+    this.$selection.on('keydown', function (evt) {
+      self.trigger('keypress', evt);
+
+      if (evt.which === KEYS.SPACE) {
+        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);
     });
 
     container.on('open', function () {
+      // When the dropdown is open, aria-expanded="true"
+      self.$selection.attr('aria-expanded', 'true');
+
       $(document.body).on('mousedown.select2.' + container.id, function (e) {
         var $target = $(e.target);
 
@@ -41,10 +61,16 @@ define([
           $element.select2('close');
         });
       });
+    });
 
-      container.on('close', function () {
-        $(document.body).off('mousedown.select2.' + container.id);
-      });
+    container.on('close', function () {
+      // When the dropdown is closed, aria-expanded="false"
+      self.$selection.attr('aria-expanded', 'false');
+      self.$selection.removeAttr('aria-activedescendant');
+
+      self.$selection.focus();
+
+      $(document.body).off('mousedown.select2.' + container.id);
     });
   };
 

src/js/select2/selection/multiple.js

@@ -10,11 +10,14 @@ define([
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select">' +
+      '<span class="multiple-select" tabindex="0" role="combobox" ' +
+        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
         '<ul class="rendered-selection"></ul>' +
       '</span>'
     );
 
+    $selection.attr('title', this.$element.attr('title'));
+
     this.$selection = $selection;
 
     return $selection;

src/js/select2/selection/single.js

@@ -30,11 +30,9 @@ define([
     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
@@ -47,19 +45,6 @@ define([
       });
     });
 
-    container.on('open', function () {
-      // When the dropdown is open, aria-expanded="true"
-      self.$selection.attr('aria-expanded', 'true');
-    });
-
-    container.on('close', function () {
-      // When the dropdown is closed, aria-expanded="false"
-      self.$selection.attr('aria-expanded', 'false');
-      self.$selection.removeAttr('aria-activedescendant');
-
-      self.$selection.focus();
-    });
-
     this.$selection.on('focus', function (evt) {
       // User focuses on the container
     });
@@ -68,18 +53,6 @@ define([
       // User exits the container
     });
 
-    this.$selection.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      if (evt.which === KEYS.SPACE) {
-        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);
     });