diff --git a/package-lock.json b/package-lock.json index 13e4015b..50484e77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25001,7 +25001,7 @@ "requires": { "debuglog": "^1.0.1", "dezalgo": "^1.0.0", - "graceful-fs": "4.2.2", + "graceful-fs": "^4.1.2", "once": "^1.3.0" } }, diff --git a/src/scripts/clipperUI/components/sectionPicker.tsx b/src/scripts/clipperUI/components/sectionPicker.tsx index 43339d23..b6053c39 100644 --- a/src/scripts/clipperUI/components/sectionPicker.tsx +++ b/src/scripts/clipperUI/components/sectionPicker.tsx @@ -54,10 +54,49 @@ export class SectionPickerClass extends ComponentBase { + this.setFocusOnSelectedSection(); + }, 100); } this.props.onPopupToggle(shouldNowBeOpen); } + // Sets focus on the currently selected section when the dropdown opens + // This ensures keyboard users can immediately see and interact with the selected item + setFocusOnSelectedSection() { + // Get the current section ID from state + const curSectionId = this.state.curSection && this.state.curSection.section + ? this.state.curSection.section.id + : undefined; + + if (curSectionId) { + // Find the section element by its ID and set focus on it + const sectionElement = document.getElementById(curSectionId); + if (sectionElement) { + sectionElement.focus(); + } + } else { + // If no section is selected, focus on the first focusable element in the popup + // Note: "notebookList" is an ID from the OneNotePicker library (v1.0.9) + // This is a known dependency on the external library's DOM structure + const notebookList = document.getElementById("notebookList"); + if (notebookList) { + // Query for the first keyboard-focusable element + // The OneNotePicker library uses tabindex on section elements, and we exclude tabindex="-1" + // which is only programmatically focusable + const firstFocusableElement = notebookList.querySelector('[tabindex]:not([tabindex="-1"])') as HTMLElement; + if (firstFocusableElement) { + firstFocusableElement.focus(); + } + } + } + } + // Returns true if successful; false otherwise setDataSource(): boolean { if (!ClipperStateUtilities.isUserLoggedIn(this.props.clipperState)) {