Navigation root selector does not expose option names and selected state consistently

[vvallalta-code]

Summary

The hierarchical navigation root picker and the Menu editor's trigger do not provide a consistent programmatic name/value/selection model. Visible navigation labels and the current root selection are not reliably announced, and selected state is represented visually rather than through accessible semantics.

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

Environment

• Consumer: Azure API Management developer portal designer, Menu widget editor
• Reproduced with @paperbits/core 0.1.660
• The same controlling templates are present on the current paperbits-core master branch
• Verify with Edge or Chrome and NVDA, JAWS, or Narrator

Controlling code

• src/menu/ko/menuEditor.html: the visible Root navigation item label has no for association, while the picker trigger is an anchor with no explicit accessible relationship to that label/current value
• src/workshops/navigation/ko/navigationItemSelector.html: exposes a role="list"/role="listitem" structure for an interactive hierarchical selector; selected state is not exposed with aria-selected or an equivalent tree selection pattern
• src/workshops/navigation/ko/navigation.html: selection is represented by a CSS selected class and title, without a programmatic selected state

Steps to reproduce

1. Add or select a Menu widget in the designer.
2. Open the Menu editor and navigate to Root navigation item using only the keyboard.
3. With a screen reader, note the trigger's announced name and current value.
4. Open the selector, move through root items, select an item, then return to the trigger.
5. Check whether option names, hierarchy, and selected state are announced.

Actual behavior

• The visible field label is not programmatically associated with the trigger.
• Interactive rows use list/listitem semantics and visual selection styling, but do not expose a reliable selected state.
• A screen-reader user cannot consistently determine the field purpose, current root value, or which item is selected.

Expected behavior

• The picker trigger is announced as Root navigation item together with its current value.
• Every selectable row has an accessible name derived from its visible displayLabel/label.
• The chosen semantic pattern consistently exposes hierarchy and selected/expanded state, for example a tree/treeitem pattern or another ARIA pattern with complete keyboard support.
• Selecting None or a navigation item updates the trigger value and announcement.

Suggested direction

Give the trigger a stable ID and associate the visible label using <label for> where the resulting control semantics are valid, or use aria-labelledby combining the field label and current value. For the hierarchy, adopt one coherent selectable-tree pattern and expose selected/expanded state on the interactive items rather than only through CSS/title attributes.

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

Acceptance criteria

• The field trigger announces Root navigation item and the current value.
• All selectable items, including None, have meaningful accessible names.
• Current selection and branch expansion state are programmatically exposed and update after interaction.
• Keyboard navigation and activation follow the selected ARIA pattern, including Arrow keys, Enter, Space, Tab, and Shift+Tab as applicable.
• Focus returns predictably to the trigger when the picker closes.
• NVDA or JAWS and Narrator announce label, item name, hierarchy, and state correctly in Edge or Chrome.
• Add regression tests for naming, state, and selection 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).