Skip to content

Commit

Permalink
Selectmenu: Introduce menuWidget method, to get access to the menu el…
Browse files Browse the repository at this point in the history 
…ement. Fix various tests and simplify demos accordingly. Add comment about optgroup-click-handling.
  • Loading branch information
@jzaefferer
jzaefferer committed Feb 21, 2012
1 parent b15dc8e commit 59d1580
Show file tree
Hide file tree
Showing 8 changed files with 45 additions and 63 deletions.
6 changes: 3 additions & 3 deletions demos/selectmenu/custom_render.html
View file
Expand Up @@ -36,15 +36,15 @@
var files = $('select#files').iconselectmenu({
dropdown: false
});
files.iconselectmenu("widget").children("ul").addClass("ui-menu-icons");
files.iconselectmenu("menuWidget").addClass("ui-menu-icons");

var filesB = $('select#filesB').iconselectmenu({
dropdown: false
});
filesB.iconselectmenu("widget").children("ul").addClass("ui-menu-icons customicons");
filesB.iconselectmenu("menuWidget").addClass("ui-menu-icons customicons");

var peopleA = $('select#peopleA').iconselectmenu();
peopleA.iconselectmenu("widget").children("ul").addClass("ui-menu-icons avatar");
peopleA.iconselectmenu("menuWidget").addClass("ui-menu-icons avatar");
});
</script>
<style>
Expand Down
4 changes: 2 additions & 2 deletions demos/selectmenu/default.html
View file
Expand Up @@ -21,15 +21,15 @@
var withOverflow = $('#number').selectmenu({
dropdown: false
});
withOverflow.selectmenu("widget").addClass("overflow");
withOverflow.selectmenu("menuWidget").addClass("overflow");
});
</script>
<style>
form { margin: 50px 0 0 0 }
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
.overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
.overflow { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
</style>
</head>
<body>
Expand Down
17 changes: 6 additions & 11 deletions tests/unit/selectmenu/selectmenu_core.js
View file
Expand Up @@ -4,21 +4,19 @@ module( "selectmenu: core" );

test("accessibility", function () {
var element = $('#speed').selectmenu(),
widget = element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu"),
button = element.selectmenu("widget").parent(),
menu = element.selectmenu("menuWidget").parent(),
link = button.find("a"),
selected = element.find("option:selected"),
ul = menu.children("ul"),
links = ul.find("li.ui-menu-item a");

expect(13 + links.length * 2);
expect(12 + links.length * 2);

equals( link.attr("role"), "combobox", "button link role" );
equals( link.attr("aria-haspopup"), "true", "button link aria-haspopup" );
equals( link.attr("aria-expanded"), "false", "button link aria-expanded" );
equals( link.attr("aria-autocomplete"), "list", "button link aria-autocomplete" );
equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "button link aria-activedescendant" );
equals( link.attr("aria-owns"), ul.attr("id"), "button link aria-owns" );
equals( link.attr("tabindex"), 0, "button link tabindex" );

Expand Down Expand Up @@ -46,28 +44,25 @@ $.each([
}
], function( i, settings ) {
test("state synchronization - " + settings.type, function () {
expect(10);
expect(8);

var element = $(settings.selector).selectmenu(),
widget = element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu"),
button = element.selectmenu("widget").parent(),
menu = element.selectmenu("menuWidget").parent(),
link = button.find("a"),
ul = menu.children("ul"),
links = ul.find("li.ui-menu-item a"),
selected = element.find("option:selected");

link.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equals( ul.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after keydown menu aria-activedescendant" );
equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after keydown button link aria-activedescendant" );
equals( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "after keydown selected menu link aria-selected" );
equals( element.find("option:selected").val(), selected.next("option").val() , "after keydown original select state" );
equals( button.text(), selected.next("option").text(), "after keydown button text" );

link.simulate( "click" );
menu.find("a").last().simulate( "mouseover" ).trigger( "click" );
equals( ul.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after click menu aria-activedescendant" );
equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after click button link aria-activedescendant" );
equals( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "after click selected menu link aria-selected" );
equals( element.find("option:selected").val(), element.find("option").last().val(), "after click original select state" );
equals( button.text(), element.find("option").last().text(), "after click button text" );
Expand Down
15 changes: 6 additions & 9 deletions tests/unit/selectmenu/selectmenu_events.js
View file
Expand Up @@ -19,9 +19,8 @@ test("change", function () {
}
});

var widget = this.element.selectmenu("widget"),
menu = widget.filter(".ui-selectmenu-menu"),
button = widget.filter(".ui-selectmenu-button"),
var button = this.element.selectmenu("widget").parent(),
menu = this.element.selectmenu("menuWidget").parent(),
value = this.element.find("option").first().text();

button.find("a").simulate( "click" );
Expand Down Expand Up @@ -61,9 +60,8 @@ test("focus", function () {
}
});

var widget = this.element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu");
var button = this.element.selectmenu("widget").parent(),
menu = this.element.selectmenu("menuWidget").parent();

button.find("a").simulate( "click" );
menu.find(".ui-menu-item").simulate("mouseover");
Expand Down Expand Up @@ -97,9 +95,8 @@ test("select", function () {
}
});

var widget = this.element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu");
var button = this.element.selectmenu("widget").parent(),
menu = this.element.selectmenu("menuWidget").parent();

button.find("a").simulate( "click" );
menu.find("a").first().simulate( "mouseover" ).trigger("click");
Expand Down
45 changes: 16 additions & 29 deletions tests/unit/selectmenu/selectmenu_methods.js
View file
Expand Up @@ -14,9 +14,8 @@ test( "open / close", function() {
expect( 4 );

var element = $('#speed').selectmenu(),
widget = element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu");
button = element.selectmenu("widget").parent(),
menu = element.selectmenu("menuWidget").parent();

element.selectmenu("open");
ok( menu.is( ":visible" ), "menu visible" );
Expand All @@ -29,41 +28,34 @@ test( "open / close", function() {


test("enable / disable", function () {
expect(14);
expect(10);

var element = $('#speed').selectmenu(),
widget = element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu"),
button = element.selectmenu("widget"),
menu = element.selectmenu("menuWidget"),
link = button.find("a");

element.selectmenu("disable");
ok( element.selectmenu("option", "disabled"), "disable: widget option" );
equals( element.attr("disabled"), "disabled", "disable: native select disabled" );
equals( button.attr("aria-disabled"), "true", "disable: button wrapper ARIA" );
equals( link.attr("aria-disabled"), "true", "disable: button ARIA" );
equals( link.attr("tabindex"), -1, "disable: button tabindex" );
equals( button.attr("tabindex"), -1, "disable: button tabindex" );
equals( menu.attr("aria-disabled"), "true", "disable: menu wrapper ARIA" );
equals( menu.children("ul").attr("aria-disabled"), "true", "disable: menu ARIA" );

element.selectmenu("enable");
ok( !element.selectmenu("option", "disabled"), "enable: widget option" );
equals( element.attr("disabled"), undefined, "enable: native select disabled" );
equals( button.attr("aria-disabled"), "false", "enable: button wrapper ARIA" );
equals( link.attr("aria-disabled"), "false", "enable: button ARIA" );
equals( link.attr("tabindex"), 0, "enable: button tabindex" );
equals( button.attr("tabindex"), 0, "enable: button tabindex" );
equals( menu.attr("aria-disabled"), "false", "enable: menu wrapper ARIA" );
equals( menu.children("ul").attr("aria-disabled"), "false", "enable: menu ARIA" );
});


test("refresh - structure", function () {
expect(3);

var element = $('#speed').selectmenu(),
widget = element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu");
menu = element.selectmenu("menuWidget").parent();

element.find("option").eq(2).remove();
element.find("option").eq(3).remove();
Expand All @@ -80,32 +72,28 @@ test("refresh - structure", function () {


test("refresh - disabled select", function () {
expect(6);
expect(4);

var element = $('#speed').selectmenu(),
widget = element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu");
button = element.selectmenu("widget"),
menu = element.selectmenu("menuWidget");

element.attr("disabled", "disabled");
element.selectmenu("refresh");

ok( element.selectmenu("option", "disabled"), "widget option" );
equals( button.attr("aria-disabled"), "true", "button wrapper ARIA" );
equals( button.children("a").attr("aria-disabled"), "true", "button ARIA" );
equals( button.children("a").attr("tabindex"), -1, "button tabindex" );
equals( button.attr("tabindex"), -1, "button tabindex" );
equals( menu.attr("aria-disabled"), "true", "menu wrapper ARIA" );
equals( menu.children("ul").attr("aria-disabled"), "true", "mene ARIA" );
});


test("refresh - disabled option", function () {
expect(2);

var element = $('#speed').selectmenu(),
widget = element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu");
button = element.selectmenu("widget").parent(),
menu = element.selectmenu("menuWidget").parent();

element.attr("disabled", "disabled");
element.find("option").eq(2).attr("disabled", "disabled");
Expand All @@ -120,9 +108,8 @@ test("refresh - disabled option", function () {
test("refresh - disabled optgroup", function () {

var element = $('#files').selectmenu(),
widget = element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
menu = widget.filter(".ui-selectmenu-menu"),
button = element.selectmenu("widget").parent(),
menu = element.selectmenu("menuWidget").parent(),
originalDisabledOptgroup = element.find("optgroup").first(),
originalDisabledOptions = originalDisabledOptgroup.find("option");

Expand Down
8 changes: 3 additions & 5 deletions tests/unit/selectmenu/selectmenu_options.js
View file
Expand Up @@ -17,11 +17,9 @@ test("appendTo another element", function () {
test("dropdown: CSS styles", function () {
expect(4);

var widget = this.element.selectmenu("widget"),
button = widget.filter(".ui-selectmenu-button"),
link = button.find("a"),
menu = widget.filter(".ui-selectmenu-menu"),
ul = widget.find("ul");
var button = this.element.selectmenu("widget").parent(),
ul = this.element.selectmenu("menuWidget"),
link = button.find("a");

this.element.selectmenu("open");
ok( link.hasClass("ui-corner-top") && !link.hasClass("ui-corner-all"), "button styles dropdown");
Expand Down
5 changes: 2 additions & 3 deletions tests/visual/selectmenu/disabled.html
View file
Expand Up @@ -20,7 +20,7 @@
var withOverflow = $('select#number').selectmenu({
dropdown: false
});
withOverflow.selectmenu("widget").addClass("overflow");
withOverflow.selectmenu("menuWidget").addClass("overflow");
$('select#files').selectmenu();
var files2 = $('select#files2').selectmenu();

Expand All @@ -43,7 +43,6 @@
}, function() {
files2.find("optgroup:eq(0)").removeAttr("disabled");
files2.selectmenu("refresh");

});
});
</script>
Expand All @@ -52,7 +51,7 @@
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
.overflow ul { height: 200px; overflow: auto; }
.overflow { height: 200px; overflow: auto; }
</style>
</head>
<body>
Expand Down
8 changes: 7 additions & 1 deletion ui/jquery.ui.selectmenu.js
View file
Expand Up @@ -248,7 +248,11 @@ $.widget( "ui.selectmenu", {
},

widget: function() {
return this.buttonWrap.add( this.menuWrap );
return this.button;
},

menuWidget: function() {
return this.menu;
},

_renderMenu: function( ul, items ) {
Expand All @@ -260,6 +264,8 @@ $.widget( "ui.selectmenu", {
var optgroup = $( '<li />', {
'class': 'ui-selectmenu-optgroup',
html: item.optgroup,
// prevents clicks on this header to close the menu
// TODO try to improve this, check how autocomplete handles it
click: function( event ){
event.stopPropagation();
}
Expand Down

0 comments on commit 59d1580

Please sign in to comment.