A11y Bug 6210624: Keyboard focus does not land over the selected item after expanding the "location dropdown" using keyboard.

src/scripts/clipperUI/components/sectionPicker.tsx

@@ -54,6 +54,16 @@ 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);
+			// 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,35 @@ 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 component = <SectionPicker
+				onPopupToggle={() => {}}
+				clipperState={clipperState} />;
+			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");
+				}
+				done();
+			});
+		});
 	}
 }