From 2b58fddcab570eec30e5daba7ad4aae061491cf6 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 10 Nov 2020 11:51:01 -0800 Subject: [PATCH 01/29] updated disclosure nav with links example --- .../disclosure/css/disclosure-navigation.css | 21 +- examples/disclosure/disclosure-nav-top.html | 376 ++++++++++++++++++ examples/disclosure/js/disclosureMenu.js | 73 ++-- 3 files changed, 443 insertions(+), 27 deletions(-) create mode 100644 examples/disclosure/disclosure-nav-top.html diff --git a/examples/disclosure/css/disclosure-navigation.css b/examples/disclosure/css/disclosure-navigation.css index 750a208f2c..f95d74ca96 100644 --- a/examples/disclosure/css/disclosure-navigation.css +++ b/examples/disclosure/css/disclosure-navigation.css @@ -16,12 +16,18 @@ min-width: 200px; padding: 0; position: absolute; + top: 100%; } .disclosure-nav li { margin: 0; } +.disclosure-nav > li { + display: flex; + position: relative; +} + .disclosure-nav ul a { border: 0; color: #000; @@ -43,14 +49,20 @@ position: relative; } -.disclosure-nav button { +.disclosure-nav button, +.disclosure-nav .main-link { align-items: center; + background-color: transparent; border: 1px solid transparent; border-right-color: #ccc; display: flex; padding: 1em; } +.disclosure-nav .main-link { + border-right-color: transparent; +} + .disclosure-nav button::after { content: ""; border-bottom: 1px solid #000; @@ -61,7 +73,12 @@ transform: rotate(45deg); } -.disclosure-nav button:focus { +.disclosure-nav .main-link + button::after { + margin-left: 0; +} + +.disclosure-nav button:focus, +.disclosure-nav .main-link:focus { border-color: #005a9c; outline: 5px solid rgba(0, 90, 156, 0.75); position: relative; diff --git a/examples/disclosure/disclosure-nav-top.html b/examples/disclosure/disclosure-nav-top.html new file mode 100644 index 0000000000..35a8d2cb36 --- /dev/null +++ b/examples/disclosure/disclosure-nav-top.html @@ -0,0 +1,376 @@ + + + + +Example Disclosure for Navigation Menus | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + + +
+

Example Links + Disclosure for Navigation Menus

+

+ The following example demonstrates using the + disclosure design pattern + to show and hide dropdown lists of links in a navigation bar for a mythical university web site. Unlike the other disclosure navigation example, this example includes top-level links alongside the disclosure buttons. +

+

Note: Although this example uses the word menu in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role.

+

Similar examples include:

+ +

Example Usage Options

+

+ This example demonstrates two different ways of implementing keyboard support. + Toggle between them with the following checkbox. +

+ + +
+

Example

+ +
+ +
+

Mythical University

+

Sample content section. Activating a link above will update and navigate to this region.

+
+
+ +
+ +
+

Accessibility Features

+
    +
  1. Since this set of disclosure buttons controls visibility of navigation links for the mythical university web site, the list that contains them is wrapped in a navigation landmark named Mythical University.
    2. +
  2. + The semantics of the list structure communicates the hierarchy of the navigation system to assistive technology users. + The top-level set of three buttons is in a list of three items, and the set of links controlled by each button is contained within a list nested inside the item with the controlling button. +
    3. +
  3. + If a dropdown is open and focus is inside the navigation region, pressing Esc will close the dropdown. + Moving focus out of the navigation region also closes an open dropdown. + Implementing this Esc behavior is necessary to meet the WCAG 2.1 1.4.13: Content on Hover or Focus criterion. +
    4. +
  4. The visual indicator of the show/hide state is created using CSS ::after pseudo element border styles so the caret is reliably rendered in high contrast mode of operating systems and browsers.
    5. +
  5. Optional navigation keys (Arrow keys, Home, and End): +
      +
    1. Implementing the optional arrow key support prevents the default page scroll behavior when focus is contained within the navigation region.
      2. +
    2. + Optional navigation key support is primarily for the benefit of keyboard users who are not running a screen reader. + Screen readers that have both reading and interaction modes intercept these navigation keys and do not pass them to the page when the screen reader is in reading mode. + When interacting with this example, such screen readers are typically in reading mode because this example does not use a widget role that triggers screen reader interaction mode. +
      3. +
    3. + If implemented, the optional navigation keys supplement, but do not replace, tabbing among buttons and links. + This is because the buttons and links are not contained by an element with a widget role, such as grid, that is expected to occupy only one stop in the page Tab sequence and manage focus for all its descendants. +
      4. +
    +
    6. +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ Tab
+ Shift + Tab + 		Move keyboard focus among top-level buttons, and if a dropdown is open, into and through links in the dropdown.
+ Space or
+ Enter + 		+
    +
  • If focus is on a disclosure button, activates the button, which toggles the visibility of the dropdown.
    • +
  • If focus is on a link: +
      +
    • If any link has aria-current set, removes it.
      • +
    • Sets aria-current="page" on the focused link.
      • +
    • Activates the focused link.
      • +
    +
    • +
+
+ Escape + If a dropdown is open, closes it and sets focus on the button that controls that dropdown.
+ Down Arrow or
+ Right Arrow
+ (Optional) + 		+
    +
  • If focus is on a button and its dropdown is collapsed, and it is not the last button, moves focus to the next button.
    • +
  • if focus is on a button and its dropdown is expanded, moves focus to the first link in the dropdown.
    • +
  • If focus is on a link, and it is not the last link, moves focus to the next link.
    • +
+
+ Up Arrow or
+ Left Arrow
+ (Optional) + 		+
    +
  • If focus is on a button, and it is not the first button, moves focus to the previous button.
    • +
  • If focus is on a link, and it is not the first link, moves focus to the previous link.
    • +
+
+ Home (Optional) + +
    +
  • If focus is on a button, and it is not the first button, moves focus to the first button.
    • +
  • If focus is on a link, and it is not the first link, moves focus to the first link.
    • +
+
+ End (Optional) + +
    +
  • If focus is on a button, and it is not the last button, moves focus to the last button.
    • +
  • If focus is on a link, and it is not the last link, moves focus to the last link.
    • +
+
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ aria-controls="IDREF" + + button + + The disclosure button controls visibility of the container identified by the IDREF value. +
+ aria-expanded="false" + + button + +
    +
  • + Indicates that the container controlled by the disclosure button is hidden. +
    • +
  • + CSS attribute selectors (e.g. [aria-expanded="false"]) are + used to synchronize the visual states with the value of the aria-expanded + attribute. +
    • +
+
+ aria-expanded="true" + + button + +
    +
  • + Indicates that the container controlled by the disclosure button is visible. +
    • +
  • + CSS attribute selectors (e.g. [aria-expanded="true"]) are + used to synchronize the visual states with the value of the aria-expanded + attribute. +
    • +
+
+ aria-current="page" + + a + Indicates that the page referenced by the link is currently displayed.
+
+ +
+

Javascript and CSS Source Code

+ + +
+ +
+

HTML Source Code

+ +
+ + +
+
+ + + diff --git a/examples/disclosure/js/disclosureMenu.js b/examples/disclosure/js/disclosureMenu.js index d6ec32bae6..7dd6a0b1a5 100644 --- a/examples/disclosure/js/disclosureMenu.js +++ b/examples/disclosure/js/disclosureMenu.js @@ -9,32 +9,46 @@ var DisclosureNav = function (domNode) { this.rootNode = domNode; - this.triggerNodes = []; this.controlledNodes = []; + this.topLevelNodes = []; this.openIndex = null; this.useArrowKeys = true; }; DisclosureNav.prototype.init = function () { - var buttons = this.rootNode.querySelectorAll( - 'button[aria-expanded][aria-controls]' + var topNodes = this.rootNode.querySelectorAll( + '.main-link, button[aria-expanded][aria-controls]' ); - for (var i = 0; i < buttons.length; i++) { - var button = buttons[i]; - var menu = button.parentNode.querySelector('ul'); - if (menu) { - // save ref to button and controlled menu - this.triggerNodes.push(button); - this.controlledNodes.push(menu); - - // collapse menus - button.setAttribute('aria-expanded', 'false'); - this.toggleMenu(menu, false); - - // attach event listeners - menu.addEventListener('keydown', this.handleMenuKeyDown.bind(this)); - button.addEventListener('click', this.handleButtonClick.bind(this)); - button.addEventListener('keydown', this.handleButtonKeyDown.bind(this)); + this.topLevelNodes = [...topNodes]; + + // save button/menu pairs and collapse menus + for (var i = 0; i < this.topLevelNodes.length; i++) { + var node = this.topLevelNodes[i]; + + // handle button + menu + if ( + node.tagName.toLowerCase() === 'button' && + node.hasAttribute('aria-controls') + ) { + var menu = node.parentNode.querySelector('ul'); + if (menu) { + // save ref controlled menu + this.controlledNodes.push(menu); + + // collapse menus + node.setAttribute('aria-expanded', 'false'); + this.toggleMenu(menu, false); + + // attach event listeners + menu.addEventListener('keydown', this.handleMenuKeyDown.bind(this)); + node.addEventListener('click', this.handleButtonClick.bind(this)); + node.addEventListener('keydown', this.handleButtonKeyDown.bind(this)); + } + } + // handle links + else { + this.controlledNodes.push(null); + node.addEventListener('keydown', this.handleLinkKeyDown.bind(this)); } } @@ -54,9 +68,9 @@ DisclosureNav.prototype.toggleExpand = function (index, expanded) { } // handle menu at called index - if (this.triggerNodes[index]) { + if (this.topLevelNodes[index]) { this.openIndex = expanded ? index : null; - this.triggerNodes[index].setAttribute('aria-expanded', expanded); + this.topLevelNodes[index].setAttribute('aria-expanded', expanded); this.toggleMenu(this.controlledNodes[index], expanded); } }; @@ -103,7 +117,7 @@ DisclosureNav.prototype.handleBlur = function (event) { }; DisclosureNav.prototype.handleButtonKeyDown = function (event) { - var targetButtonIndex = this.triggerNodes.indexOf(document.activeElement); + var targetButtonIndex = this.topLevelNodes.indexOf(document.activeElement); // close on escape if (event.key === 'Escape') { @@ -122,13 +136,13 @@ DisclosureNav.prototype.handleButtonKeyDown = function (event) { // handle arrow key navigation between top-level buttons, if set else if (this.useArrowKeys) { - this.controlFocusByKey(event, this.triggerNodes, targetButtonIndex); + this.controlFocusByKey(event, this.topLevelNodes, targetButtonIndex); } }; DisclosureNav.prototype.handleButtonClick = function (event) { var button = event.target; - var buttonIndex = this.triggerNodes.indexOf(button); + var buttonIndex = this.topLevelNodes.indexOf(button); var buttonExpanded = button.getAttribute('aria-expanded') === 'true'; this.toggleExpand(buttonIndex, !buttonExpanded); }; @@ -145,7 +159,7 @@ DisclosureNav.prototype.handleMenuKeyDown = function (event) { // close on escape if (event.key === 'Escape') { - this.triggerNodes[this.openIndex].focus(); + this.topLevelNodes[this.openIndex].focus(); this.toggleExpand(this.openIndex, false); } @@ -155,6 +169,15 @@ DisclosureNav.prototype.handleMenuKeyDown = function (event) { } }; +DisclosureNav.prototype.handleLinkKeyDown = function (event) { + var targetLinkIndex = this.topLevelNodes.indexOf(document.activeElement); + + // handle arrow key navigation between top-level buttons, if set + if (this.useArrowKeys) { + this.controlFocusByKey(event, this.topLevelNodes, targetLinkIndex); + } +}; + // switch on/off arrow key navigation DisclosureNav.prototype.updateKeyControls = function (useArrowKeys) { this.useArrowKeys = useArrowKeys; From 6f59642ff89d65d9e590bf5c878474a918d57270 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Fri, 13 Nov 2020 00:18:10 -0800 Subject: [PATCH 02/29] update js to a class, update filename, add links --- examples/disclosure/disclosure-faq.html | 1 + .../disclosure-img-long-description.html | 1 + ...html => disclosure-navigation-hybrid.html} | 0 .../disclosure/disclosure-navigation.html | 1 + examples/disclosure/js/disclosureMenu.js | 295 +++++++++--------- examples/index.html | 3 + examples/menubar/menubar-navigation.html | 1 + 7 files changed, 149 insertions(+), 153 deletions(-) rename examples/disclosure/{disclosure-nav-top.html => disclosure-navigation-hybrid.html} (100%) diff --git a/examples/disclosure/disclosure-faq.html b/examples/disclosure/disclosure-faq.html index 91a6ea95b3..3b6ff99114 100644 --- a/examples/disclosure/disclosure-faq.html +++ b/examples/disclosure/disclosure-faq.html @@ -40,6 +40,7 @@

Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions

Example Disclosure for Navigation Menus +
  • Example Disclosure Navigation with top-level links
    • diff --git a/examples/disclosure/disclosure-img-long-description.html b/examples/disclosure/disclosure-img-long-description.html index 71e978b13f..2a18443292 100644 --- a/examples/disclosure/disclosure-img-long-description.html +++ b/examples/disclosure/disclosure-img-long-description.html @@ -39,6 +39,7 @@

    Example Disclosure (Show/Hide) for Image Description

  • Example Disclosure for Navigation Menus
    • +
  • Example Disclosure Navigation with top-level links
    • diff --git a/examples/disclosure/disclosure-nav-top.html b/examples/disclosure/disclosure-navigation-hybrid.html similarity index 100% rename from examples/disclosure/disclosure-nav-top.html rename to examples/disclosure/disclosure-navigation-hybrid.html diff --git a/examples/disclosure/disclosure-navigation.html b/examples/disclosure/disclosure-navigation.html index 6b4040a532..daca74c423 100644 --- a/examples/disclosure/disclosure-navigation.html +++ b/examples/disclosure/disclosure-navigation.html @@ -38,6 +38,7 @@

    Example Disclosure for Navigation Menus

    Example Usage Options

    diff --git a/examples/disclosure/js/disclosureMenu.js b/examples/disclosure/js/disclosureMenu.js index 7dd6a0b1a5..45195fc28e 100644 --- a/examples/disclosure/js/disclosureMenu.js +++ b/examples/disclosure/js/disclosureMenu.js @@ -7,181 +7,171 @@ 'use strict'; -var DisclosureNav = function (domNode) { - this.rootNode = domNode; - this.controlledNodes = []; - this.topLevelNodes = []; - this.openIndex = null; - this.useArrowKeys = true; -}; - -DisclosureNav.prototype.init = function () { - var topNodes = this.rootNode.querySelectorAll( - '.main-link, button[aria-expanded][aria-controls]' - ); - this.topLevelNodes = [...topNodes]; - - // save button/menu pairs and collapse menus - for (var i = 0; i < this.topLevelNodes.length; i++) { - var node = this.topLevelNodes[i]; - - // handle button + menu - if ( - node.tagName.toLowerCase() === 'button' && - node.hasAttribute('aria-controls') - ) { - var menu = node.parentNode.querySelector('ul'); - if (menu) { - // save ref controlled menu - this.controlledNodes.push(menu); - - // collapse menus - node.setAttribute('aria-expanded', 'false'); - this.toggleMenu(menu, false); - - // attach event listeners - menu.addEventListener('keydown', this.handleMenuKeyDown.bind(this)); - node.addEventListener('click', this.handleButtonClick.bind(this)); - node.addEventListener('keydown', this.handleButtonKeyDown.bind(this)); +class DisclosureNav { + constructor(domNode) { + this.rootNode = domNode; + this.controlledNodes = []; + this.openIndex = null; + this.useArrowKeys = true; + this.topLevelNodes = [ + ...this.rootNode.querySelectorAll( + '.main-link, button[aria-expanded][aria-controls]' + ), + ]; + + this.topLevelNodes.forEach((node) => { + // handle button + menu + if ( + node.tagName.toLowerCase() === 'button' && + node.hasAttribute('aria-controls') + ) { + const menu = node.parentNode.querySelector('ul'); + if (menu) { + // save ref controlled menu + this.controlledNodes.push(menu); + + // collapse menus + node.setAttribute('aria-expanded', 'false'); + this.toggleMenu(menu, false); + + // attach event listeners + menu.addEventListener('keydown', this.onMenuKeyDown.bind(this)); + node.addEventListener('click', this.onButtonClick.bind(this)); + node.addEventListener('keydown', this.onButtonKeyDown.bind(this)); + } } - } - // handle links - else { - this.controlledNodes.push(null); - node.addEventListener('keydown', this.handleLinkKeyDown.bind(this)); - } - } - - this.rootNode.addEventListener('focusout', this.handleBlur.bind(this)); -}; + // handle links + else { + this.controlledNodes.push(null); + node.addEventListener('keydown', this.onLinkKeyDown.bind(this)); + } + }); -DisclosureNav.prototype.toggleMenu = function (domNode, show) { - if (domNode) { - domNode.style.display = show ? 'block' : 'none'; + this.rootNode.addEventListener('focusout', this.onBlur.bind(this)); } -}; -DisclosureNav.prototype.toggleExpand = function (index, expanded) { - // close open menu, if applicable - if (this.openIndex !== index) { - this.toggleExpand(this.openIndex, false); + controlFocusByKey(keyboardEvent, nodeList, currentIndex) { + switch (keyboardEvent.key) { + case 'ArrowUp': + case 'ArrowLeft': + keyboardEvent.preventDefault(); + if (currentIndex > -1) { + var prevIndex = Math.max(0, currentIndex - 1); + nodeList[prevIndex].focus(); + } + break; + case 'ArrowDown': + case 'ArrowRight': + keyboardEvent.preventDefault(); + if (currentIndex > -1) { + var nextIndex = Math.min(nodeList.length - 1, currentIndex + 1); + nodeList[nextIndex].focus(); + } + break; + case 'Home': + keyboardEvent.preventDefault(); + nodeList[0].focus(); + break; + case 'End': + keyboardEvent.preventDefault(); + nodeList[nodeList.length - 1].focus(); + break; + } } - // handle menu at called index - if (this.topLevelNodes[index]) { - this.openIndex = expanded ? index : null; - this.topLevelNodes[index].setAttribute('aria-expanded', expanded); - this.toggleMenu(this.controlledNodes[index], expanded); - } -}; - -DisclosureNav.prototype.controlFocusByKey = function ( - keyboardEvent, - nodeList, - currentIndex -) { - switch (keyboardEvent.key) { - case 'ArrowUp': - case 'ArrowLeft': - keyboardEvent.preventDefault(); - if (currentIndex > -1) { - var prevIndex = Math.max(0, currentIndex - 1); - nodeList[prevIndex].focus(); - } - break; - case 'ArrowDown': - case 'ArrowRight': - keyboardEvent.preventDefault(); - if (currentIndex > -1) { - var nextIndex = Math.min(nodeList.length - 1, currentIndex + 1); - nodeList[nextIndex].focus(); - } - break; - case 'Home': - keyboardEvent.preventDefault(); - nodeList[0].focus(); - break; - case 'End': - keyboardEvent.preventDefault(); - nodeList[nodeList.length - 1].focus(); - break; + onBlur(event) { + var menuContainsFocus = this.rootNode.contains(event.relatedTarget); + if (!menuContainsFocus && this.openIndex !== null) { + this.toggleExpand(this.openIndex, false); + } } -}; -/* Event Handlers */ -DisclosureNav.prototype.handleBlur = function (event) { - var menuContainsFocus = this.rootNode.contains(event.relatedTarget); - if (!menuContainsFocus && this.openIndex !== null) { - this.toggleExpand(this.openIndex, false); + onButtonClick(event) { + var button = event.target; + var buttonIndex = this.topLevelNodes.indexOf(button); + var buttonExpanded = button.getAttribute('aria-expanded') === 'true'; + this.toggleExpand(buttonIndex, !buttonExpanded); } -}; -DisclosureNav.prototype.handleButtonKeyDown = function (event) { - var targetButtonIndex = this.topLevelNodes.indexOf(document.activeElement); + onButtonKeyDown(event) { + var targetButtonIndex = this.topLevelNodes.indexOf(document.activeElement); - // close on escape - if (event.key === 'Escape') { - this.toggleExpand(this.openIndex, false); - } + // close on escape + if (event.key === 'Escape') { + this.toggleExpand(this.openIndex, false); + } - // move focus into the open menu if the current menu is open - else if ( - this.useArrowKeys && - this.openIndex === targetButtonIndex && - event.key === 'ArrowDown' - ) { - event.preventDefault(); - this.controlledNodes[this.openIndex].querySelector('a').focus(); - } + // move focus into the open menu if the current menu is open + else if ( + this.useArrowKeys && + this.openIndex === targetButtonIndex && + event.key === 'ArrowDown' + ) { + event.preventDefault(); + this.controlledNodes[this.openIndex].querySelector('a').focus(); + } - // handle arrow key navigation between top-level buttons, if set - else if (this.useArrowKeys) { - this.controlFocusByKey(event, this.topLevelNodes, targetButtonIndex); - } -}; - -DisclosureNav.prototype.handleButtonClick = function (event) { - var button = event.target; - var buttonIndex = this.topLevelNodes.indexOf(button); - var buttonExpanded = button.getAttribute('aria-expanded') === 'true'; - this.toggleExpand(buttonIndex, !buttonExpanded); -}; - -DisclosureNav.prototype.handleMenuKeyDown = function (event) { - if (this.openIndex === null) { - return; + // handle arrow key navigation between top-level buttons, if set + else if (this.useArrowKeys) { + this.controlFocusByKey(event, this.topLevelNodes, targetButtonIndex); + } } - var menuLinks = Array.prototype.slice.call( - this.controlledNodes[this.openIndex].querySelectorAll('a') - ); - var currentIndex = menuLinks.indexOf(document.activeElement); + onLinkKeyDown(event) { + var targetLinkIndex = this.topLevelNodes.indexOf(document.activeElement); - // close on escape - if (event.key === 'Escape') { - this.topLevelNodes[this.openIndex].focus(); - this.toggleExpand(this.openIndex, false); + // handle arrow key navigation between top-level buttons, if set + if (this.useArrowKeys) { + this.controlFocusByKey(event, this.topLevelNodes, targetLinkIndex); + } } - // handle arrow key navigation within menu links, if set - else if (this.useArrowKeys) { - this.controlFocusByKey(event, menuLinks, currentIndex); + onMenuKeyDown(event) { + if (this.openIndex === null) { + return; + } + + var menuLinks = Array.prototype.slice.call( + this.controlledNodes[this.openIndex].querySelectorAll('a') + ); + var currentIndex = menuLinks.indexOf(document.activeElement); + + // close on escape + if (event.key === 'Escape') { + this.topLevelNodes[this.openIndex].focus(); + this.toggleExpand(this.openIndex, false); + } + + // handle arrow key navigation within menu links, if set + else if (this.useArrowKeys) { + this.controlFocusByKey(event, menuLinks, currentIndex); + } } -}; -DisclosureNav.prototype.handleLinkKeyDown = function (event) { - var targetLinkIndex = this.topLevelNodes.indexOf(document.activeElement); + toggleExpand(index, expanded) { + // close open menu, if applicable + if (this.openIndex !== index) { + this.toggleExpand(this.openIndex, false); + } + + // handle menu at called index + if (this.topLevelNodes[index]) { + this.openIndex = expanded ? index : null; + this.topLevelNodes[index].setAttribute('aria-expanded', expanded); + this.toggleMenu(this.controlledNodes[index], expanded); + } + } - // handle arrow key navigation between top-level buttons, if set - if (this.useArrowKeys) { - this.controlFocusByKey(event, this.topLevelNodes, targetLinkIndex); + toggleMenu(domNode, show) { + if (domNode) { + domNode.style.display = show ? 'block' : 'none'; + } } -}; -// switch on/off arrow key navigation -DisclosureNav.prototype.updateKeyControls = function (useArrowKeys) { - this.useArrowKeys = useArrowKeys; -}; + updateKeyControls(useArrowKeys) { + this.useArrowKeys = useArrowKeys; + } +} /* Initialize Disclosure Menus */ @@ -193,7 +183,6 @@ window.addEventListener( for (var i = 0; i < menus.length; i++) { disclosureMenus[i] = new DisclosureNav(menus[i]); - disclosureMenus[i].init(); } // listen to arrow key checkbox diff --git a/examples/index.html b/examples/index.html index 727de014bb..9ce73dc7e1 100644 --- a/examples/index.html +++ b/examples/index.html @@ -456,6 +456,7 @@

    Examples By Properties and States

  • Editable Combobox with Grid Popup
  • Disclosure (Show/Hide) for Answers to Frequently Asked Questions
  • Disclosure (Show/Hide) for Image Description
    • +
  • Disclosure for Navigation Menus
  • Disclosure for Navigation Menus
  • Actions Menu Button Using aria-activedescendant
  • Actions Menu Button Using element.focus()
    • @@ -470,6 +471,7 @@

    Examples By Properties and States

    aria-current
      +
    • Disclosure for Navigation Menus
    • Disclosure for Navigation Menus
    • Navigation Menubar
    • Navigation Treeview
      • @@ -512,6 +514,7 @@

      Examples By Properties and States

    • Editable Combobox with Grid Popup
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions
    • Disclosure (Show/Hide) for Image Description
      • +
    • Disclosure for Navigation Menus
    • Disclosure for Navigation Menus
    • Collapsible Dropdown Listbox
    • Actions Menu Button Using aria-activedescendant
      • diff --git a/examples/menubar/menubar-navigation.html b/examples/menubar/menubar-navigation.html index c18d0f249b..87b2a1af8b 100644 --- a/examples/menubar/menubar-navigation.html +++ b/examples/menubar/menubar-navigation.html @@ -51,6 +51,7 @@

      Navigation Menubar Example

      From 800ea095be6d561bb2d4ea47e49073fa9d1f3db7 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 15 Dec 2020 12:46:27 -0800 Subject: [PATCH 03/29] add tests, add codepen button, update some wording --- .../disclosure-navigation-hybrid.html | 28 +- test/tests/disclosure_navigation_hybrid.js | 437 ++++++++++++++++++ 2 files changed, 452 insertions(+), 13 deletions(-) create mode 100644 test/tests/disclosure_navigation_hybrid.js diff --git a/examples/disclosure/disclosure-navigation-hybrid.html b/examples/disclosure/disclosure-navigation-hybrid.html index 35a8d2cb36..51f8b9913e 100644 --- a/examples/disclosure/disclosure-navigation-hybrid.html +++ b/examples/disclosure/disclosure-navigation-hybrid.html @@ -51,7 +51,9 @@

      Example Usage Options

      -

      Example

      +
      +

      Example

      +
      +
      +
      Mythical University
      +
      Using a disclosure + link pattern for navigation
      +
      -
      -

      Mythical University

      +
      +

      Home

      Sample content section. Activating a link above will update and navigate to this region.

      +
      + Mythical University footer information +
      From a61bb110c018d85bff556fec85724d627b65784a Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 2 Feb 2021 12:11:36 -0800 Subject: [PATCH 08/29] hide dropdowns on load --- .../disclosure/disclosure-navigation-hybrid.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/disclosure/disclosure-navigation-hybrid.html b/examples/disclosure/disclosure-navigation-hybrid.html index 9a53331767..27c92b4564 100644 --- a/examples/disclosure/disclosure-navigation-hybrid.html +++ b/examples/disclosure/disclosure-navigation-hybrid.html @@ -64,8 +64,8 @@

      Example

      • About - -
          + +
      From 2ac52690ec81616749203357ce32fe5765b1cbf8 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Thu, 18 Feb 2021 10:19:34 -0800 Subject: [PATCH 11/29] update dropdown button labels --- examples/disclosure/disclosure-navigation-hybrid.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/disclosure/disclosure-navigation-hybrid.html b/examples/disclosure/disclosure-navigation-hybrid.html index 27c92b4564..ddbcc95664 100644 --- a/examples/disclosure/disclosure-navigation-hybrid.html +++ b/examples/disclosure/disclosure-navigation-hybrid.html @@ -26,7 +26,7 @@
    -

    Example Links + Disclosure for Navigation Menus

    +

    Example Disclosure Navigation Menu with Top-Level Links

    The following example demonstrates using the disclosure design pattern @@ -64,7 +64,7 @@

    Example

    • About - +
    @@ -50,8 +50,8 @@

    Navigation Menubar Example

    Similar examples include:

    From 22abf702e71862a9b35e8e4f32ffff443e0e50cf Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 24 Feb 2021 10:23:37 -0800 Subject: [PATCH 27/29] Make link text consistent --- examples/treeview/treeview-navigation.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/treeview/treeview-navigation.html b/examples/treeview/treeview-navigation.html index a50bc80e23..5973b5430e 100644 --- a/examples/treeview/treeview-navigation.html +++ b/examples/treeview/treeview-navigation.html @@ -36,7 +36,7 @@

    Navigation Treeview Example

    The below example demonstrates how the Treeview Design Pattern can be used to build a navigation tree for a set of hierarchically organized web pages. - It illustrates navigation of a mythical university web site that is comparable to the navigation illustrated in the Example of Disclosure for Navigation Menus. + It illustrates navigation of a mythical university web site that is comparable to the navigation illustrated in the Example Disclosure Navigation Menu. As noted above, the disclosure pattern is better suited for most web sites because few sites need the additional keyboard functionality required to support the ARIA tree role.

    From 0ba0a3e821745f83a96bb4798bf037163c08f7bf Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 24 Feb 2021 10:37:34 -0800 Subject: [PATCH 28/29] Uupdate index of examples --- examples/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/index.html b/examples/index.html index 9ce73dc7e1..c0df04b1e9 100644 --- a/examples/index.html +++ b/examples/index.html @@ -456,8 +456,8 @@

    Examples By Properties and States

  • Editable Combobox with Grid Popup
  • Disclosure (Show/Hide) for Answers to Frequently Asked Questions
  • Disclosure (Show/Hide) for Image Description
    • -
  • Disclosure for Navigation Menus
    • -
  • Disclosure for Navigation Menus
    • +
  • Disclosure Navigation Menu with Top-Level Links
    • +
  • Disclosure Navigation Menu
  • Actions Menu Button Using aria-activedescendant
  • Actions Menu Button Using element.focus()
  • Navigation Menu Button
    • @@ -471,8 +471,8 @@

    Examples By Properties and States

    aria-current @@ -514,8 +514,8 @@

    Examples By Properties and States

  • Editable Combobox with Grid Popup
  • Disclosure (Show/Hide) for Answers to Frequently Asked Questions
  • Disclosure (Show/Hide) for Image Description
    • -
  • Disclosure for Navigation Menus
    • -
  • Disclosure for Navigation Menus
    • +
  • Disclosure Navigation Menu with Top-Level Links
    • +
  • Disclosure Navigation Menu
  • Collapsible Dropdown Listbox
  • Actions Menu Button Using aria-activedescendant
  • Actions Menu Button Using element.focus()
    • From 00c1af9fc62796f2594b0da7d253fcd7a62178e6 Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 3 Mar 2021 11:12:15 -0800 Subject: [PATCH 29/29] Remove accessibility feature documentation of high contrast support per agreement in March 2 meeting --- examples/disclosure/disclosure-navigation-hybrid.html | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/disclosure/disclosure-navigation-hybrid.html b/examples/disclosure/disclosure-navigation-hybrid.html index dee29149a8..55a92343a2 100644 --- a/examples/disclosure/disclosure-navigation-hybrid.html +++ b/examples/disclosure/disclosure-navigation-hybrid.html @@ -164,7 +164,6 @@

    Accessibility Features

    The top-level list has three items where each item contains a top-level link and an associated disclosure button. The set of links controlled by a disclosure button is in a list nested inside the list item that contains the button. -
  • To ensure the carets that indicate the presence and state of the disclosures are reliably rendered when operating system or browser high contrast settings are enabled, visual indication of the show/hide state is created using CSS ::after pseudo element border styles.
  • If a dropdown is open and focus is inside the navigation region, pressing Esc will close the dropdown. Moving focus out of the navigation region also closes an open dropdown.