Fix keyboard focus visibility on success and region selection dialogs

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

src/tests/clipperUI/panels/regionSelectingPanel_tests.tsx

@@ -0,0 +1,47 @@
+import {Constants} from "../../../scripts/constants";
+
+import {RegionSelectingPanel} from "../../../scripts/clipperUI/panels/regionSelectingPanel";
+
+import {MithrilUtils} from "../../mithrilUtils";
+import {MockProps} from "../../mockProps";
+import {TestModule} from "../../testModule";
+
+export class RegionSelectingPanelTests extends TestModule {
+	private mockRegionSelectingPanelProps = {
+		clipperState: MockProps.getMockClipperState()
+	};
+
+	private defaultComponent;
+
+	protected module() {
+		return "regionSelectingPanel";
+	}
+
+	protected beforeEach() {
+		this.defaultComponent = <RegionSelectingPanel {...this.mockRegionSelectingPanelProps}/>;
+	}
+
+	protected tests() {
+		test("The region selecting panel should render the 'Back to Home' button", () => {
+			MithrilUtils.mountToFixture(this.defaultComponent);
+
+			let button = document.getElementById(Constants.Ids.regionClipCancelButton);
+			ok(button, "The 'Back to Home' button should be present");
+		});
+
+		test("The region selecting panel should set focus on the 'Back to Home' button when rendered", (assert) => {
+			let done = assert.async();
+
+			MithrilUtils.mountToFixture(this.defaultComponent);
+
+			// Wait for the next tick to allow Mithril to complete rendering
+			setTimeout(() => {
+				let button = document.getElementById(Constants.Ids.regionClipCancelButton);
+				strictEqual(document.activeElement, button, "The 'Back to Home' button should have focus");
+				done();
+			}, 0);
+		});
+	}
+}
+
+(new RegionSelectingPanelTests()).run();

src/tests/clipperUI/panels/successPanel_tests.tsx

@@ -0,0 +1,61 @@
+import {Constants} from "../../../scripts/constants";
+
+import {Status} from "../../../scripts/clipperUI/status";
+import {SuccessPanel} from "../../../scripts/clipperUI/panels/successPanel";
+
+import {MithrilUtils} from "../../mithrilUtils";
+import {MockProps} from "../../mockProps";
+import {TestModule} from "../../testModule";
+
+export class SuccessPanelTests extends TestModule {
+	private mockSuccessPanelProps = {
+		clipperState: MockProps.getMockClipperState()
+	};
+
+	private defaultComponent;
+
+	protected module() {
+		return "successPanel";
+	}
+
+	protected beforeEach() {
+		// Setup a successful API result
+		let state = MockProps.getMockClipperState();
+		state.oneNoteApiResult = {
+			status: Status.Succeeded,
+			data: {
+				links: {
+					oneNoteWebUrl: {
+						href: "https://www.onenote.com/page"
+					}
+				}
+			}
+		};
+		this.mockSuccessPanelProps.clipperState = state;
+		this.defaultComponent = <SuccessPanel {...this.mockSuccessPanelProps}/>;
+	}
+
+	protected tests() {
+		test("The success panel should render the 'View in OneNote' button", () => {
+			MithrilUtils.mountToFixture(this.defaultComponent);
+
+			let button = document.getElementById(Constants.Ids.launchOneNoteButton);
+			ok(button, "The 'View in OneNote' button should be present");
+		});
+
+		test("The success panel should set focus on the 'View in OneNote' button when rendered", (assert) => {
+			let done = assert.async();
+
+			MithrilUtils.mountToFixture(this.defaultComponent);
+
+			// Wait for the next tick to allow Mithril to complete rendering
+			setTimeout(() => {
+				let button = document.getElementById(Constants.Ids.launchOneNoteButton);
+				strictEqual(document.activeElement, button, "The 'View in OneNote' button should have focus");
+				done();
+			}, 0);
+		});
+	}
+}
+
+(new SuccessPanelTests()).run();