USWDS-Site - In-page navigation: Update component location documentation #2033
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
amyleadem
commented
Mar 24, 2023
|
|
||
| - **Enable tab order so keyboard users access the in-page navigation before the main content section.** When a user tabs through a page that contains the in-page navigation component, they should find the in-page navigation before the `main` content. Since the in-page nav will most commonly exist to the right of the content (and follows the `main` element in the markup) this may seem like a tab-order error, but tabbing through the entire page before getting to in-page navigation links is not logical, creates confusion, and diminishes the user experience. | ||
| - **Keyboard users should access the in-page navigation before the main content.** When a user tabs through a page that contains the in-page navigation component, they should find the in-page navigation _before_ the `main` content. Since the in-page navigation appears after the main content in the reading order, this may seem like a tab-order error. However, tabbing through the entire page before getting to in-page navigation links is not logical, creates confusion, and diminishes the user experience. |
There was a problem hiding this comment.
Made some additional updates here because the the recommended markup shows the in-page nav element is added before the main markup, not after.
Because of this, there is no need to ask users to force tab order with keyboard navigation by default, so I removed reference to this. However, if we wanted to be explicit, we can restore that copy.
…-page-nav-location
sarah-sch
approved these changes
Mar 27, 2023
bonnieAcameron
approved these changes
Mar 27, 2023
mejiaj
reviewed
Mar 27, 2023
mejiaj
approved these changes
Mar 30, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Updated the component location in the in-page navigation documentation to be more accurate and inclusive of other languages.
Thanks to @bonnieAcameron and @sarah-sch for the copywriting help!
Related issue
Closes #2011
Preview link
Preview link: In-page navigation component page
Problem statement
Currently, the in-page navigation guidance states that the component should be "displayed to the right of the main content".
However, it is not clear if the component should always be to the right of the main content and is guidance fit only for left-to-right languages. We should update the guidance to be more explicit and based on content flow to make it applicable in all situations.
Solution
Instructing users to display the in-page navigation "after the main content in the language's natural reading order" adds clarity and is more inclusive of other language types.
This PR also fixes a couple of formatting issues and replaces references to "in-page nav" with "in-page navigation".
Testing and review
Confirm that the updated content makes sense, is accurate, and has no punctuation and grammatical errors.