RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-26 06:46:04 +03:00
Code Issues Projects Releases Wiki Activity

Better accessibility for multiple select boxes

Browse Source
This commit is contained in:
Kevin Brown 2014-11-19 15:50:53 -05:00
parent cee8c18c23
commit 28c56e7885
9 changed files with 168 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
dist/js/select2.amd.full.js vendored
View File

@ -570,11 +570,31 @@ define('select2/selection/base',[
BaseSelection.prototype.bind = function (container, $container) { BaseSelection.prototype.bind = function (container, $container) {
var self = this; 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
container.on('open', function () { 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) { $(document.body).on('mousedown.select2.' + container.id, function (e) {
var $target = $(e.target); var $target = $(e.target);
@ -594,10 +614,16 @@ define('select2/selection/base',[
$element.select2('close'); $element.select2('close');
}); });
}); });
});
container.on('close', function () { container.on('close', function () {
$(document.body).off('mousedown.select2.' + container.id); // 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); SingleSelection.__super__.bind.apply(this, arguments);
var id = container.id + '-container'; var id = container.id + '-container';
var resultsId = container.id + '-results';
this.$selection.find('.rendered-selection').attr('id', id); this.$selection.find('.rendered-selection').attr('id', id);
this.$selection.attr('aria-labelledby', id); this.$selection.attr('aria-labelledby', id);
this.$selection.attr('aria-owns', resultsId);
this.$selection.on('mousedown', function (evt) { this.$selection.on('mousedown', function (evt) {
// Only respond to left clicks // 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) { this.$selection.on('focus', function (evt) {
// User focuses on the container // User focuses on the container
}); });
@ -723,18 +734,6 @@ define('select2/selection/single',[
// User exits the container // 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
@ -782,11 +781,14 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.render = function () { MultipleSelection.prototype.render = function () {
var $selection = $( 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>' + '<ul class="rendered-selection"></ul>' +
'</span>' '</span>'
); );
$selection.attr('title', this.$element.attr('title'));
this.$selection = $selection; this.$selection = $selection;
return $selection; return $selection;

64
dist/js/select2.amd.js vendored
View File

@ -570,11 +570,31 @@ define('select2/selection/base',[
BaseSelection.prototype.bind = function (container, $container) { BaseSelection.prototype.bind = function (container, $container) {
var self = this; 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
container.on('open', function () { 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) { $(document.body).on('mousedown.select2.' + container.id, function (e) {
var $target = $(e.target); var $target = $(e.target);
@ -594,10 +614,16 @@ define('select2/selection/base',[
$element.select2('close'); $element.select2('close');
}); });
}); });
});
container.on('close', function () { container.on('close', function () {
$(document.body).off('mousedown.select2.' + container.id); // 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); SingleSelection.__super__.bind.apply(this, arguments);
var id = container.id + '-container'; var id = container.id + '-container';
var resultsId = container.id + '-results';
this.$selection.find('.rendered-selection').attr('id', id); this.$selection.find('.rendered-selection').attr('id', id);
this.$selection.attr('aria-labelledby', id); this.$selection.attr('aria-labelledby', id);
this.$selection.attr('aria-owns', resultsId);
this.$selection.on('mousedown', function (evt) { this.$selection.on('mousedown', function (evt) {
// Only respond to left clicks // 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) { this.$selection.on('focus', function (evt) {
// User focuses on the container // User focuses on the container
}); });
@ -723,18 +734,6 @@ define('select2/selection/single',[
// User exits the container // 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
@ -782,11 +781,14 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.render = function () { MultipleSelection.prototype.render = function () {
var $selection = $( 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>' + '<ul class="rendered-selection"></ul>' +
'</span>' '</span>'
); );
$selection.attr('title', this.$element.attr('title'));
this.$selection = $selection; this.$selection = $selection;
return $selection; return $selection;

64
dist/js/select2.full.js vendored
View File

@ -10105,11 +10105,31 @@ define('select2/selection/base',[
BaseSelection.prototype.bind = function (container, $container) { BaseSelection.prototype.bind = function (container, $container) {
var self = this; 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
container.on('open', function () { 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) { $(document.body).on('mousedown.select2.' + container.id, function (e) {
var $target = $(e.target); var $target = $(e.target);
@ -10129,10 +10149,16 @@ define('select2/selection/base',[
$element.select2('close'); $element.select2('close');
}); });
}); });
});
container.on('close', function () { container.on('close', function () {
$(document.body).off('mousedown.select2.' + container.id); // 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); SingleSelection.__super__.bind.apply(this, arguments);
var id = container.id + '-container'; var id = container.id + '-container';
var resultsId = container.id + '-results';
this.$selection.find('.rendered-selection').attr('id', id); this.$selection.find('.rendered-selection').attr('id', id);
this.$selection.attr('aria-labelledby', id); this.$selection.attr('aria-labelledby', id);
this.$selection.attr('aria-owns', resultsId);
this.$selection.on('mousedown', function (evt) { this.$selection.on('mousedown', function (evt) {
// Only respond to left clicks // 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) { this.$selection.on('focus', function (evt) {
// User focuses on the container // User focuses on the container
}); });
@ -10258,18 +10269,6 @@ define('select2/selection/single',[
// User exits the container // 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
@ -10317,11 +10316,14 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.render = function () { MultipleSelection.prototype.render = function () {
var $selection = $( 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>' + '<ul class="rendered-selection"></ul>' +
'</span>' '</span>'
); );
$selection.attr('title', this.$element.attr('title'));
this.$selection = $selection; this.$selection = $selection;
return $selection; return $selection;

4
dist/js/select2.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

64
dist/js/select2.js vendored
View File

@ -998,11 +998,31 @@ define('select2/selection/base',[
BaseSelection.prototype.bind = function (container, $container) { BaseSelection.prototype.bind = function (container, $container) {
var self = this; 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
container.on('open', function () { 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) { $(document.body).on('mousedown.select2.' + container.id, function (e) {
var $target = $(e.target); var $target = $(e.target);
@ -1022,10 +1042,16 @@ define('select2/selection/base',[
$element.select2('close'); $element.select2('close');
}); });
}); });
});
container.on('close', function () { container.on('close', function () {
$(document.body).off('mousedown.select2.' + container.id); // 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); SingleSelection.__super__.bind.apply(this, arguments);
var id = container.id + '-container'; var id = container.id + '-container';
var resultsId = container.id + '-results';
this.$selection.find('.rendered-selection').attr('id', id); this.$selection.find('.rendered-selection').attr('id', id);
this.$selection.attr('aria-labelledby', id); this.$selection.attr('aria-labelledby', id);
this.$selection.attr('aria-owns', resultsId);
this.$selection.on('mousedown', function (evt) { this.$selection.on('mousedown', function (evt) {
// Only respond to left clicks // 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) { this.$selection.on('focus', function (evt) {
// User focuses on the container // User focuses on the container
}); });
@ -1151,18 +1162,6 @@ define('select2/selection/single',[
// User exits the container // 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
@ -1210,11 +1209,14 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.render = function () { MultipleSelection.prototype.render = function () {
var $selection = $( 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>' + '<ul class="rendered-selection"></ul>' +
'</span>' '</span>'
); );
$selection.attr('title', this.$element.attr('title'));
this.$selection = $selection; this.$selection = $selection;
return $selection; return $selection;

2
dist/js/select2.min.js vendored
View File

File diff suppressed because one or more lines are too long

32
src/js/select2/selection/base.js vendored
View File

@ -17,11 +17,31 @@ define([
BaseSelection.prototype.bind = function (container, $container) { BaseSelection.prototype.bind = function (container, $container) {
var self = this; 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });
container.on('open', function () { 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) { $(document.body).on('mousedown.select2.' + container.id, function (e) {
var $target = $(e.target); var $target = $(e.target);
@ -41,10 +61,16 @@ define([
$element.select2('close'); $element.select2('close');
}); });
}); });
});
container.on('close', function () { container.on('close', function () {
$(document.body).off('mousedown.select2.' + container.id); // 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);
}); });
}; };

5
src/js/select2/selection/multiple.js vendored
View File

@ -10,11 +10,14 @@ define([
MultipleSelection.prototype.render = function () { MultipleSelection.prototype.render = function () {
var $selection = $( 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>' + '<ul class="rendered-selection"></ul>' +
'</span>' '</span>'
); );
$selection.attr('title', this.$element.attr('title'));
this.$selection = $selection; this.$selection = $selection;
return $selection; return $selection;

27
src/js/select2/selection/single.js vendored
View File

@ -30,11 +30,9 @@ define([
SingleSelection.__super__.bind.apply(this, arguments); SingleSelection.__super__.bind.apply(this, arguments);
var id = container.id + '-container'; var id = container.id + '-container';
var resultsId = container.id + '-results';
this.$selection.find('.rendered-selection').attr('id', id); this.$selection.find('.rendered-selection').attr('id', id);
this.$selection.attr('aria-labelledby', id); this.$selection.attr('aria-labelledby', id);
this.$selection.attr('aria-owns', resultsId);
this.$selection.on('mousedown', function (evt) { this.$selection.on('mousedown', function (evt) {
// Only respond to left clicks // 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) { this.$selection.on('focus', function (evt) {
// User focuses on the container // User focuses on the container
}); });
@ -68,18 +53,6 @@ define([
// User exits the container // 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) { container.on('selection:update', function (params) {
self.update(params.data); self.update(params.data);
}); });