Fix keyboard focus management in location dropdown

[Copilot]

When opening the location dropdown via keyboard (Tab + Enter), focus remains on the trigger button instead of moving to the selected section, violating WCAG 2.4.3 and disorienting keyboard users.

Changes

src/scripts/clipperUI/components/sectionPicker.tsx

• Modified onPopupToggle() to set focus when dropdown opens via new setFocusOnSelectedSection() method with 100ms delay for DOM rendering
• Added setFocusOnSelectedSection() that:
  • Focuses selected section element by ID from state
  • Falls back to first keyboard-focusable element ([tabindex]:not([tabindex="-1"])) if no selection
  • Queries #notebookList from OneNotePicker v1.0.9 (external library dependency)

onPopupToggle(shouldNowBeOpen: boolean) {
    if (shouldNowBeOpen) {
        Clipper.logger.logClickEvent(Log.Click.Label.sectionPickerLocationContainer);
        setTimeout(() => {
            this.setFocusOnSelectedSection();
        }, 100);
    }
    this.props.onPopupToggle(shouldNowBeOpen);
}

Notes

• OneNotePicker library scrolls to selected item but doesn't manage focus
• Timeout required for cross-browser DOM rendering reliability
• Hard-codes notebookList ID from external library (documented in comments)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>A11y Bug 6210624: [Location - Dropdown]: Keyboard focus does not land over the selected item after expanding the "location dropdown" using keyboard.</issue_title>
<issue_description>Test Environment:

OS: Win 11 version 22h2 build 25151.1000

Application: OneNote Clipper

URL: https://www.onenote.com/clipper

Browser: Edge Version 105.0.1300.0 (Official build) dev (64-bit)

Pre-requisite:

Install OneNote clipper from https://www.onenote.com/clipper and sign-in with Microsoft work account.

Repro Steps:

1. Go to https://www.onenote.com/clipper URL.

2. Select "Clip to OneNote" button in top right corner.

3. Navigate to "Location dropdown" under 'Article' button through Tab key and press enter key.

4. Observe the issue here.

Actual Result:

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

Expected Result:

Keyboard focus should land over the selected item after expanding the "location dropdown" using keyboard.

User Experience:

Keyboard user will face difficulty if focus is not landing first items after expanding 'location dropdown' so the end users will not be able to identify that the focus is actually on which control so the end users will get confused.

MAS Reference:

Focus Order - Liquid (microsoft.com)

Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com).</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes A11y Bug 6210624: [Location - Dropdown]: Keyboard focus does not land over the selected item after expanding the "location dropdown" using keyboard. #616

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.