aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual
diff options
context:
space:
mode:
Diffstat (limited to 'tests/visual')
-rw-r--r--tests/visual/menu/menu.html44
-rw-r--r--tests/visual/menu/menubar.html216
-rw-r--r--tests/visual/menu/menubar.js123
-rw-r--r--tests/visual/menu/popup.js13
4 files changed, 257 insertions, 139 deletions
diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html
index cc1f4a939..1db12f25b 100644
--- a/tests/visual/menu/menu.html
+++ b/tests/visual/menu/menu.html
@@ -25,7 +25,7 @@
});
}
- var menus = $("#menu1, #menu2, #menu3");
+ var menus = $("#menu1, #menu2, #menu3, #menu4");
create();
$("#toggle-destroy").toggle(function() {
@@ -41,7 +41,7 @@
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; margin-bottom: 2em; }
- #menu3 { height: 200px; overflow: auto; }
+ #menu4 { height: 200px; overflow: auto; }
</style>
</head>
<body>
@@ -56,7 +56,7 @@
<li><a href="#">Salzburg</a></li>
</ul>
-<ul id="menu1">
+<ul id="menu2">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
@@ -95,6 +95,44 @@
</ul>
<ul id="menu3">
+ <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
+ <li><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li>
+ <li><a href="#">Adamsville</a></li>
+ <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li>
+ <li>
+ <a href="#">Delphi</a>
+ <ul>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
+ <li><a href="#">Salzburg</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Saarland</a></li>
+ <li>
+ <a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a>
+ <ul>
+ <li>
+ <a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a>
+ <ul>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Saarland</a></li>
+ <li><a href="#">Salzburg</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Delphi</a>
+ <ul>
+ <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li>
+ <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
+ <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Perch</a></li>
+ </ul>
+ </li>
+</ul>
+
+<ul id="menu4">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html
index 5847c623f..d2185e97c 100644
--- a/tests/visual/menu/menubar.html
+++ b/tests/visual/menu/menubar.html
@@ -55,6 +55,16 @@
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
+ .ui-menubar {
+ list-style: none;
+ margin: 0;
+ padding-left: 0;
+ }
+
+ .ui-menubar-item {
+ float: left;
+ }
+
table {
border-collapse: collapse;
}
@@ -66,85 +76,97 @@
</head>
<body>
-<div id="bar1" class="menubar">
- <a href="#">File</a>
- <ul>
- <li><a href="#">Open...</a></li>
- <li class="ui-state-disabled">Open recent...</li>
- <li><a href="#">Save</a></li>
- <li><a href="#">Save as...</a></li>
- <li><a href="#">Close</a></li>
- <li><a href="#">Quit</a></li>
- </ul>
- <a href="#">Edit</a>
- <ul>
- <li><a href="#">Copy</a></li>
- <li><a href="#">Cut</a></li>
- <li class="ui-state-disabled">Paste</li>
- </ul>
- <a href="#">View</a>
- <ul>
- <li><a href="#">Fullscreen</a></li>
- <li><a href="#">Fit into view</a></li>
- <li>
- <a href="#">Encoding</a>
- <ul>
- <li><a href="#">Auto-detect</a></li>
- <li><a href="#">UTF-8</a></li>
- <li>
- <a href="#">UTF-16</a>
- <ul>
- <li><a href="#">Option 1</a></li>
- <li><a href="#">Option 2</a></li>
- <li><a href="#">Option 3</a></li>
- <li><a href="#">Option 4</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#">Customize...</a></li>
- </ul>
-</div>
+<ul id="bar1" class="menubar">
+ <li>
+ <a href="#">File</a>
+ <ul>
+ <li><a href="#">Open...</a></li>
+ <li class="ui-state-disabled">Open recent...</li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Save as...</a></li>
+ <li><a href="#">Close</a></li>
+ <li><a href="#">Quit</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Edit</a>
+ <ul>
+ <li><a href="#">Copy</a></li>
+ <li><a href="#">Cut</a></li>
+ <li class="ui-state-disabled">Paste</li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">View</a>
+ <ul>
+ <li><a href="#">Fullscreen</a></li>
+ <li><a href="#">Fit into view</a></li>
+ <li>
+ <a href="#">Encoding</a>
+ <ul>
+ <li><a href="#">Auto-detect</a></li>
+ <li><a href="#">UTF-8</a></li>
+ <li>
+ <a href="#">UTF-16</a>
+ <ul>
+ <li><a href="#">Option 1</a></li>
+ <li><a href="#">Option 2</a></li>
+ <li><a href="#">Option 3</a></li>
+ <li><a href="#">Option 4</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Customize...</a></li>
+ </ul>
+ </li>
+</ul>
-<div id="bar2" class="menubar-icons">
- <a href="#">File</a>
- <ul>
- <li><a href="#">Open...</a></li>
- <li class="ui-state-disabled">Open recent...</li>
- <li><a href="#">Save</a></li>
- <li><a href="#">Save as...</a></li>
- <li><a href="#">Close</a></li>
- <li><a href="#">Quit</a></li>
- </ul>
- <a href="#">Edit</a>
- <ul>
- <li><a href="#">Copy</a></li>
- <li><a href="#">Cut</a></li>
- <li class="ui-state-disabled">Paste</li>
- </ul>
- <a href="#">View</a>
- <ul>
- <li><a href="#">Fullscreen</a></li>
- <li><a href="#">Fit into view</a></li>
- <li>
- <a href="#">Encoding</a>
- <ul>
- <li><a href="#">Auto-detect</a></li>
- <li><a href="#">UTF-8</a></li>
- <li>
- <a href="#">UTF-16</a>
- <ul>
- <li><a href="#">Option 1</a></li>
- <li><a href="#">Option 2</a></li>
- <li><a href="#">Option 3</a></li>
- <li><a href="#">Option 4</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#">Customize...</a></li>
- </ul>
-</div>
+<ul id="bar2" class="menubar-icons">
+ <li>
+ <a href="#">File</a>
+ <ul>
+ <li><a href="#">Open...</a></li>
+ <li class="ui-state-disabled">Open recent...</li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Save as...</a></li>
+ <li><a href="#">Close</a></li>
+ <li><a href="#">Quit</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Edit</a>
+ <ul>
+ <li><a href="#">Copy</a></li>
+ <li><a href="#">Cut</a></li>
+ <li class="ui-state-disabled">Paste</li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">View</a>
+ <ul>
+ <li><a href="#">Fullscreen</a></li>
+ <li><a href="#">Fit into view</a></li>
+ <li>
+ <a href="#">Encoding</a>
+ <ul>
+ <li><a href="#">Auto-detect</a></li>
+ <li><a href="#">UTF-8</a></li>
+ <li>
+ <a href="#">UTF-16</a>
+ <ul>
+ <li><a href="#">Option 1</a></li>
+ <li><a href="#">Option 2</a></li>
+ <li><a href="#">Option 3</a></li>
+ <li><a href="#">Option 4</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Customize...</a></li>
+ </ul>
+ </li>
+</ul>
<table id="movies" class="ui-widget">
<thead>
@@ -161,24 +183,26 @@
<td class="ui-widget-content">1993</td>
<td class="ui-widget-content">3.6</td>
<td class="ui-widget-content">
- <div class="menubar">
- <a href="#">Options</a>
- <ul>
- <li><a href="#">Order...</a></li>
- <li class="ui-state-disabled">Write a Review...</li>
- <li><a href="#">Find Similar Movies...</a></li>
- <li>
- <a href="#">Rate</a>
- <ul>
- <li><a href="#">5 stars</a></li>
- <li><a href="#">4 stars</a></li>
- <li><a href="#">3 stars</a></li>
- <li><a href="#">2 stars</a></li>
- <li><a href="#">1 stars</a></li>
- </ul>
- </li>
- </ul>
- </div>
+ <ul class="menubar">
+ <li>
+ <a href="#">Options</a>
+ <ul>
+ <li><a href="#">Order...</a></li>
+ <li class="ui-state-disabled">Write a Review...</li>
+ <li><a href="#">Find Similar Movies...</a></li>
+ <li>
+ <a href="#">Rate</a>
+ <ul>
+ <li><a href="#">5 stars</a></li>
+ <li><a href="#">4 stars</a></li>
+ <li><a href="#">3 stars</a></li>
+ <li><a href="#">2 stars</a></li>
+ <li><a href="#">1 stars</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
</td>
</tr>
<tr>
diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js
index 6c8173cd9..cc3258d4a 100644
--- a/tests/visual/menu/menubar.js
+++ b/tests/visual/menu/menubar.js
@@ -13,24 +13,31 @@ $.widget("ui.menubar", {
},
_create: function() {
var self = this;
- var items = this.items = this.element.children("button, a");
+ var items = this.items = this.element.children("li")
+ .addClass("ui-menubar-item")
+ .attr("role", "presentation")
+ .children("button, a");
items.slice(1).attr("tabIndex", -1);
var o = this.options;
- this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix');
+ this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix').attr("role", "menubar");
this._focusable(items);
this._hoverable(items);
items.next("ul").each(function(i, elm) {
$(elm).menu({
select: function(event, ui) {
- ui.item.parents("ul:last").hide()
- self.options.select.apply(this, arguments);
+ ui.item.parents("ul.ui-menu:last").hide();
+ self._trigger( "select", event, ui );
+ self._close();
+ $(event.target).prev().focus();
}
- }).hide().keydown(function(event) {
+ }).hide()
+ .attr("aria-hidden", "true")
+ .attr("aria-expanded", "false")
+ .keydown(function(event) {
var menu = $(this);
if (menu.is(":hidden"))
return;
- event.stopPropagation();
switch (event.keyCode) {
case $.ui.keyCode.LEFT:
self._left(event);
@@ -41,9 +48,7 @@ $.widget("ui.menubar", {
event.preventDefault();
break;
};
- }).blur(function( event ) {
- self._close( event );
- });
+ })
});
items.each(function() {
var input = $(this),
@@ -55,12 +60,11 @@ $.widget("ui.menubar", {
return;
}
event.preventDefault();
- event.stopPropagation();
if (event.type == "click" && menu.is(":visible") && self.active && self.active[0] == menu[0]) {
self._close();
return;
}
- if (self.open || event.type == "click") {
+ if ((self.open && event.type == "mouseenter") || event.type == "click") {
self._open(event, menu);
}
})
@@ -83,6 +87,8 @@ $.widget("ui.menubar", {
}
})
.addClass("ui-button ui-widget ui-button-text-only ui-menubar-link")
+ .attr("role", "menuitem")
+ .attr("aria-haspopup", "true")
.wrapInner("<span class='ui-button-text'></span>");
if (o.menuIcon) {
@@ -95,35 +101,66 @@ $.widget("ui.menubar", {
};
});
- self._bind(document, {
- click: function(event) {
- if (self.open && !$(event.target).closest(".ui-menubar").length) {
- self._close();
- }
- }
- })
self._bind({
- keyup: function(event) {
- if (event.keyCode == $.ui.keyCode.ESCAPE && self.open) {
- if (self.active.menu("left", event) !== true) {
+ keydown: function(event) {
+ if (event.keyCode == $.ui.keyCode.ESCAPE) {
+ if (self.active && self.active.menu("left", event) !== true) {
var active = self.active;
self.active.blur();
+ self._close( event );
active.prev().focus();
}
}
+ },
+ focusout : function( event ) {
+ self.closeTimer = setTimeout(function() {
+ self._close( event );
+ }, 100);
+ },
+ focusin :function( event ) {
+ clearTimeout(self.closeTimer);
}
});
},
+ _destroy : function() {
+ var items = this.element.children("li")
+ .removeClass("ui-menubar-item")
+ .removeAttr("role", "presentation")
+ .children("button, a");
+
+ this.element.removeClass('ui-menubar ui-widget-header ui-helper-clearfix').removeAttr("role", "menubar").unbind(".menubar");;
+ items.unbind("focusin focusout click focus mouseenter keydown");
+
+ items
+ .removeClass("ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default")
+ .removeAttr("role", "menuitem")
+ .removeAttr("aria-haspopup", "true")
+ .children("span.ui-button-text").each(function(i, e) {
+ var item = $(this);
+ item.parent().html(item.html());
+ })
+ .end()
+ .children(".ui-icon").remove();
+
+ $(document).unbind(".menubar");
+
+ this.element.find(":ui-menu").menu("destroy")
+ .show()
+ .removeAttr("aria-hidden", "true")
+ .removeAttr("aria-expanded", "false")
+ .removeAttr("tabindex")
+ .unbind("keydown", "blur")
+ ;
+ },
+
_close: function() {
- this.active.menu("closeAll").hide();
+ if (!this.active || !this.active.length)
+ return;
+ this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false");
this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex");
this.active = null;
- var self = this;
- // delay for the next focus event to see it as still "open"
- self.timer = setTimeout(function() {
- self.open = false;
- }, 13);
+ this.open = false;
},
_open: function(event, menu) {
@@ -133,55 +170,63 @@ $.widget("ui.menubar", {
}
// almost the same as _close above, but don't remove tabIndex
if (this.active) {
- this.active.menu("closeAll").hide();
+ this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false");
this.active.prev().removeClass("ui-state-active");
}
- clearTimeout(this.timer);
- this.open = true;
// set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus)
var button = menu.prev().addClass("ui-state-active").attr("tabIndex", -1);
this.active = menu.show().position({
my: "left top",
at: "left bottom",
of: button
- }).focus();
+ })
+ .removeAttr("aria-hidden").attr("aria-expanded", "true")
+ .menu("focus", event, menu.children("li").first())
+ .focus()
+ .focusin()
+ ;
+ this.open = true;
},
_prev: function( event, button ) {
button.attr("tabIndex", -1);
- var prev = button.prevAll( ".ui-button" ).eq( 0 );
+ var prev = button.parent().prevAll("li").children( ".ui-button" ).eq( 0 );
if (prev.length) {
prev.removeAttr("tabIndex")[0].focus();
} else {
- this.element.children(".ui-button:last").removeAttr("tabIndex")[0].focus();
+ var lastItem = this.element.children("li:last").children(".ui-button:last");
+ lastItem.removeAttr("tabIndex")[0].focus();
}
},
_next: function( event, button ) {
button.attr("tabIndex", -1);
- var next = button.nextAll( ".ui-button" ).eq( 0 );
+ var next = button.parent().nextAll("li").children( ".ui-button" ).eq( 0 );
if (next.length) {
next.removeAttr("tabIndex")[0].focus();
} else {
- this.element.children(".ui-button:first").removeAttr("tabIndex")[0].focus();
+ var firstItem = this.element.children("li:first").children(".ui-button:first");
+ firstItem.removeAttr("tabIndex")[0].focus();
}
},
_left: function(event) {
- var prev = this.active.prevAll( ".ui-menu" ).eq( 0 );
+ var prev = this.active.parent().prevAll("li:eq(0)").children( ".ui-menu" ).eq( 0 );
if (prev.length) {
this._open(event, prev);
} else {
- this._open(event, this.element.children(".ui-menu:last"));
+ var lastItem = this.element.children("li:last").children(".ui-menu:first");
+ this._open(event, lastItem);
}
},
_right: function(event) {
- var next = this.active.nextAll( ".ui-menu" ).eq( 0 );
+ var next = this.active.parent().nextAll("li:eq(0)").children( ".ui-menu" ).eq( 0 );
if (next.length) {
this._open(event, next);
} else {
- this._open(event, this.element.children(".ui-menu:first"));
+ var firstItem = this.element.children("li:first").children(".ui-menu:first");
+ this._open(event, firstItem);
}
}
});
diff --git a/tests/visual/menu/popup.js b/tests/visual/menu/popup.js
index 2cd4ee047..f57cba699 100644
--- a/tests/visual/menu/popup.js
+++ b/tests/visual/menu/popup.js
@@ -35,7 +35,7 @@ $.widget( "ui.popup", {
this.element
.addClass("ui-popup")
this._close();
-
+
this._bind(this.options.trigger, {
click: function( event ) {
event.preventDefault();
@@ -46,6 +46,10 @@ $.widget( "ui.popup", {
}
});
+ this._bind(this.element, {
+ blur: "_close"
+ });
+
this._bind({
keyup: function( event ) {
if (event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" )) {
@@ -94,6 +98,10 @@ $.widget( "ui.popup", {
.attr( "aria-expanded", true )
.position( position )
.focus();
+
+ // take trigger out of tab order to allow shift-tab to skip trigger
+ this.options.trigger.attr("tabindex", -1);
+
this.open = true;
this._trigger( "open", event );
},
@@ -103,6 +111,9 @@ $.widget( "ui.popup", {
.hide()
.attr( "aria-hidden", true )
.attr( "aria-expanded", false );
+
+ this.options.trigger.attr("tabindex", 0);
+
this.open = false;
this._trigger( "close", event );
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-02 15:07:27 +0000