library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Selectmenu: hopefully fixed multiple a11y bugs (value is recognized by screenreader: in collapsed state, when selecting a value, on tab focus; label points to button now)

Browse Source
This commit is contained in:
Felix Nagel 2012-10-25 23:57:36 +02:00
parent e7e73cec07
commit 7c1a9d9a36
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui/jquery.ui.selectmenu.js vendored
View File

@ -42,14 +42,6 @@ $.widget( "ui.selectmenu", {
// array of button and menu id's // array of button and menu id's
this.ids = { id: selectmenuId, button: selectmenuId + '-button', menu: selectmenuId + '-menu' }; this.ids = { id: selectmenuId, button: selectmenuId + '-button', menu: selectmenuId + '-menu' };
// catch click event of the label
this._on({
'click': function( event ) {
this.button.focus();
event.preventDefault();
}
});
this._drawButton(); this._drawButton();
this._on( this.button, this._buttonEvents ); this._on( this.button, this._buttonEvents );
this._hoverable( this.button ); this._hoverable( this.button );
@ -74,8 +66,15 @@ $.widget( "ui.selectmenu", {
_drawButton: function() { _drawButton: function() {
var tabindex = this.element.attr( 'tabindex' ); var tabindex = this.element.attr( 'tabindex' );
// Find existing label // fix existing label
this.labelElement = $( "label[for='" + this.ids.id + "']" ).uniqueId(); this.label = $( "label[for='" + this.ids.id + "']" ).attr( "for", this.ids.button );
// catch click event of the label
this._on( this.label, {
'click': function( event ) {
this.button.focus();
event.preventDefault();
}
});
// hide original select tag // hide original select tag
this.element.hide(); this.element.hide();
@ -88,7 +87,6 @@ $.widget( "ui.selectmenu", {
id: this.ids.button, id: this.ids.button,
width: this.element.outerWidth(), width: this.element.outerWidth(),
role: 'combobox', role: 'combobox',
'aria-labelledby': this.labelElement.attr( "id" ),
'aria-expanded': false, 'aria-expanded': false,
'aria-autocomplete': 'list', 'aria-autocomplete': 'list',
'aria-owns': this.ids.menu, 'aria-owns': this.ids.menu,
@ -378,12 +376,16 @@ $.widget( "ui.selectmenu", {
}, },
_setSelected: function( item ) { _setSelected: function( item ) {
var itemId = this.menuItems.eq( item.index ).find( "a" ).attr( "id" );
// update button text // update button text
this.buttonText.html( item.label ); this.buttonText.html( item.label );
// change ARIA attr // change ARIA attr
this.menuItems.find( "a" ).attr( "aria-selected", false ); this.menuItems.find( "a" ).attr( "aria-selected", false );
this._getSelectedItem().find( "a" ).attr( "aria-selected", true ); this._getSelectedItem().find( "a" ).attr( "aria-selected", true );
this.button.attr( "aria-activedescendant", this.menuItems.eq( item.index ).find( "a" ).attr( "id" ) ); this.button.attr({
"aria-activedescendant": itemId,
"aria-labelledby": itemId
});
}, },
_setOption: function( key, value ) { _setOption: function( key, value ) {
@ -440,7 +442,7 @@ $.widget( "ui.selectmenu", {
this.buttonWrap.remove(); this.buttonWrap.remove();
this.element.show(); this.element.show();
this.element.removeUniqueId(); this.element.removeUniqueId();
this.labelElement.removeUniqueId(); this.label.attr( "for", this.ids.id );
} }
}); });