From a5ab08b49cb23024f4f113acb14a94e65e51bdba Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 20 Apr 2016 15:14:39 +0200 Subject: [PATCH 1/4] Fixed main ARIA roles, aria-activedescendant, and aria-owns. --- src/js/select2/dropdown/infiniteScroll.js | 2 +- src/js/select2/dropdown/search.js | 14 ++++++++++---- src/js/select2/results.js | 6 +++--- src/js/select2/selection/base.js | 8 -------- src/js/select2/selection/search.js | 9 ++++++--- 5 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/js/select2/dropdown/infiniteScroll.js b/src/js/select2/dropdown/infiniteScroll.js index 41d85de0b3..99607a3922 100644 --- a/src/js/select2/dropdown/infiniteScroll.js +++ b/src/js/select2/dropdown/infiniteScroll.js @@ -75,7 +75,7 @@ define([ var $option = $( '
  • ' + 'role="option" aria-disabled="true">' ); var message = this.options.get('translations').get('loadingMore'); diff --git a/src/js/select2/dropdown/search.js b/src/js/select2/dropdown/search.js index f7f802a8b9..6b8175d3bf 100644 --- a/src/js/select2/dropdown/search.js +++ b/src/js/select2/dropdown/search.js @@ -9,9 +9,9 @@ define([ var $search = $( '' + - '' + + ' spellcheck="false" role="combobox" aria-autocomplete="list" />' + '' ); @@ -25,6 +25,7 @@ define([ Search.prototype.bind = function (decorated, container, $container) { var self = this; + var resultsId = container.id + '-results'; decorated.call(this, container, $container); @@ -48,7 +49,7 @@ define([ container.on('open', function () { self.$search.attr('tabindex', 0); - + self.$search.attr('aria-owns', resultsId); self.$search.focus(); window.setTimeout(function () { @@ -58,7 +59,8 @@ define([ container.on('close', function () { self.$search.attr('tabindex', -1); - + self.$search.removeAttr('aria-activedescendant'); + self.$search.removeAttr('aria-owns'); self.$search.val(''); }); @@ -73,6 +75,10 @@ define([ } } }); + + container.on('results:focus', function (params) { + self.$search.attr('aria-activedescendant', params.data._resultId); + }); }; Search.prototype.handleSearch = function (evt) { diff --git a/src/js/select2/results.js b/src/js/select2/results.js index e55cc8793e..b896852bb4 100644 --- a/src/js/select2/results.js +++ b/src/js/select2/results.js @@ -14,7 +14,7 @@ define([ Results.prototype.render = function () { var $results = $( - '' + '' ); if (this.options.get('multiple')) { @@ -37,7 +37,7 @@ define([ this.hideLoading(); var $message = $( - '
  • ' ); @@ -163,7 +163,7 @@ define([ option.className = 'select2-results__option'; var attrs = { - 'role': 'treeitem', + 'role': 'option', 'aria-selected': 'false' }; diff --git a/src/js/select2/selection/base.js b/src/js/select2/selection/base.js index cd3aafdab7..508f7f1b1e 100644 --- a/src/js/select2/selection/base.js +++ b/src/js/select2/selection/base.js @@ -38,9 +38,6 @@ define([ BaseSelection.prototype.bind = function (container, $container) { var self = this; - var id = container.id + '-container'; - var resultsId = container.id + '-results'; - this.container = container; this.$selection.on('focus', function (evt) { @@ -59,10 +56,6 @@ define([ } }); - container.on('results:focus', function (params) { - self.$selection.attr('aria-activedescendant', params.data._resultId); - }); - container.on('selection:update', function (params) { self.update(params.data); }); @@ -70,7 +63,6 @@ define([ container.on('open', function () { // When the dropdown is open, aria-expanded="true" self.$selection.attr('aria-expanded', 'true'); - self.$selection.attr('aria-owns', resultsId); self._attachCloseHandler(container); }); diff --git a/src/js/select2/selection/search.js b/src/js/select2/selection/search.js index 77c4edca7b..d6f7ca31e7 100644 --- a/src/js/select2/selection/search.js +++ b/src/js/select2/selection/search.js @@ -10,9 +10,9 @@ define([ Search.prototype.render = function (decorated) { var $search = $( '
  • ' + - '' + + ' spellcheck="false" role="combobox" aria-autocomplete="list" />' + '
    • ' ); @@ -28,16 +28,19 @@ define([ Search.prototype.bind = function (decorated, container, $container) { var self = this; + var resultsId = container.id + '-results'; decorated.call(this, container, $container); container.on('open', function () { + self.$search.attr('aria-owns', resultsId); self.$search.trigger('focus'); }); container.on('close', function () { self.$search.val(''); self.$search.removeAttr('aria-activedescendant'); + self.$search.removeAttr('aria-owns'); self.$search.trigger('focus'); }); @@ -56,7 +59,7 @@ define([ }); container.on('results:focus', function (params) { - self.$search.attr('aria-activedescendant', params.id); + self.$search.attr('aria-activedescendant', params.data._resultId); }); this.$selection.on('focusin', '.select2-search--inline', function (evt) { From a1a96df881cd391582c46cddc3a54d5ab1287851 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 21 Apr 2016 17:46:50 +0200 Subject: [PATCH 2/4] Restore ARIA properties on the selection when the search is hidden. --- src/js/select2/selection/base.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/js/select2/selection/base.js b/src/js/select2/selection/base.js index 508f7f1b1e..7dedbc12af 100644 --- a/src/js/select2/selection/base.js +++ b/src/js/select2/selection/base.js @@ -38,6 +38,10 @@ define([ BaseSelection.prototype.bind = function (container, $container) { var self = this; + var id = container.id + '-container'; + var resultsId = container.id + '-results'; + var isSearchHidden = this.options.get('minimumResultsForSearch') === Infinity ? true : false; + this.container = container; this.$selection.on('focus', function (evt) { @@ -56,6 +60,12 @@ define([ } }); + container.on('results:focus', function (params) { + if (isSearchHidden) { + self.$selection.attr('aria-activedescendant', params.data._resultId); + } + }); + container.on('selection:update', function (params) { self.update(params.data); }); @@ -63,6 +73,9 @@ define([ container.on('open', function () { // When the dropdown is open, aria-expanded="true" self.$selection.attr('aria-expanded', 'true'); + if (isSearchHidden) { + self.$selection.attr('aria-owns', resultsId); + } self._attachCloseHandler(container); }); From c53c1ab3d3b09233633a7b0168324519b40c4a76 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 9 May 2016 18:24:47 +0200 Subject: [PATCH 3/4] Fix ARIA role for the aria-live message. --- src/js/select2/results.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/select2/results.js b/src/js/select2/results.js index b896852bb4..f33d8d7f3e 100644 --- a/src/js/select2/results.js +++ b/src/js/select2/results.js @@ -37,7 +37,7 @@ define([ this.hideLoading(); var $message = $( - '
  • ' ); From 4ee1ebf1e82395733fa3ff011425d6d9bc610068 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 10 May 2016 13:11:55 +0200 Subject: [PATCH 4/4] Shorten line length to make jshint happy. --- src/js/select2/selection/base.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/select2/selection/base.js b/src/js/select2/selection/base.js index 7dedbc12af..c637354862 100644 --- a/src/js/select2/selection/base.js +++ b/src/js/select2/selection/base.js @@ -40,7 +40,7 @@ define([ var id = container.id + '-container'; var resultsId = container.id + '-results'; - var isSearchHidden = this.options.get('minimumResultsForSearch') === Infinity ? true : false; + var searchHidden = this.options.get('minimumResultsForSearch') === Infinity; this.container = container; @@ -61,7 +61,7 @@ define([ }); container.on('results:focus', function (params) { - if (isSearchHidden) { + if (searchHidden) { self.$selection.attr('aria-activedescendant', params.data._resultId); } }); @@ -73,7 +73,7 @@ define([ container.on('open', function () { // When the dropdown is open, aria-expanded="true" self.$selection.attr('aria-expanded', 'true'); - if (isSearchHidden) { + if (searchHidden) { self.$selection.attr('aria-owns', resultsId); }