canonical / canonical/vanilla-framework
Navigation dropdowns do not report expanded/collapsed state
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
**Describe the bug**
Navigation dropdowns do not report expanded/collapsed state.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to https://vanillaframework.io/docs/examples/patterns/navigation/dropdown-dark?theme=light
2. Observe that the nested `p-navigation__item--dropdown-toggle` elements do not have `aria-expanded` attribution on them.
3. Install a screen reader
4. Access the above navigation bar using keyboard controls, and tab over the navigation dropdowns.
5. Verify that the screen reader does not report expanded/collapsed state.
**Expected behavior**
The navigation dropdown links report expanded/collapsed state to screen readers. Tabbing over them should report "button collapsed" or something similar. Expanding/collapsing them should also report the change to the screen reader.
See https://getbootstrap.com/docs/4.0/components/navbar/ for example.
**Desktop (please complete the following information):**
- OS: PopOS 22.04
- Browser Chrome
- Version 125.0.6422.141 x64
**Additional context**
This was noticed during [work on reduced top-nav](https://github.com/canonical/vanilla-framework/pull/5107#discussion_r1661262171), but effects all vanilla navigation.
Contributor guide
Research direction
Start with the navigation dropdown example at the linked Vanilla Framework URL and inspect the nested p-navigation__item--dropdown-toggle elements, including the reduced top-nav work referenced in pull request 5107. Verify keyboard and screen-reader behavior, then ensure the dropdown links report their expanded or collapsed state and announce changes when toggled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100