Fix keyboard focus loss when closing location dropdown with ESC

[Copilot]

Problem

Keyboard focus is lost when closing the location dropdown via ESC key, violating MAS 2.4.3 Focus Order. The external OneNotePicker library closes the popup but doesn't restore focus to the trigger element.

Changes

SectionPicker Component (sectionPicker.tsx)

• Added popupIsOpen and escWasPressed state tracking
• Implemented attachEscapeHandler lifecycle method to detect ESC key while popup is open
• Modified onPopupToggle to restore focus to sectionLocationContainer when closing via ESC

Flow:

// User opens popup
onPopupToggle(true) → popupIsOpen = true

// ESC pressed while open
attachEscapeHandler: keyCode === 27 && popupIsOpen → escWasPressed = true

// OneNotePicker closes popup
onPopupToggle(false) → if (escWasPressed) { 
  setTimeout(() => document.getElementById(sectionLocationContainer).focus(), 0)
}

Test Coverage (sectionPicker_tests.tsx)

• Added test verifying ESC flag behavior and focus restoration logic
• Uses modern KeyboardEvent constructor with fallback for older test environments

Notes

• Maintains consistency with existing document.onkeydown pattern used throughout codebase (mainController, optionsPanel, onenotepicker library)
• Focus restoration uses setTimeout(0) to ensure DOM readiness
• Properly cleans up event listener on component unmount

Original prompt

[Location - Dropdown]: Keyboard focus gets lost after closing the 'location dropdown' control via esc key.

Work Item Details

Note: Please focus on the descriptions and information that provide context about the task requirements, functionality, and implementation details. Dates, priorities, and administrative metadata are less relevant for coding tasks.

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. Now navigate the dropdown using tab key and then pressing Esc key 
5. Observe the issue here.

Actual Result:

Keyboard focus gets lost after closing the 'location dropdown' control via esc key.

Expected Result:
Keyboard focus should land on 'location dropdown' control after closing pop-up via esc key.

User Experience:

Keyboard users will impact here as they activate any control, pop-up get opened and focus get lost after closing the pop-up via esc key.

MAS Reference:

Focus Order - Liquid (microsoft.com)

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

Tags

A11yCT; A11yMAS; A11ySev3; ClipperA11y; FC-Jun22; HCL-Clipper; HCL-E+D; HCL-OneNote; MAS2.4.3; OneNoteClipper_Web; UnderReview; Web

RCA Analysis

Was change validated in devMain first before porting to fork?

Why was Flighting|Backout not used?

Impact of bug (# users affected):

RCA and Mitigation/Fix Details:

What are you doing to prevent this in the future?

Comments

Mani Revathi Yegadasu (Wed, 28 Feb 2024 07:37:15 GMT): Verified the issue in the below environment:

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

OS: Windows 11 OS build 26058.1000

Edge Dev Version: Version 123.0.2400.1 (Official build) dev (64-bit)

Issue is still repro.

Work item: AB#6210968
Created via Azure DevOps

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.