Skip to content

Commit 7c1a9d9

Browse files
committed
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)
1 parent e7e73ce commit 7c1a9d9

File tree

1 file changed

+15
-13
lines changed

1 file changed

+15
-13
lines changed

ui/jquery.ui.selectmenu.js

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,6 @@ $.widget( "ui.selectmenu", {
4242
// array of button and menu id's
4343
this.ids = { id: selectmenuId, button: selectmenuId + '-button', menu: selectmenuId + '-menu' };
4444

45-
// catch click event of the label
46-
this._on({
47-
'click': function( event ) {
48-
this.button.focus();
49-
event.preventDefault();
50-
}
51-
});
52-
5345
this._drawButton();
5446
this._on( this.button, this._buttonEvents );
5547
this._hoverable( this.button );
@@ -74,8 +66,15 @@ $.widget( "ui.selectmenu", {
7466
_drawButton: function() {
7567
var tabindex = this.element.attr( 'tabindex' );
7668

77-
// Find existing label
78-
this.labelElement = $( "label[for='" + this.ids.id + "']" ).uniqueId();
69+
// fix existing label
70+
this.label = $( "label[for='" + this.ids.id + "']" ).attr( "for", this.ids.button );
71+
// catch click event of the label
72+
this._on( this.label, {
73+
'click': function( event ) {
74+
this.button.focus();
75+
event.preventDefault();
76+
}
77+
});
7978

8079
// hide original select tag
8180
this.element.hide();
@@ -88,7 +87,6 @@ $.widget( "ui.selectmenu", {
8887
id: this.ids.button,
8988
width: this.element.outerWidth(),
9089
role: 'combobox',
91-
'aria-labelledby': this.labelElement.attr( "id" ),
9290
'aria-expanded': false,
9391
'aria-autocomplete': 'list',
9492
'aria-owns': this.ids.menu,
@@ -378,12 +376,16 @@ $.widget( "ui.selectmenu", {
378376
},
379377

380378
_setSelected: function( item ) {
379+
var itemId = this.menuItems.eq( item.index ).find( "a" ).attr( "id" );
381380
// update button text
382381
this.buttonText.html( item.label );
383382
// change ARIA attr
384383
this.menuItems.find( "a" ).attr( "aria-selected", false );
385384
this._getSelectedItem().find( "a" ).attr( "aria-selected", true );
386-
this.button.attr( "aria-activedescendant", this.menuItems.eq( item.index ).find( "a" ).attr( "id" ) );
385+
this.button.attr({
386+
"aria-activedescendant": itemId,
387+
"aria-labelledby": itemId
388+
});
387389
},
388390

389391
_setOption: function( key, value ) {
@@ -440,7 +442,7 @@ $.widget( "ui.selectmenu", {
440442
this.buttonWrap.remove();
441443
this.element.show();
442444
this.element.removeUniqueId();
443-
this.labelElement.removeUniqueId();
445+
this.label.attr( "for", this.ids.id );
444446
}
445447
});
446448

0 commit comments

Comments
 (0)