Merge pull request #635 from OneNoteDev/claude/issue-628-20260225-0907

A11y Bug 8780715 : add keyboard focus to success panel and region selecting panel

Author: KethanaReddy7

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")}

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")}