Skip to content

fix: include additional toggles in find input arrow key navigation#306559

Merged
meganrogge merged 1 commit intomicrosoft:mainfrom
yogeshwaran-c:fix/notebook-find-arrow-key-nav-additional-toggles
Apr 2, 2026
Merged

fix: include additional toggles in find input arrow key navigation#306559
meganrogge merged 1 commit intomicrosoft:mainfrom
yogeshwaran-c:fix/notebook-find-arrow-key-nav-additional-toggles

Conversation

@yogeshwaran-c
Copy link
Copy Markdown
Contributor

@yogeshwaran-c yogeshwaran-c commented Mar 31, 2026

What kind of change does this PR introduce?

Bug fix (accessibility)

What is the current behavior?

When using arrow keys to navigate between toggle buttons in the find input (case sensitive, whole words, regex), only the three standard toggles are reachable. Additional toggles — such as the notebook find filter button (funnel icon) — are excluded from keyboard navigation. This means users who rely on keyboard navigation cannot reach these controls using arrow keys.

Fixes #207765

What is the new behavior?

Arrow key navigation now includes all toggles in the find input:

  1. FindInput base class: The static indexes array (hardcoded to [caseSensitive, wholeWords, regex]) is replaced with a dynamic `getToggleDomNodes()` method that returns DOM nodes for all standard toggles plus any `additionalToggles`.

  2. NotebookFindInput subclass: Overrides `getToggleDomNodes()` to also include the filter button container, so the notebook find widget's funnel icon is reachable via arrow keys.

The `getToggleDomNodes()` method is `protected`, allowing any subclass of `FindInput` to extend the set of keyboard-navigable toggles.

Additional context

The issue was identified by @andreamah, who pointed to the exact location in `findInput.ts` where the arrow key indexes were hardcoded. The fix is minimal and scoped:

  • `src/vs/base/browser/ui/findinput/findInput.ts` — extract toggle DOM node list into overridable method
  • `src/vs/workbench/contrib/notebook/browser/contrib/find/notebookFindReplaceWidget.ts` — override to include filter button

Copy link
Copy Markdown
Collaborator

@meganrogge meganrogge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@meganrogge meganrogge merged commit e1e2920 into microsoft:main Apr 2, 2026
18 checks passed
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.

Cannot use arrow keys to go to toggle icon in notebook find widget

4 participants