From 89576153a026e5bdf254bf63f7ef2541e8d03928 Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin-brown@users.noreply.github.com>
Date: Sun, 21 Jul 2019 11:44:09 -0400
Subject: [PATCH] Mirror disabled state through aria-disabled on selection
 (#5579)

This is needed to screen readers know that the Select2 is disabled
when focus is put on the selection container. Because we were
mirroring the disabled state to the search input on a multiple
select in the past, this is really only needed for single select
elements which would not otherwise has the disabled property.

This was identified in a previous accessibility audit as being
something which Select2 did not properly report because we were
not setting the attributes properly.

Fixes #4575
---
 src/js/select2/selection/base.js |  3 +++
 tests/a11y/selection-tests.js    | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/js/select2/selection/base.js b/src/js/select2/selection/base.js
index d79c960b..b83c2688 100644
--- a/src/js/select2/selection/base.js
+++ b/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');
     });
   };
 
diff --git a/tests/a11y/selection-tests.js b/tests/a11y/selection-tests.js
index e2c14602..b2f1b2e4 100644
--- a/tests/a11y/selection-tests.js
+++ b/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) {