fix: Add focus to the dropdown list

Author: KethanaReddy7

src/scripts/clipperUI/components/sectionPicker.tsx

@@ -55,14 +55,17 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 			// so logging only when they open it is potentially the next best thing
 			Clipper.logger.logClickEvent(Log.Click.Label.sectionPickerLocationContainer);
 
-			// A11y fix: Focus on the selected item when the popup opens via keyboard
-			// Use setTimeout to ensure the popup has fully rendered before trying to focus.
-			// requestAnimationFrame alone may fire before the external OneNotePickerComponent
-			// has finished rendering the popup and its interactive elements.
-			setTimeout(() => {
-				this.focusOnSelectedSectionInPopup();
-			}, 100);
-		}
+			// Move focus to the first item in the dropdown when it opens
+			requestAnimationFrame(() => {
+				let notebookList = document.getElementById("notebookList");
+				if (notebookList) {
+					let firstTreeItem = notebookList.querySelector("li[role='treeitem']") as HTMLElement;
+					if (firstTreeItem) {
+						firstTreeItem.focus();
+					}
+				}
+			});
+		 } 
 		this.props.onPopupToggle(shouldNowBeOpen);
 	}
 

src/tests/clipperUI/components/sectionPicker_tests.tsx

@@ -882,6 +882,72 @@ export class SectionPickerSinonTests extends TestModule {
 				done();
 			});
 		});
+
+		test("onPopupToggle should move focus to first tree item when dropdown opens", (assert: QUnitAssert) => {
+			let done = assert.async();
+
+			let clipperState = MockProps.getMockClipperState();
+			let mockNotebooks = MockProps.getMockNotebooks();
+			initializeClipperStorage(JSON.stringify(mockNotebooks), undefined, TestConstants.defaultUserInfoAsJsonString);
+
+			let popupToggled = false;
+			let component = <SectionPicker
+				onPopupToggle={(shouldNowBeOpen: boolean) => { popupToggled = shouldNowBeOpen; }}
+				clipperState={clipperState} />;
+			let controllerInstance = MithrilUtils.mountToFixture(component);
+
+			// Open the dropdown
+			MithrilUtils.simulateAction(() => {
+				document.getElementById(TestConstants.Ids.sectionLocationContainer).click();
+			});
+
+			// Wait for requestAnimationFrame to complete
+			requestAnimationFrame(() => {
+				let notebookList = document.getElementById("notebookList");
+				ok(notebookList, "Notebook list should be present when dropdown is open");
+				if (notebookList) {
+					let firstTreeItem = notebookList.querySelector("li[role='treeitem']") as HTMLElement;
+					ok(firstTreeItem, "First tree item should exist in the notebook list");
+				}
+				ok(popupToggled, "onPopupToggle should have been called with true");
+				done();
+			});
+		});
+
+		test("onPopupToggle should call onPopupToggle prop with false when dropdown closes", (assert: QUnitAssert) => {
+			let done = assert.async();
+
+			let clipperState = MockProps.getMockClipperState();
+			let mockNotebooks = MockProps.getMockNotebooks();
+			let mockSection = {
+				section: mockNotebooks[0].sections[0],
+				path: "Clipper Test > Full Page",
+				parentId: mockNotebooks[0].id
+			};
+			initializeClipperStorage(JSON.stringify(mockNotebooks), JSON.stringify(mockSection), TestConstants.defaultUserInfoAsJsonString);
+
+			let lastPopupState: boolean;
+			let component = <SectionPicker
+				onPopupToggle={(shouldNowBeOpen: boolean) => { lastPopupState = shouldNowBeOpen; }}
+				clipperState={clipperState} />;
+			let controllerInstance = MithrilUtils.mountToFixture(component);
+
+			// Open the dropdown first
+			MithrilUtils.simulateAction(() => {
+				document.getElementById(TestConstants.Ids.sectionLocationContainer).click();
+			});
+
+			// Close the dropdown by clicking again
+			MithrilUtils.simulateAction(() => {
+				document.getElementById(TestConstants.Ids.sectionLocationContainer).click();
+			});
+
+			// Wait for requestAnimationFrame to complete
+			requestAnimationFrame(() => {
+				strictEqual(lastPopupState, false, "onPopupToggle should have been called with false when dropdown closes");
+				done();
+			});
+		});
 	}
 }