From 7d9bb330926d8d01d4c42bb4b450b9a2a42f1d9e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 05:44:20 +0000
Subject: [PATCH 1/2] Initial plan
From d4867ba6a6e27c80380c265f3e0836d719e52bfe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 05:49:44 +0000
Subject: [PATCH 2/2] Add focus management to success and region panels for
accessibility
Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
---
package-lock.json | 2 +-
.../clipperUI/panels/regionSelectingPanel.tsx | 5 ++
src/scripts/clipperUI/panels/successPanel.tsx | 5 ++
.../panels/regionSelectingPanel_tests.tsx | 47 ++++++++++++++
.../clipperUI/panels/successPanel_tests.tsx | 61 +++++++++++++++++++
5 files changed, 119 insertions(+), 1 deletion(-)
create mode 100644 src/tests/clipperUI/panels/regionSelectingPanel_tests.tsx
create mode 100644 src/tests/clipperUI/panels/successPanel_tests.tsx
diff --git a/package-lock.json b/package-lock.json
index 13e4015b..50484e77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25001,7 +25001,7 @@
"requires": {
"debuglog": "^1.0.1",
"dezalgo": "^1.0.0",
- "graceful-fs": "4.2.2",
+ "graceful-fs": "^4.1.2",
"once": "^1.3.0"
}
},
diff --git a/src/scripts/clipperUI/panels/regionSelectingPanel.tsx b/src/scripts/clipperUI/panels/regionSelectingPanel.tsx
index 25fe30fd..2a061dcd 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> {
{Localization.getLocalizedString("WebClipper.Action.ViewInOneNote")}
diff --git a/src/tests/clipperUI/panels/regionSelectingPanel_tests.tsx b/src/tests/clipperUI/panels/regionSelectingPanel_tests.tsx
new file mode 100644
index 00000000..e2aeb00f
--- /dev/null
+++ b/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 = ;
+ }
+
+ 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();
diff --git a/src/tests/clipperUI/panels/successPanel_tests.tsx b/src/tests/clipperUI/panels/successPanel_tests.tsx
new file mode 100644
index 00000000..c3de87e3
--- /dev/null
+++ b/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 = ;
+ }
+
+ 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();