r2820 - some updates to the ARIA implementation
Author: scottjehl
Date: Fri Jun 19 09:22:18 2009
New Revision: 2820
Modified:
branches/labs/selectmenu/ui.selectmenu.js
Log:
some updates to the ARIA implementation
Modified: branches/labs/selectmenu/ui.selectmenu.js
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.js (original)
+++ branches/labs/selectmenu/ui.selectmenu.js Fri Jun 19 09:22:18 2009
@@ -22,7 +22,7 @@
this._safemouseup = true;
//create menu button wrapper
- this.newelement = $('<a class="'+ this.widgetBaseClass +' ui-widget
ui-state-default ui-corner-all" id="'+this.ids[0]+'" href="#"
aria-haspopup="true" aria-owns="'+this.ids[1]+'"></a>')
+ this.newelement = $('<a class="'+ this.widgetBaseClass +' ui-widget
ui-state-default ui-corner-all" id="'+this.ids[0]+'" role="button" href="#"
aria-haspopup="true" aria-owns="'+this.ids[1]+'"
aria-expanded="false"></a>')
.insertAfter(this.element);
//transfer tabindex
@@ -110,7 +110,7 @@
//create menu portion, append to body
var cornerClass = (o.style == "dropdown")? " ui-corner-bottom" : "
ui-corner-all"
- this.list = $('<ul class="' + self.widgetBaseClass + '-menu ui-widget
ui-widget-content'+cornerClass+'" role="menu"
aria-labelledby="'+this.ids[0]+'"
id="'+this.ids[1]+'"></ul>').appendTo('body');
+ this.list = $('<ul class="' + self.widgetBaseClass + '-menu ui-widget
ui-widget-content'+cornerClass+'" aria-hidden="true" role="listbox"
aria-multiselectable="false" aria-labelledby="'+this.ids[0]+'"
id="'+this.ids[1]+'"></ul>').appendTo('body');
//serialize selectmenu element options
var selectOptionData = [];
@@ -347,10 +347,14 @@
var self = this;
this._refreshPosition();
this._closeOthers(event);
- this.newelement.addClass('ui-state-active');
+ this.newelement
+ .attr('aria-expanded', true)
+ .addClass('ui-state-active');
+
this.list
.appendTo('body')
.addClass(self.widgetBaseClass + '-open')
+ .attr('aria-hidden', false)
.find('li:not(.'+ self.widgetBaseClass +'-group):eq('+
this._selectedIndex() +') a').focus();
if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); }
this._refreshPosition();
@@ -358,8 +362,12 @@
},
close: function(event, retainFocus){
if(this.newelement.is('.ui-state-active')){
- this.newelement.removeClass('ui-state-active');
- this.list.removeClass(this.widgetBaseClass+'-open');
+ this.newelement
+ .attr('aria-expanded', false)
+ .removeClass('ui-state-active');
+ this.list
+ .attr('aria-hidden', true)
+ .removeClass(this.widgetBaseClass+'-open');
if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-top').addClass('ui-corner-all'); }
if(retainFocus){this.newelement.focus();}
this._trigger("close", event, this._uiHash());