Nested navigation toggle does not announce item name or expand/collapse action

[vvallalta-code]

Summary

The expand/collapse buttons for nested navigation items use the generic accessible name Toggle nested items. When multiple items are present, a screen-reader user cannot tell which item a button controls or whether activating it will expand or collapse that item.

This is the Paperbits-owned root cause for downstream Azure API Management developer portal ADO 30093033.

Environment

• Consumer: Azure API Management developer portal designer, Site Menu/Navigation editing
• Reproduced with @paperbits/core 0.1.660
• The same markup is present on the current paperbits-core master branch
• Verify with Edge or Chrome and NVDA, JAWS, or Narrator

Controlling code

• src/workshops/navigation/ko/navigation.html: nested-item button is hard-coded as aria-label="Toggle nested items"; this surface already places aria-expanded on the button
• src/workshops/navigation/ko/navigationItemSelector.html: uses the same hard-coded label, but does not expose aria-expanded on the toggle button

Steps to reproduce

1. Open the Navigation workshop or a Menu widget's Root navigation item selector.
2. Ensure at least two navigation items have children.
3. Navigate to their expand/collapse buttons with the keyboard and inspect them with a screen reader.
4. Expand and collapse each item.

Actual behavior

Each control is announced only as Toggle nested items. The item name and intended action are missing. In navigationItemSelector.html, the button also lacks its expanded/collapsed state.

Expected behavior

Each button announces the action, the controlled item's visible name, and current state, for example Expand Products, collapsed and Collapse Products, expanded. State belongs on the interactive button and updates immediately after activation.

Suggested direction

Compute the accessible name from node.collapsed() plus node.displayLabel/node.label, and bind aria-expanded to the toggle button in both templates. If practical, associate the toggle with the nested group using stable aria-controls/IDs.

A consumer-side template prototype with dynamic labels and state was manually validated, then reverted to avoid forking Paperbits.

Acceptance criteria

• Toggle names identify both action and navigation item.
• aria-expanded is present on the interactive button and updates between true and false.
• Enter and Space toggle the intended branch.
• Focus remains on the same toggle after state changes.
• NVDA or JAWS and Narrator announce name and state correctly in Edge or Chrome.
• Add a regression test for label/state updates where practical.

Accessibility impact

Impacts WCAG 2.1 criteria 1.3.1 (Info and Relationships), 2.4.6 (Headings and Labels), and 4.1.2 (Name, Role, Value).