Skip to content

Add site navigation example that uses disclosure buttons that show lists of links #1028

@mcking65

Description

@mcking65

Develop an example of a site navigation system that uses disclosure buttons that show and hide simple lists of links that is similar to the site navigation provided on www.usa.gov.

  1. Each disclosure button is in the tab sequence and activating it adds a list of links to the tab sequence.
  2. To facilitate comparison to other site navigation patterns, replicate the Mythical University site structure that is demonstrated in the navigation menubar example.
  3. Wrap the site navigation in a navigation region.
  4. Instead of making each hyperlink in the navigation load a new page, reload the example page and inject new content into a content landmark region that is displayed just below the navigation region. In the content landmark region, include a heading with text that matches the link that was executed and a paragraph of text.
  5. When a link is executed, add aria-current="page" to that link and remove it from the link that previously had it.
  6. When the example page initially loads, the "About > Overview" page content should be displayed in main and that link should have aria-current.

Preview Link for WIP

View disclosure navigation menu example in the issue1028-disclosure-menu-example branch

Metadata

Metadata

Assignees

Labels

Example PageRelated to a page containing an example implementation of a pattern

Type

No type

Relationships

None yet

Development

No branches or pull requests

Issue actions