From 6f461e3cc875383537d1eca6f4f93e7625d9b5c5 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 2 Feb 2026 16:49:14 +0000
Subject: [PATCH] Fix keyboard focus in location dropdown for accessibility

When the location dropdown is expanded via keyboard (Tab + Enter),
focus now automatically moves to the currently selected section item
within the dropdown, improving keyboard navigation and meeting
accessibility standards (Focus Order - MS Liquid guidelines).

Changes:
- Added focusOnSelectedSection() method to set focus on the selected
  section when the dropdown opens
- Method tries to find the selected element by:
  1. Section ID (curSectionId)
  2. aria-selected="true" attribute
  3. First .Section element as fallback
- Integrated into onPopupToggle callback with setTimeout to ensure
  the popup has rendered before setting focus

Fixes #622

Co-authored-by: Aanchal Bhansali <aanchalbhansali@users.noreply.github.com>
---
 .../clipperUI/components/sectionPicker.tsx    | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/scripts/clipperUI/components/sectionPicker.tsx b/src/scripts/clipperUI/components/sectionPicker.tsx
index 43339d23..de0d1dd0 100644
--- a/src/scripts/clipperUI/components/sectionPicker.tsx
+++ b/src/scripts/clipperUI/components/sectionPicker.tsx
@@ -54,10 +54,41 @@ 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 item in the dropdown for keyboard accessibility
+			// Use setTimeout to ensure the popup has rendered before trying to focus
+			setTimeout(() => {
+				this.focusOnSelectedSection();
+			}, 0);
 		}
 		this.props.onPopupToggle(shouldNowBeOpen);
 	}
 
+	focusOnSelectedSection() {
+		// Try to focus on the currently selected section item
+		let selectedElement: HTMLElement = null;
+
+		// First, try to find by section ID if we have a current section
+		if (this.state.curSection && this.state.curSection.section) {
+			selectedElement = document.getElementById(this.state.curSection.section.id) as HTMLElement;
+		}
+
+		// If not found by ID, try to find by aria-selected attribute
+		if (!selectedElement) {
+			selectedElement = document.querySelector('[aria-selected="true"]') as HTMLElement;
+		}
+
+		// If still not found, focus on the first section in the list as a fallback
+		if (!selectedElement) {
+			selectedElement = document.querySelector('.Section') as HTMLElement;
+		}
+
+		// Set focus if we found an element
+		if (selectedElement && typeof selectedElement.focus === 'function') {
+			selectedElement.focus();
+		}
+	}
+
 	// Returns true if successful; false otherwise
 	setDataSource(): boolean {
 		if (!ClipperStateUtilities.isUserLoggedIn(this.props.clipperState)) {