diff --git a/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html index 0256cc0297515..1dbd62266fe90 100644 --- a/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html +++ b/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html @@ -2,71 +2,13 @@ - Example Disclosure Navigation Menu with Top-Level Links - - - - - - - - - -
-

Example Disclosure Navigation Menu with Top-Level Links

- -
-

About This Example

-
-

Important

-

- 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. - This implementation of site navigation does not use the menu role because it does not provide the complex functionality that assistive technologies expect in a widget that has the menu role. - Typical site navigation does not need all the - keyboard interactions specified by the menu and menubar pattern. -

-
- -

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

-

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
@@ -157,227 +99,5 @@
Mythical University footer information
- -
- -
-

Accessibility Features

-
    -
  1. Since this set of links and disclosure buttons provides navigation 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 communicate the hierarchy of the navigation system to assistive technology users. - 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. -
    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. -
    4. -
  4. - Optional navigation keys (Arrow keys, Home, and End): -
      -
    1. Enabling 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. -
    -
    5. -
-
- -
-

Keyboard Support

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- Tab
- Shift + Tab - 		Move keyboard focus among top-level links and buttons, and if a dropdown is open, 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 top-level link or button with a collapsed dropdown, and it is not the last top-level item, moves focus to the next top-level link or button.
    • -
  • if focus is on a top-level button and its dropdown is expanded, moves focus to the first link in the dropdown.
    • -
  • If focus is on a link within an expanded dropdown, and it is not the last link, moves focus to the next link.
    • -
-
- Up Arrow or
- Left Arrow
- (Optional) - 		-
    -
  • If focus is on a top-level link or button, and it is not the first item, moves focus to the previous link or button.
    • -
  • If focus is on a link within an expanded dropdown, and it is not the first link, moves focus to the previous link.
    • -
-
Home (Optional) -
    -
  • If focus is on a top-level link button, and it is not the first item, moves focus to the first item.
    • -
  • If focus is on a link within an expanded dropdown, and it is not the first link, moves focus to the first link.
    • -
-
End (Optional) -
    -
  • If focus is on a top-level link or button, and it is not the last item, moves focus to the last item.
    • -
  • If focus is on a link within an expanded dropdown, and it is not the last link, moves focus to the last link.
    • -
-
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
- aria-controls="IDREF" - - button - Indicates that 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

-

To copy the following HTML code, please open it in CodePen.

- -
- - -
-