A11y Bug 6210624: Keyboard focus does not land over the selected item after expanding the "location dropdown" using keyboard.

[KethanaReddy7]

When the location dropdown is expanded using keyboard, focus should move to the dropdown list automatically when we hit enter. This improves keyboard accessibility by ensuring users can immediately identify which item is selected.

The fix adds focus management to the onPopupToggle handler that:

• Falls back to focusing the first focusable item in the list

Demo
https://github.com/user-attachments/assets/aa5fc10b-28ca-46e1-8d62-ebeef9326953

Fixes #640

[KethanaReddy7]

@claude the problem is that when focus lands on location dropdown and on hitting enter the focus is not landing on the list, so on hitting enter the focus should go into the dropdown list

[claude]

Claude finished @KethanaReddy7's task in 2m 23s —— View job

---

Fix Applied

• Read and understand the current implementation
• Identify why focus isn't landing on the dropdown list
• Implement the fix
• Commit and push the changes

Issue: The original code used requestAnimationFrame to wait for the popup to render before focusing. However, requestAnimationFrame only waits for one frame, which may not be enough time for the external OneNotePickerComponent to fully render the popup and its interactive elements.

Fix: Replaced requestAnimationFrame with setTimeout(..., 100) to give the popup sufficient time to fully render before attempting to focus on elements within it.

Changes made:

• src/scripts/clipperUI/components/sectionPicker.tsx: Changed timing mechanism from requestAnimationFrame to setTimeout with 100ms delay

Commit: de64190
|