Skip to content

Commit

Permalink
chore(docs): Nav & Nav-Item & Nav-Disclosure docs update (VIV-2116) (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
rachelbt authored Jan 7, 2025
1 parent 55801dc commit 11ab00c
Show file tree
Hide file tree
Showing 6 changed files with 521 additions and 144 deletions.
24 changes: 8 additions & 16 deletions apps/docs/content/_data/components.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,22 +104,14 @@
"useCases": "./libs/components/src/lib/side-drawer/USE-CASES.md"
},
{
"title": "Nav",
"page": "legacy",
"markdown": "./libs/components/src/lib/nav/README.md",
"children": ["Nav Item", "Nav Disclosure"]
},
{
"title": "Nav Item",
"page": "legacy",
"markdown": "./libs/components/src/lib/nav-item/README.md",
"parent": "Nav"
},
{
"title": "Nav Disclosure",
"page": "legacy",
"markdown": "./libs/components/src/lib/nav-disclosure/README.md",
"parent": "Nav"
"title": "Navigation",
"description": "A navigation component makes it easy for users to navigate through your application. Nav accepts Nav Item and Nav Disclosure elements as children.",
"variations": "./libs/components/src/lib/nav/VARIATIONS.md",
"guidelines": "./libs/components/src/lib/nav/GUIDELINES.md",
"hideGuidelines": "true",
"code": "./libs/components/src/lib/nav/README.md",
"accessibility": "./libs/components/src/lib/nav/ACCESSIBILITY.md",
"useCases": "./libs/components/src/lib/nav/USE-CASES.md"
},
{
"title": "Tooltip",
Expand Down
16 changes: 16 additions & 0 deletions libs/components/src/lib/nav/ACCESSIBILITY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
## Implementation

- **Icons**: ideally the icon should be accompanied by a label or text, but if this is not the case, be sure to supply the **Nav Item** or the **Nav Disclosure** component with an aria-label attribute so that screen reader user will know the purpose of the items.

## Keyboard Interaction

When the nav has focus:

`Enter`: activates the nav-disclosure and toggles the visibility of the content.
`Space`: activates the nav-disclosure and toggles the visibility of the content.
`Tab`: moves focus to the next element in the tab order.
`Shift` + `Tab`: moves focus to the previous element in the tab order.

## Resources

- [Vivid Nav: Manual accessibility test](https://docs.google.com/spreadsheets/d/1dl4x8Qjj0Mvdvky8DgbKdYxSrKmBwTd9j6gkgoitiLc/edit?gid=1175911860#gid=1175911860)
Empty file.
Loading

0 comments on commit 11ab00c

Please sign in to comment.