From 0300f099b547cbf482ad5f7800fe0240e780364e Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 28 Aug 2017 07:00:32 -0500 Subject: [PATCH] Navigation Menubar Example: Remove second example with dynamically added ARIA attributes (pull #435) To address issue #443, removed the second example where markup was being added dynamically, removed unnecessary js, and fixed a bug in the HTML source code display. Related to issue #410. --- .../menubar/menubar-1/js/MenubarItemLinks.js | 8 - examples/menubar/menubar-1/js/MenubarLinks.js | 1 - .../menubar-1/js/PopupMenuItemLinks.js | 8 - .../menubar/menubar-1/js/PopupMenuLinks.js | 8 - examples/menubar/menubar-1/menubar-1.html | 328 +++++++----------- 5 files changed, 117 insertions(+), 236 deletions(-) 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:

-

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

-
    -
  1. In this implementation, ARIA roles and properties are added by the scripts based on the HTML structure.
    2. -
  2. This approach may be helpful when applying the menubar pattern to existing content.
    3. -
-
+ +
@@ -600,8 +510,11 @@

Submenu

@@ -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

- -
- - +