Skip to content

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

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

Description

@KethanaReddy7
KethanaReddy7
opened on Mar 9, 2026

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)

Activity

  1. KethanaReddy7
    added
    claude
    on Mar 9, 2026

  2. claude commented on Mar 9, 2026

    @claude
    claudeBot
    on Mar 9, 2026 – with 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

    |

  3. claude
    added a commit that references this issue on Mar 9, 2026

    Fix: Implement focus trap for Clip Successful popup (A11y)

    ecc89bb

  4. KethanaReddy7 commented on Mar 12, 2026

    @KethanaReddy7
    KethanaReddy7
    on Mar 12, 2026
    ContributorAuthor

    Closing the issue with the pr #637

  5. KethanaReddy7
    closed this as completedon Mar 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    claude

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions