Repository navigation
A11y Bug 6223357: Keyboard focus moves out to the 'Clip successful!' pop-up window when user navigates via tab key. #636
Description
Activity
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:
-
Added
handleFocusTrapmethod tomainController.tsxthat:- 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
-
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.tsxsrc/tests/clipperUI/mainController_tests.tsx
|
- added a commit that references this issue
on Mar 9, 2026 Closing the issue with the pr #637
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:
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)