Focus selected toolbox category row when navigating search with Arrow keys #278
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… keys ### Motivation - Improve keyboard navigation from the search field so ArrowDown/ArrowUp focuses the selected toolbox category row instead of the toolbox container. - Ensure ArrowRight can move into the flyout without requiring a mouse click by focusing the category row itself. ### Description - Stop calling `toolboxDiv.focus()` immediately and instead obtain the selected toolbox item via `toolbox?.getSelectedItem?.()` after `toolbox.selectNext?.()`/`selectPrevious?.()` and `toolbox.refreshSelection?.()`. - Resolve a focusable DOM node on the selected item using `getDiv?.()`, `htmlDiv_`, `svgGroup_`, `rowDiv_`, or `element_`, set `tabindex="0"` on it if needed, and call `.focus()`. - Manage a `data-flock-toolbox-row` attribute and ensure only the active row remains in the tab order by removing the attribute and setting `tabindex=-1` on previous targets, and fall back to focusing `toolboxDiv` when no row element is found. - Preserve the call to `Blockly.getFocusManager?.()?.focusTree?.(toolbox || null)` after focus is adjusted. ### Testing - No automated tests were run for this change.
…gating search with Arrow keys ### Motivation - Improve keyboard navigation from the search field so ArrowDown/ArrowUp focuses the actual toolbox row (preferably the toolbox item's click target) enabling ArrowRight to move into the flyout without a mouse click. - Ensure FocusManager's active tree is set before performing DOM focus changes to make focus state consistent with Blockly's focus system. ### Description - Update `main/blocklyinit.js` to resolve a focusable element for the selected toolbox item, preferring `getClickTarget()` and falling back to `getDiv()`, `rowDiv_`, `htmlDiv_`, `svgGroup_`, or `element_`. - Call `Blockly.getFocusManager?.()?.focusTree?.(toolbox || null)` immediately after selection changes and before applying DOM focus. - Preserve tab order management by marking the active row with `data-flock-toolbox-row`, removing that attribute and setting `tabindex=-1` on previous targets, ensuring the chosen element gets `tabindex=0` (or an equivalent SVG attribute) and is focused, with a fallback to focusing the toolbox container when no row element is found. ### Testing - No automated tests were run for this change.
…arch with Arrow keys ### Motivation - Allow ArrowDown/ArrowUp from the search field to focus the actual selected toolbox row (preferably the toolbox item's click target) so ArrowRight can move into flyouts without a mouse. - Ensure Blockly's focus state is consistent by setting the active focus tree before performing DOM focus changes via the `FocusManager` API. - Preserve a single tabbable toolbox row to maintain predictable tab order and keyboard navigation. ### Description - Remove the call to `this.searchField?.setSelectionRange?.(0, 0)` so blurring the search field does not reset selection and prevents focus transfer. - Resolve a focus target for the selected toolbox item by preferring `getClickTarget()` and falling back to `getDiv()`, `rowDiv_`, `htmlDiv_`, `svgGroup_`, and `element_`, then mark the chosen element with `data-flock-toolbox-row` and adjust `tabindex` appropriately. - Call `Blockly.getFocusManager?.()?.focusTree?.(toolbox || null)` immediately after updating selection, focus the resolved element (or the toolbox container as a fallback), and clear `data-flock-toolbox-row` and set `tabindex=-1` on previous targets. ### Testing - No automated tests were run for this change.
tracygardner
deleted the
codex/update-focus-logic-for-toolbox-categories
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Description
toolboxDiv.focus()immediately and instead obtain the selected toolbox item viatoolbox?.getSelectedItem?.()aftertoolbox.selectNext?.()/selectPrevious?.()andtoolbox.refreshSelection?.().getDiv?.(),htmlDiv_,svgGroup_,rowDiv_, orelement_, settabindex="0"on it if needed, and call.focus().data-flock-toolbox-rowattribute and ensure only the active row remains in the tab order by removing the attribute and settingtabindex=-1on previous targets, and fall back to focusingtoolboxDivwhen no row element is found.Blockly.getFocusManager?.()?.focusTree?.(toolbox || null)after focus is adjusted.Testing
Codex Task