Fix keyboard focus visibility on success and region selection dialogs

[Copilot]

Problem

Keyboard focus is not visible when the clip success dialog or region selection dialog appears, violating MAS 2.4.7 (Focus Visible). Keyboard users cannot see where focus is located.

Changes

Added focus management to two dialog panels using the existing ComponentBase.onElementFirstDraw pattern:

• SuccessPanel: Focus set on "View in OneNote" button when dialog renders
• RegionSelectingPanel: Focus set on "Back to Home" button when dialog renders

Both implementations follow the existing pattern from SignInPanel:

class SuccessPanelClass extends ComponentBase<{ }, ClipperStateProp> {
    initiallySetFocus(element: HTMLElement) {
        element.focus();
    }

    render() {
        return (
            <a id={Constants.Ids.launchOneNoteButton} 
               { ...this.onElementFirstDraw(this.initiallySetFocus) }
               {...this.enableInvoke({callback: this.onLaunchOneNoteButton, tabIndex: 70})}>
                {Localization.getLocalizedString("WebClipper.Action.ViewInOneNote")}
            </a>
        );
    }
}

Test Coverage

Added tests verifying focus is set correctly on both panels when rendered.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>A11y Bug: 10987393: [OneNote Clipper_Verify accessibility with Clip_Clip Button_Keyboard]: On invoking the Clip button, Keyboard focus is not visible on the Clip successful dialog box.</issue_title>
<issue_description>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:

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

Repro Steps:

1. Open the Ankylosaurus - Wikipedia
2. Now invoke the OneNote clipper button.
3. OneNote Clipper dialog box will appear.
4. 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</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes A11y Bug: 10987393: [OneNote Clipper_Verify accessibility with Clip_Clip Button_Keyboard]: On invoking the Clip button, Keyboard focus is not visible on the Clip successful dialog box. #623

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.