From c1086373ec25943d9dc3bf38136dce7fae848d39 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 30 Jan 2026 09:33:07 +0000
Subject: [PATCH 1/4] Initial plan


From 061841aebd2c041869565e5d2ca339e4895c54db Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 30 Jan 2026 09:37:25 +0000
Subject: [PATCH 2/4] Initial exploration complete

Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From f26f964256373cec07b226fbaaa9d1b2b2df0906 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 30 Jan 2026 09:40:11 +0000
Subject: [PATCH 3/4] Add focus management for location dropdown accessibility

Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
---
 .../clipperUI/components/sectionPicker.tsx    | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/scripts/clipperUI/components/sectionPicker.tsx b/src/scripts/clipperUI/components/sectionPicker.tsx
index 43339d23..eafbb5c3 100644
--- a/src/scripts/clipperUI/components/sectionPicker.tsx
+++ b/src/scripts/clipperUI/components/sectionPicker.tsx
@@ -54,10 +54,42 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 			// If the user selects a section, onPopupToggle will fire because it closes the popup, even though it wasn't a click
 			// so logging only when they open it is potentially the next best thing
 			Clipper.logger.logClickEvent(Log.Click.Label.sectionPickerLocationContainer);
+
+			// Set focus on the selected section for keyboard accessibility
+			// Use setTimeout to ensure the popup is rendered before trying to focus
+			setTimeout(() => {
+				this.setFocusOnSelectedSection();
+			}, 0);
 		}
 		this.props.onPopupToggle(shouldNowBeOpen);
 	}
 
+	// Sets focus on the currently selected section when the dropdown opens
+	// This ensures keyboard users can immediately see and interact with the selected item
+	setFocusOnSelectedSection() {
+		// Get the current section ID from state
+		const curSectionId = this.state.curSection && this.state.curSection.section
+			? this.state.curSection.section.id
+			: undefined;
+
+		if (curSectionId) {
+			// Find the section element by its ID and set focus on it
+			const sectionElement = document.getElementById(curSectionId);
+			if (sectionElement) {
+				sectionElement.focus();
+			}
+		} else {
+			// If no section is selected, focus on the first focusable element in the popup
+			const notebookList = document.getElementById("notebookList");
+			if (notebookList) {
+				const firstFocusableElement = notebookList.querySelector("[tabindex]") as HTMLElement;
+				if (firstFocusableElement) {
+					firstFocusableElement.focus();
+				}
+			}
+		}
+	}
+
 	// Returns true if successful; false otherwise
 	setDataSource(): boolean {
 		if (!ClipperStateUtilities.isUserLoggedIn(this.props.clipperState)) {

From 89745539276fc8806372d627786962e029ab29fe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 30 Jan 2026 09:43:09 +0000
Subject: [PATCH 4/4] Improve focus management robustness based on code review
 feedback

Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
---
 src/scripts/clipperUI/components/sectionPicker.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/scripts/clipperUI/components/sectionPicker.tsx b/src/scripts/clipperUI/components/sectionPicker.tsx
index eafbb5c3..b6053c39 100644
--- a/src/scripts/clipperUI/components/sectionPicker.tsx
+++ b/src/scripts/clipperUI/components/sectionPicker.tsx
@@ -56,10 +56,12 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 			Clipper.logger.logClickEvent(Log.Click.Label.sectionPickerLocationContainer);
 
 			// Set focus on the selected section for keyboard accessibility
-			// Use setTimeout to ensure the popup is rendered before trying to focus
+			// Use a small delay to ensure the popup is fully rendered before trying to focus
+			// requestAnimationFrame would be ideal but setTimeout with a small delay is more reliable
+			// across different browsers and system performance scenarios
 			setTimeout(() => {
 				this.setFocusOnSelectedSection();
-			}, 0);
+			}, 100);
 		}
 		this.props.onPopupToggle(shouldNowBeOpen);
 	}
@@ -80,9 +82,14 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 			}
 		} else {
 			// If no section is selected, focus on the first focusable element in the popup
+			// Note: "notebookList" is an ID from the OneNotePicker library (v1.0.9)
+			// This is a known dependency on the external library's DOM structure
 			const notebookList = document.getElementById("notebookList");
 			if (notebookList) {
-				const firstFocusableElement = notebookList.querySelector("[tabindex]") as HTMLElement;
+				// Query for the first keyboard-focusable element
+				// The OneNotePicker library uses tabindex on section elements, and we exclude tabindex="-1"
+				// which is only programmatically focusable
+				const firstFocusableElement = notebookList.querySelector('[tabindex]:not([tabindex="-1"])') as HTMLElement;
 				if (firstFocusableElement) {
 					firstFocusableElement.focus();
 				}