A11y Bug 6223357: Keyboard focus moves out to the 'Clip successful!' pop-up window when user navigates via tab key.

[KethanaReddy7]

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 "Clip" button under 'Article' button through Tab key and press enter key.
4. Now navigate the pop-up window using tab key.
5. Observe the issue here.

Actual Result:
Keyboard focus moves out to the 'Clip Successful!' pop-up window when user navigates via tab key.
Keyboard focus lands on the 'Top actions menu' button after 'Close the Clipper' button via tab key.

Expected Result:
Keyboard focus should not move out to the 'Clip Successful!' pop-up window when user navigates via tab key.

User Experience:
Keyboard users will be impacted here as they navigate the 'Clip Successful!' pop-up window via tab key, but focus moves out to the pop-up window via tab key.

MAS Reference:
Focus Order - Liquid (microsoft.com)

[claude]

Claude finished @KethanaReddy7's task in 3m 11s —— View job • claude/issue-636-20260309-0548 • Create PR ➔

---

Implemented Focus Trap for Clip Successful Popup

• Gather context and understand the codebase structure
• Locate the "Clip Successful" popup component
• Implement focus trap to keep keyboard focus within the popup
• Add test for focus trap functionality
• Commit and push changes

Summary:
Fixed the accessibility issue where keyboard focus could escape the "Clip Successful" popup when navigating via Tab key.

Changes made:

1. Added handleFocusTrap method to mainController.tsx that:

   • Intercepts Tab key presses when the success panel is displayed
   • When Tab is pressed on the last focusable element (Close button), wraps focus to the first element (View in OneNote button)
   • When Shift+Tab is pressed on the first focusable element, wraps focus to the last element

2. Added unit tests to mainController_tests.tsx:

   • Test for Tab wrapping from last to first element
   • Test for Shift+Tab wrapping from first to last element
   • Test that focus trap is only active on the success panel

Files modified:

• src/scripts/clipperUI/mainController.tsx
• src/tests/clipperUI/mainController_tests.tsx

|

[KethanaReddy7]

Closing the issue with the pr #637