Claude A11y Test Bug

[aanchalbhansali]

Environment Details:
Application Name: OneNote Clipper-Web
OS: Windows 11 OS build 26058.1000
Edge Dev Version: Version 123.0.2400.1 (Official build) dev (64-bit)
AT's: Keyboard

Pre-Requisites:

Open the URL: OneNote Web Clipper Installation
Invoke the 'Get OneNote web Clipper for Microsoft Edge' button.
Edge Add-ons page will appear. Invoke the Get button.
OneNote Clipper will be added in edge extension section.
Expand the Extension button and turn on the OneNote Clipper Show in Toolbar button.
OneNote Clipper will appear beside of the search field.
Now invoke the OneNote clipper button.
Sign in with V-id.
Repro Steps:

Open the Ankylosaurus - Wikipedia
Now invoke the OneNote clipper button.
OneNote Clipper dialog box will appear.
Tab to navigate to the Clip button and invoke it. And observe the issue.
Actual Result:
On invoking the Clip button, Keyboard focus is not visible on the Clip successful dialog box.
Note: Similar issue observe in the Region dialog box also.

Expected Result:
On invoking the Clip button, Keyboard focus should be visible on the Clip successful dialog box View in OneNote button.

User Impact:
Keyboard users might be confused, if there is no keyboard focus on the Successful dialog box.

MAS Reference:
MAS 2.4.7 – Focus Visible

[claude]

Claude finished @aanchalbhansali's task in 2m 55s —— View job • claude/issue-626-20260203-1205 • Create PR ➔

---

Accessibility Fix Implemented

I've implemented a fix for the keyboard focus visibility issue on the Clip successful dialog and Region dialog.

Changes Made

1. Success Panel (src/scripts/clipperUI/panels/successPanel.tsx)

• Added initiallySetFocus method to programmatically set focus on an element
• Applied onElementFirstDraw(this.initiallySetFocus) to the "View in OneNote" button
• When the success dialog appears, keyboard focus is now automatically set to the "View in OneNote" button

2. Region Selecting Panel (src/scripts/clipperUI/panels/regionSelectingPanel.tsx)

• Added the same focus management pattern
• When the region instructions dialog appears, keyboard focus is now set to the "Back to Home" button

Technical Approach

The fix follows the existing pattern used in SignInPanel.tsx where onElementFirstDraw (defined in ComponentBase.ts) is used to execute a callback when an element is first rendered. This ensures focus is set exactly once when the panel first appears.

Accessibility Compliance

This addresses MAS 2.4.7 – Focus Visible by ensuring keyboard users have visible focus when these dialogs are displayed.

---

|

[aanchalbhansali]

@claude Can you create PR for this?

[claude]

Claude finished @aanchalbhansali's task in 47s —— View job

---

Pull Request Created

• Check current branch status and commits
• Create pull request for the accessibility fix

I've created the pull request for the accessibility fix:

PR #627: fix: Set keyboard focus on dialogs for accessibility (MAS 2.4.7)

The PR includes:

• Focus management for the Clip successful dialog ("View in OneNote" button)
• Focus management for the Region instructions dialog ("Back to Home" button)
• Addresses MAS 2.4.7 Focus Visible requirements
  • claude/issue-626-20260203-1205