diff --git a/examples/menubar/menubar-1/js/MenubarItemLinks.js b/examples/menubar/menubar-1/js/MenubarItemLinks.js
index c72fd19051..5fbcf50d91 100644
--- a/examples/menubar/menubar-1/js/MenubarItemLinks.js
+++ b/examples/menubar/menubar-1/js/MenubarItemLinks.js
@@ -64,14 +64,6 @@ var MenubarItem = function (domNode, menuObj) {
MenubarItem.prototype.init = function () {
this.domNode.tabIndex = -1;
- this.domNode.setAttribute('role', 'menuitem');
- this.domNode.setAttribute('aria-haspopup', 'true');
- this.domNode.setAttribute('aria-expanded', 'false');
-
- if (this.domNode.parentNode.tagName === 'LI') {
- this.domNode.parentNode.setAttribute('role', 'none');
- }
-
this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
this.domNode.addEventListener('click', this.handleClick.bind(this));
this.domNode.addEventListener('focus', this.handleFocus.bind(this));
diff --git a/examples/menubar/menubar-1/js/MenubarLinks.js b/examples/menubar/menubar-1/js/MenubarLinks.js
index c89ee7f392..a51460eaf3 100644
--- a/examples/menubar/menubar-1/js/MenubarLinks.js
+++ b/examples/menubar/menubar-1/js/MenubarLinks.js
@@ -68,7 +68,6 @@ var Menubar = function (domNode) {
Menubar.prototype.init = function () {
var menubarItem, childElement, menuElement, textContent, numItems;
- this.domNode.setAttribute('role', 'menubar');
// Traverse the element children of menubarNode: configure each with
// menuitem role behavior and store reference in menuitems array.
diff --git a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js b/examples/menubar/menubar-1/js/PopupMenuItemLinks.js
index 541b2491f7..0d1ec605ee 100644
--- a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js
+++ b/examples/menubar/menubar-1/js/PopupMenuItemLinks.js
@@ -54,14 +54,6 @@ var MenuItem = function (domNode, menuObj) {
MenuItem.prototype.init = function () {
this.domNode.tabIndex = -1;
- if (!this.domNode.getAttribute('role')) {
- this.domNode.setAttribute('role', 'menuitem');
- }
-
- if (this.domNode.parentNode.tagName === 'LI') {
- this.domNode.parentNode.setAttribute('role', 'none');
- }
-
this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
this.domNode.addEventListener('click', this.handleClick.bind(this));
this.domNode.addEventListener('focus', this.handleFocus.bind(this));
diff --git a/examples/menubar/menubar-1/js/PopupMenuLinks.js b/examples/menubar/menubar-1/js/PopupMenuLinks.js
index 83e2fad6d8..d68b89cb41 100644
--- a/examples/menubar/menubar-1/js/PopupMenuLinks.js
+++ b/examples/menubar/menubar-1/js/PopupMenuLinks.js
@@ -86,14 +86,6 @@ PopupMenu.prototype.init = function () {
var childElement, menuElement, menuItem, textContent, numItems, label;
// Configure the domNode itself
- this.domNode.tabIndex = -1;
-
- this.domNode.setAttribute('role', 'menu');
-
- if (!this.domNode.getAttribute('aria-labelledby') && !this.domNode.getAttribute('aria-label') && !this.domNode.getAttribute('title')) {
- label = this.controller.domNode.innerHTML;
- this.domNode.setAttribute('aria-label', label);
- }
this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));
diff --git a/examples/menubar/menubar-1/menubar-1.html b/examples/menubar/menubar-1/menubar-1.html
index 25fe16a339..8c534a144a 100644
--- a/examples/menubar/menubar-1/menubar-1.html
+++ b/examples/menubar/menubar-1/menubar-1.html
@@ -27,213 +27,123 @@ Navigation Menubar Example
issue 410.
- The following two implementations of the
+ The following implementation of the
design pattern for menubar
- demonstrate a menubar that presents site navigation menus.
- Each item in the menubars represents a section of a web site for a mythical university and opens a submenu containing menu items that link to pages within that section.
- The two examples are functionally equivalent but differ in how they are coded; see notes that follow each example.
+ demonstrates a menubar that provides site navigation menus.
+ Each item in the menubar represents a section of a web site for a mythical university and opens a submenu containing menu items that link to pages within that section.
Similar examples include:
- Editor Menubar Example: Example of a menubar that presents text styling actions similar to an editor application.
- Examples
-
- Example 1: Menubar With ARIA Markup in the HTML Source
-
-
-
-
-
- Notes
- This implementation includes the ARIA roles and properties in the HTML to make it easy to see how they are used.
-
-
- Example 2: ARIA markup added dynamically
-
-
-
+
Example
+
+
+
-
+
-
-
-
Notes
-
- - In this implementation, ARIA roles and properties are added by the scripts based on the HTML structure.
- - This approach may be helpful when applying the menubar pattern to existing content.
-
-
+
Submenu
- - Defines an acessible name for the menu.
- - Helps assistive technology users understand the purpose of the menu.
+ -
+ Defines an acessible name for the
menu.
+
+ - Helps assistive technology users understand the purpose of the menu and
+ distinguish it from any other menu or similar elements (e.g. menubar) on the page.
|
@@ -702,21 +615,14 @@ Javascript and CSS Source Code
- HTML Source Code
- Example 1: Menubar With ARIA Markup in the HTML Source
-
+ HTML Source Code
+
-
+
- Example 2: ARIA markup added dynamically
-
-
-
-
+