Skip to content

Conversation

Copy link

Copilot AI commented Dec 16, 2025

The Location menu (OneNotePicker) lacks arrow key navigation, preventing keyboard-only users and screen readers from accessing the notebook/section tree.

Changes

Added keyboard navigation handler to SectionPickerClass:

  • Implements ARIA tree pattern: Up/Down navigate items, Right/Left expand/collapse or navigate hierarchy, Home/End jump to boundaries
  • Queries [role="treeitem"] elements and manages focus based on visibility (skips collapsed items)
  • Stores handler reference in component state for proper cleanup

Helper methods:

  • isTreeItemVisible() - checks if item is visible (not in collapsed parent)
  • isChildOf() - determines parent-child relationships in tree structure
  • findParentTreeItem() - traverses DOM to find parent tree item

Implementation:

handlePickerKeyboardNavigation(element: HTMLElement, isFirstDraw: boolean) {
  // Clean up existing handler
  if (this.state.keyboardNavigationHandler) {
    document.removeEventListener("keydown", this.state.keyboardNavigationHandler, true);
  }
  
  const keydownHandler = (e: KeyboardEvent) => {
    const treeItems = document.querySelectorAll('[role="treeitem"]');
    // Navigate based on KeyCodes.up/down/left/right/home/end
    // Focus appropriate item, prevent default scroll behavior
  };
  
  this.setState({ keyboardNavigationHandler: keydownHandler });
  document.addEventListener("keydown", keydownHandler, true);
}

The OneNotePicker library already uses correct ARIA attributes (role="tree", role="treeitem", aria-expanded) but only handled Enter key. This adds full keyboard support at the integration layer without modifying the third-party library.

Original prompt

This section details on the original issue you should resolve

<issue_title>Test</issue_title>
<issue_description>Environment & OS Details:

Application Name: OneNote Clipper
URL: -OneNote Web Clipper Installation
Chromium Edge Dev: - Version 110.0.1556.0 (Official build) dev (64-bit)
Application version: Version 3.8.9
Repro Steps:
Open OneNote Web Clipper Installation Application.
Tab till 'OneNote Clipper' extension.
Check Whether The list and the nested list items, after expanding the “Location” menu button is not being access with the help of “Arrow” key. or not.
Actual:
In region, Narrator is not announcing anything while trying to capture the screen to clip with the help of “Arrow” key.
Expected:
In region, Narrator is not announcing anything while trying to capture the screen to clip with the help of “Arrow” key.
User Experience:
Users with No vision will not be able to clip the captured screen if proper announcement is not available.
MAS Reference:
MAS 4.3.1 – No Disruption of Accessibility Features</issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@dewanymca dewanymca marked this pull request as ready for review December 16, 2025 11:07
Copilot AI changed the title [WIP] Fix issue with OneNote Clipper installation Add keyboard navigation to Location menu tree Dec 16, 2025
Copilot AI requested a review from dewanymca December 16, 2025 11:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Test

2 participants