Conversation
| import type {WorkspaceSvg} from '../workspace_svg.js'; | ||
| import type {IFlyout} from './i_flyout.js'; | ||
| import type {IFocusableTree} from './i_focusable_tree.js'; | ||
| import {type IFocusableTree} from './i_focusable_tree.js'; |
There was a problem hiding this comment.
should this change be here? it's different than all the others
| @@ -26,11 +26,11 @@ export class FlyoutNavigationPolicy<T> implements INavigationPolicy<T> { | |||
| /** | |||
| * Returns null to prevent navigating into flyout items. | |||
There was a problem hiding this comment.
The jsdoc no longer matches the implementation and I can't tell which one should be correct.
Or is the behavior the same but you moved the responsibility of returning null to the policy? I would still probably clarify the jsdoc in that case.
| return this.policy.isNavigable(current); | ||
| return ( | ||
| this.policy.isNavigable(current) && | ||
| this.flyout |
There was a problem hiding this comment.
curious why this is needed - what scenarios are coming up where a flyout item isn't included in the flyout contents?
There was a problem hiding this comment.
The thing being checked isn't necessarily a flyout item; this prevents things that aren't top-level flyout items (e.g. icons, fields, connections) from becoming focused by indicating that they aren't navigable.
| * | ||
| * @param current The toolbox item to return the first child of. | ||
| * @returns The child item of a collapsible toolbox item, or the flyout | ||
| * workspace for non-collapsible flyout items. |
There was a problem hiding this comment.
this comment doesn't seem to match reality - it returns null, not the workspace. i'm not sure why it would return the workspace?
| /** Whether or not navigation loops around when reaching the end. */ | ||
| protected navigationLoops = false; | ||
|
|
||
| protected relativeNode: IFocusableNode | null = null; |
There was a problem hiding this comment.
can you add jsdoc for this please?
| // or have a common parent accessible only by traversing output | ||
| // connections, meaning that they are part of the same row. | ||
| return ( | ||
| (candidateParents as any).intersection(currentParents).size > 0 |
There was a problem hiding this comment.
what's the reason for the cast here and is there a way we can eliminate it?
| direction: NavigationDirection, | ||
| ): (node: IFocusableNode) => boolean { | ||
| switch (direction) { | ||
| case NavigationDirection.IN: |
There was a problem hiding this comment.
There is a LOT of logic in this function. I was expecting more of this logic to live in the navigation policies themselves rather than have so much business logic in the navigator. It's confusing to me that you have some logic here but some similar-seeming business logic about allowable possible navigation stops in the block navigation policy for example.
Possibly we should discuss this over video call because of the complexity
If this logic has to stay here I think it's worth investing in it to make this as readable as possible. Maybe start by splitting up the in/out vs next/prev into different named functions to remove one layer of logic?
| case NavigationDirection.NEXT: | ||
| case NavigationDirection.PREVIOUS: | ||
| return (candidate: IFocusableNode | null) => { | ||
| if ( |
There was a problem hiding this comment.
This needs more comments explaining, or maybe it would be more readable if you split up the conditions into separate statements.
yes it's more redundant but the super nested conditions are difficult to parse and probably need individual comments with reasoning
| return node.getSourceBlock(); | ||
| } else if (node instanceof Icon) { | ||
| return node.getSourceBlock() as BlockSvg; | ||
| } |
There was a problem hiding this comment.
worth adding a if typoeof node.getSourceBlock === function return node.getSourceBlock() to sort of make this work as if we had a IBelongsToBlock interface or something? Or worth formalizing that as an interface? potentially as a followup.
| // Keep the workspace visibility consistent with the flyout's visibility. | ||
| this.workspace_.setVisible(this.visible); | ||
| this.workspace_.setNavigator(new FlyoutNavigator(this)); | ||
| this.workspace_.keyboardAccessibilityMode = true; |
There was a problem hiding this comment.
I think we probably need to remove this constant? It's not used anywhere that I can tell? We shouldn't need both it and the keyboardNavigationController.
The basics
The details
Proposed Changes
This PR backports the core support for keyboard navigation of the workspace, toolbox and flyout from the blockly-keyboard-experimentation repo. It also refactors things to provide a more cohesive API for interacting with navigation. The general aspirational approach is:
*_navigation_policy.tsfiles specify, for each kind of focusable/navigable entity in Blockly, what its parent, first child, and previous/next siblings are, from a "just the facts"/AST perspective.Navigatorprovides methods to query the "just the facts" relationships between elements, but also provides methods that incorporate business logic to make navigation order in response to the arrow keys make sense/feel right/pass the vibe test.FlyoutNavigatorandToolboxNavigatorcustomize the business logic for navigation in a flyout and toolbox context, respectively, and operate on a set of navigation policies relevant to focusable/navigable entities that exist in those contextsIFocusableTreeprovides aNavigatorinstance which should be used to handle navigation within that treeNavigatorfor the active focus treeThis means that keyboard navigation does not have to keep track of the current state/context as in the keyboard-experimentation repo, because that maps precisely to the currently focused tree, which the
FocusManageralready keeps track of.I backported the navigation business logic from the add-screen-reader-support-experimental branch, where up/down move between "rows" and left/right navigate within the current "row".
Future Work
Breaking Changes
MarkerManager,Marker, andLineCursorhave all been removed, along with their accessors. If you were interacting with one of these classes,Navigatorshould be close to a drop-in replacement.IFocusableTreemust implementgetNavigator(), which should return aNavigatorinstance or subclass appropriate for navigating the treeFlyoutno longer implementsIFocusableNodeorIFocusableTree. The flyout's workspace continues to implement those interfaces, and should be used in place of the flyout itself.IToolboxprovides agetToolboxItems()method that returns an array of all itemsIToolboxItemprovides agetParentToolbox()method that returns a reference to its containing toolbox