Add Up/Down arrow key navigation in location dropdown popup

Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/029fac6a-7d39-4214-b537-4cab9afd25e1

Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>

Author: Copilot

src/scripts/clipperUI/components/sectionPicker.tsx

@@ -58,23 +58,52 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 		this.props.onPopupToggle(shouldNowBeOpen);
 		if (shouldNowBeOpen) {
 			// After the popup renders, move keyboard focus to the currently selected section item
-			// so that keyboard users can identify which item is selected and navigate from there
+			// so that keyboard users can identify which item is selected and navigate from there.
+			// Also attach an arrow key handler so keyboard users can navigate the list with Up/Down.
 			setTimeout(() => {
+				let sectionPickerPopup = document.getElementById("sectionPickerContainer");
+
 				let curSectionId = this.state.curSection && this.state.curSection.section ? this.state.curSection.section.id : undefined;
 				let elementToFocus: HTMLElement;
 				if (curSectionId) {
 					elementToFocus = document.getElementById(curSectionId) as HTMLElement;
 				}
-				if (!elementToFocus) {
+				if (!elementToFocus && sectionPickerPopup) {
 					// Fall back to the first keyboard-navigable item in the section picker popup
-					let sectionPickerPopup = document.getElementById("sectionPickerContainer");
-					if (sectionPickerPopup) {
-						elementToFocus = sectionPickerPopup.querySelector("[tabindex]:not([tabindex=\"-1\"])") as HTMLElement;
-					}
+					elementToFocus = sectionPickerPopup.querySelector("[tabindex]:not([tabindex=\"-1\"])") as HTMLElement;
 				}
 				if (elementToFocus) {
 					elementToFocus.focus();
 				}
+
+				// Attach Up/Down arrow key navigation for the popup list.
+				// The OneNotePicker library only handles Enter/Tab, so we add arrow key support here.
+				// The listener is attached to the popup element which is removed from the DOM when the
+				// popup closes, so there is no need to explicitly clean it up.
+				// Guard against attaching multiple listeners if onPopupToggle(true) is called more than once.
+				if (sectionPickerPopup && !sectionPickerPopup.getAttribute("data-arrow-key-handler-attached")) {
+					sectionPickerPopup.setAttribute("data-arrow-key-handler-attached", "true");
+					sectionPickerPopup.addEventListener("keydown", (e: KeyboardEvent) => {
+						if (e.which !== Constants.KeyCodes.up && e.which !== Constants.KeyCodes.down) {
+							return;
+						}
+						e.preventDefault();
+						let focusableItems = Array.from(
+							sectionPickerPopup.querySelectorAll("[tabindex]:not([tabindex=\"-1\"])")
+						) as HTMLElement[];
+						if (focusableItems.length === 0) {
+							return;
+						}
+						let currentIndex = focusableItems.indexOf(document.activeElement as HTMLElement);
+						if (e.which === Constants.KeyCodes.up) {
+							let prevIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
+							focusableItems[prevIndex].focus();
+						} else {
+							let nextIndex = currentIndex >= focusableItems.length - 1 ? focusableItems.length - 1 : currentIndex + 1;
+							focusableItems[nextIndex].focus();
+						}
+					});
+				}
 			}, 0);
 		}
 	}

src/tests/clipperUI/components/sectionPicker_tests.tsx

@@ -370,6 +370,86 @@ export class SectionPickerTests extends TestModule {
 			clock.restore();
 			done();
 		});
+
+		test("onPopupToggle should enable Down arrow key to move focus to the next item in the popup", (assert: QUnitAssert) => {
+			let done = assert.async();
+			let clock = sinon.useFakeTimers();
+
+			let clipperState = MockProps.getMockClipperState();
+			initializeClipperStorage(undefined, undefined);
+
+			let component = <SectionPicker onPopupToggle={() => {}} clipperState={clipperState} />;
+			let controllerInstance = MithrilUtils.mountToFixture(component);
+
+			// Create a fake popup with two items
+			let sectionPickerPopup = document.createElement("div");
+			sectionPickerPopup.id = "sectionPickerContainer";
+			let firstItem = document.createElement("li");
+			firstItem.tabIndex = 70;
+			let secondItemFocusCalled = false;
+			let secondItem = document.createElement("li");
+			secondItem.tabIndex = 70;
+			secondItem.focus = () => { secondItemFocusCalled = true; };
+			sectionPickerPopup.appendChild(firstItem);
+			sectionPickerPopup.appendChild(secondItem);
+			document.body.appendChild(sectionPickerPopup);
+
+			controllerInstance.onPopupToggle(true);
+			clock.tick(0);
+
+			// Simulate focus on first item and press Down arrow
+			firstItem.focus();
+			let downKeyEvent = document.createEvent("KeyboardEvent");
+			downKeyEvent.initEvent("keydown", true, true);
+			Object.defineProperty(downKeyEvent, "which", { value: 40 });
+			sectionPickerPopup.dispatchEvent(downKeyEvent);
+
+			ok(secondItemFocusCalled, "Down arrow key should move focus to the next item in the popup");
+
+			document.body.removeChild(sectionPickerPopup);
+			clock.restore();
+			done();
+		});
+
+		test("onPopupToggle should enable Up arrow key to move focus to the previous item in the popup", (assert: QUnitAssert) => {
+			let done = assert.async();
+			let clock = sinon.useFakeTimers();
+
+			let clipperState = MockProps.getMockClipperState();
+			initializeClipperStorage(undefined, undefined);
+
+			let component = <SectionPicker onPopupToggle={() => {}} clipperState={clipperState} />;
+			let controllerInstance = MithrilUtils.mountToFixture(component);
+
+			// Create a fake popup with two items
+			let sectionPickerPopup = document.createElement("div");
+			sectionPickerPopup.id = "sectionPickerContainer";
+			let firstItemFocusCalled = false;
+			let firstItem = document.createElement("li");
+			firstItem.tabIndex = 70;
+			firstItem.focus = () => { firstItemFocusCalled = true; };
+			let secondItem = document.createElement("li");
+			secondItem.tabIndex = 70;
+			sectionPickerPopup.appendChild(firstItem);
+			sectionPickerPopup.appendChild(secondItem);
+			document.body.appendChild(sectionPickerPopup);
+
+			controllerInstance.onPopupToggle(true);
+			clock.tick(0);
+
+			// Simulate focus on second item and press Up arrow
+			secondItem.focus();
+			let upKeyEvent = document.createEvent("KeyboardEvent");
+			upKeyEvent.initEvent("keydown", true, true);
+			Object.defineProperty(upKeyEvent, "which", { value: 38 });
+			sectionPickerPopup.dispatchEvent(upKeyEvent);
+
+			ok(firstItemFocusCalled, "Up arrow key should move focus to the previous item in the popup");
+
+			document.body.removeChild(sectionPickerPopup);
+			clock.restore();
+			done();
+		});
 	}
 }