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 { + 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)) {