Selectmenu: ARIA tweaks for keyboard events and closed menu operation

This commit is contained in:
Robert Beuligmann 2012-10-15 16:58:31 -05:00
parent c59fbbaad7
commit 20d19dbbf1

View File

@ -73,6 +73,10 @@ $.widget( "ui.selectmenu", {
_drawButton: function() { _drawButton: function() {
var tabindex = this.element.attr( 'tabindex' ); var tabindex = this.element.attr( 'tabindex' );
var labelSelector = "label[for='" + this.element.attr("id") + "']";
// Find existing label
this.labelElement = $( labelSelector ).uniqueId();
// hide original select tag // hide original select tag
this.element.hide(); this.element.hide();
@ -85,6 +89,7 @@ $.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,
@ -150,6 +155,10 @@ $.widget( "ui.selectmenu", {
} }
} }
that.focus = item.index; that.focus = item.index;
// Set ARIA active decendent
that.button.attr( "aria-activedescendant", item.element.uniqueId().attr( "id" ) );
}, },
// set ARIA role // set ARIA role
role: 'listbox' role: 'listbox'
@ -330,6 +339,9 @@ $.widget( "ui.selectmenu", {
this._move( "next", event ); this._move( "next", event );
} }
break; break;
case $.ui.keyCode.SPACE:
this._toggle( event );
break;
case $.ui.keyCode.LEFT: case $.ui.keyCode.LEFT:
this._move( "previous", event ); this._move( "previous", event );
break; break;
@ -372,6 +384,7 @@ $.widget( "ui.selectmenu", {
// 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", item.element.uniqueId().attr( "id" ) );
}, },
_setOption: function( key, value ) { _setOption: function( key, value ) {
@ -427,6 +440,7 @@ $.widget( "ui.selectmenu", {
this.menuWrap.remove(); this.menuWrap.remove();
this.buttonWrap.remove(); this.buttonWrap.remove();
this.element.show(); this.element.show();
this.labelElement.removeUniqueId();
} }
}); });