Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mcking65 opened this issue May 3, 2019 · 5 comments · Fixed by #1070
Closed

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

mcking65 opened this issue May 3, 2019 · 5 comments · Fixed by #1070
Assignees
Labels
Example Page Related to a page containing an example implementation of a pattern

Comments

@mcking65
Copy link
Contributor

mcking65 commented May 3, 2019

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

@mcking65 mcking65 added the Example Page Related to a page containing an example implementation of a pattern label May 3, 2019
@mcking65 mcking65 added this to the 1.1 APG Release 4 milestone May 3, 2019
@smhigley smhigley self-assigned this May 7, 2019
@mcking65
Copy link
Contributor Author

mcking65 commented Jul 6, 2019

See excellent discussion of design decisions in the conversation thread of pull request #1036.

@mcking65
Copy link
Contributor Author

mcking65 commented Jul 6, 2019

@@smhigley, I am done with editorial revisions to the issue1028-disclosure-menu-example feature branch.

You may want to review the test code. I added documentation for aria-current, which currently does not have a test. I also expanded the documentation for arrow keys, home, and end. Now, there are multiple rows with the same data-test-id, which is OK. However, it might be good to sanity check to make sure the testing covers all the documented behaviors.

My revisions to the accessibility features section were the most significant. They are worth a close read. I attempted to adjust wording and rationale to be understandable by a broader audience. I'm curious if you agree whether I achieved that objective.

@mcking65
Copy link
Contributor Author

mcking65 commented Jul 6, 2019

I am wondering if the checkbox for optional navigation keys should be unchecked by default. Given there are both side effects and extra code driven by the optional behaviors, shouldn't they be off by default?

@smhigley
Copy link
Contributor

smhigley commented Jul 7, 2019

@mcking65 I cleaned up the git history and updated the w3c branch, then opened a PR here: #1070.

I addressed your comments on aria-current and the package.json changes on the PR. Thanks!

mcking65 pushed a commit that referenced this issue Jul 10, 2019
To resolve issue #1028, adds a disclosure pattern example that illustrates a simple site navigation bar with dropdowns.
The navigation bar is a  set of disclosure buttons that show and hide dropdown lists of links.
@mcking65
Copy link
Contributor Author

Thank you thank you @smhigley !

michael-n-cooper pushed a commit that referenced this issue Jul 10, 2019
Add disclosure menu example for issue 1028 (pull #1070)

To resolve issue #1028, adds a disclosure pattern example that illustrates a simple site navigation bar with dropdowns.
The navigation bar is a  set of disclosure buttons that show and hide dropdown lists of links.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Example Page Related to a page containing an example implementation of a pattern
Development

Successfully merging a pull request may close this issue.

2 participants