canonical / canonical/vanilla-framework

Navigation dropdowns do not report expanded/collapsed state

Open
#5,203 2 comments 0 reactions 0 assignees View on GitHub
Accessibility Bug 🐛 P3 Needs decision
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.