Mirror disabled state through aria-disabled on selection

src/js/select2/selection/base.js

@@ -29,6 +29,7 @@ define([
 
     $selection.attr('title', this.$element.attr('title'));
     $selection.attr('tabindex', this._tabindex);
+    $selection.attr('aria-disabled', 'false');
 
     this.$selection = $selection;
 
@@ -88,10 +89,12 @@ define([
 
     container.on('enable', function () {
       self.$selection.attr('tabindex', self._tabindex);
+      self.$selection.attr('aria-disabled', 'false');
     });
 
     container.on('disable', function () {
       self.$selection.attr('tabindex', '-1');
+      self.$selection.attr('aria-disabled', 'true');
     });
   };
 

tests/a11y/selection-tests.js

@@ -131,6 +131,38 @@ test('a custom tabindex is copied', function (assert) {
   );
 });
 
+test('aria-disabled should reflected disabled state', function (assert) {
+  var $select = $('#qunit-fixture .single');
+
+  var selection = new BaseSelection($select, options);
+  var $selection = selection.render();
+
+  var container = new MockContainer();
+  selection.bind(container, $('<span></span>'));
+
+  assert.equal(
+    $selection.attr('aria-disabled'),
+    'false',
+    'The tab index should match the original tab index'
+  );
+
+  container.trigger('disable');
+
+  assert.equal(
+    $selection.attr('aria-disabled'),
+    'true',
+    'The selection should be dropped out of the tab order when disabled'
+  );
+
+  container.trigger('enable');
+
+  assert.equal(
+    $selection.attr('aria-disabled'),
+    'false',
+    'The tab index should be restored when re-enabled'
+  );
+});
+
 module('Accessibility - Single');
 
 test('aria-labelledby should match the rendered container', function (assert) {