A11y Bug 6210624: Keyboard focus and arrow key navigation in location dropdown

[Copilot]

When the location dropdown is expanded via keyboard, focus remains on the trigger button instead of moving to the currently selected section item. Additionally, the OneNotePicker library only handles Enter/Tab key events — there is no Up/Down arrow key navigation in the popup list, leaving keyboard users unable to navigate between sections or notebooks using arrow keys.

Changes

• sectionPicker.tsx — onPopupToggle: When the popup opens, schedules a setTimeout(0) callback (to allow DOM render) that:
  1. Focuses the currently selected section element by curSectionId. Falls back to the first keyboard-navigable item in #sectionPickerContainer if no selected element is found.
  2. Attaches a keydown listener on #sectionPickerContainer for Up/Down arrow key navigation. The listener finds all visible keyboard-navigable items in the popup and moves focus to the previous (Up) or next (Down) item relative to the currently focused element. A data-arrow-key-handler-attached attribute guards against duplicate listeners.

Demo:
https://github.com/user-attachments/assets/b66fb057-5e67-42ab-a743-22cd4286a7f5

[KethanaReddy7]

@copilot the keyboard focus is falling inside its only working with Tab keys and not Arrow keys. Can you please fix this

[Copilot]

@copilot the keyboard focus is falling inside its only working with Tab keys and not Arrow keys. Can you please fix this

Fixed in commit 20594c7. The OneNotePicker library only handles Enter/Tab key events — there was no arrow key navigation at all in the popup list. I've added a keydown listener on the popup container (#sectionPickerContainer) that intercepts Up/Down arrow keys and moves focus between the keyboard-navigable items. A guard attribute (data-arrow-key-handler-attached) prevents duplicate listeners if the popup is reopened.

[KethanaReddy7]

@copilot I'm able to navigate through sections using up and down arrow key but navigation through notebooks using up and down arrow keys is not working. I am able to navigate through the notebooks if i only open the prev notebook sections. Can you fix this

[Copilot]

@copilot I'm able to navigate through sections using up and down arrow key but navigation through notebooks using up and down arrow keys is not working. I am able to navigate through the notebooks if ...

Fixed in commit 155b3d7. The root cause was that the OneNotePicker library uses a "Closed" CSS class to visually hide children of collapsed notebooks, but those child <li> elements (sections/sectionGroups) stay in the DOM with their tabindex attributes. The arrow key handler was treating them as navigable, so pressing Down on a collapsed notebook jumped to a hidden section instead of the next notebook.

The fix filters focusable items to only visible ones — specifically, items whose parentElement does not have a .Closed ancestor. This keeps the collapsed notebook header itself focusable (it has the Closed class directly on itself, not on an ancestor) while excluding its hidden children.

[aanchalbhansali]

Approved