From 968cc5187ee12a1f06c11d87f9354600be54ddf0 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Tue, 3 Feb 2026 12:07:45 +0000
Subject: [PATCH] fix: Set keyboard focus on dialogs for accessibility (MAS
 2.4.7)

When the Clip successful dialog appears, keyboard focus is now set
to the "View in OneNote" button. Similarly, when the Region selection
instructions dialog appears, focus is set to the "Back to Home" button.

This ensures keyboard users have visible focus when these dialogs
are displayed, addressing MAS 2.4.7 Focus Visible requirements.

Closes #626

Co-authored-by: Aanchal Bhansali <aanchalbhansali@users.noreply.github.com>
---
 src/scripts/clipperUI/panels/regionSelectingPanel.tsx | 5 +++++
 src/scripts/clipperUI/panels/successPanel.tsx         | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/scripts/clipperUI/panels/regionSelectingPanel.tsx b/src/scripts/clipperUI/panels/regionSelectingPanel.tsx
index 25fe30fd..b5c5dee9 100644
--- a/src/scripts/clipperUI/panels/regionSelectingPanel.tsx
+++ b/src/scripts/clipperUI/panels/regionSelectingPanel.tsx
@@ -4,6 +4,10 @@ import {ClipperStateProp} from "../clipperState";
 import {ComponentBase} from "../componentBase";
 
 class RegionSelectingPanelClass extends ComponentBase<{}, ClipperStateProp> {
+	initiallySetFocus(element: HTMLElement) {
+		element.focus();
+	}
+
 	handleCancelButton() {
 		this.props.clipperState.setState({
 			focusOnRender: Constants.Ids.regionButton
@@ -28,6 +32,7 @@ class RegionSelectingPanelClass extends ComponentBase<{}, ClipperStateProp> {
 					</div>
 					<div className="wideButtonContainer">
 						<a id={ Constants.Ids.regionClipCancelButton } role="button"
+							{...this.onElementFirstDraw(this.initiallySetFocus)}
 							{...this.enableInvoke({callback: this.handleCancelButton, tabIndex: 0})} >
 							<span className="wideButtonFont wideActionButton buttonTextInHighContrast" style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Semibold)}>
 								{Localization.getLocalizedString("WebClipper.Action.BackToHome")}
diff --git a/src/scripts/clipperUI/panels/successPanel.tsx b/src/scripts/clipperUI/panels/successPanel.tsx
index be79716f..ba08ed2a 100644
--- a/src/scripts/clipperUI/panels/successPanel.tsx
+++ b/src/scripts/clipperUI/panels/successPanel.tsx
@@ -14,6 +14,10 @@ import {Clipper} from "../frontEndGlobals";
 import {SpriteAnimation} from "../components/spriteAnimation";
 
 class SuccessPanelClass extends ComponentBase<{ }, ClipperStateProp> {
+	initiallySetFocus(element: HTMLElement) {
+		element.focus();
+	}
+
 	public onLaunchOneNoteButton() {
 		Clipper.logger.logUserFunnel(Log.Funnel.Label.ViewInWac);
 		let data = this.props.clipperState.oneNoteApiResult.data as OneNoteApi.Page;
@@ -38,6 +42,7 @@ class SuccessPanelClass extends ComponentBase<{ }, ClipperStateProp> {
 				</div>
 				<div className="wideButtonContainer">
 					<a id={Constants.Ids.launchOneNoteButton} className="wideButtonFont wideActionButton buttonTextInHighContrast" role="button"
+						{...this.onElementFirstDraw(this.initiallySetFocus)}
 						{...this.enableInvoke({callback: this.onLaunchOneNoteButton, tabIndex: 70})}
 						style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)}>
 						{Localization.getLocalizedString("WebClipper.Action.ViewInOneNote")}