8000 feat!: Introduce new focus tree/node functions. by BenHenning · Pull Request #8909 · google/blockly · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat!: Introduce new focus tree/node functions. #8909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

BenHenning
Copy link
Contributor
@BenHenning BenHenning commented Apr 21, 2025

The basics

The details

Resolves

Fixes #8770
Fixes part of #8771

Proposed Changes

This introduces new callback methods for IFocusableTree and IFocusableNode for providing a basis of synchronizing domain state with focus changes. It also introduces support for implementations of IFocusableTree to better manage initial state cases, especially when a tree is focused using tab navigation.

FocusManager has also been updated to ensure functional parity between tab-navigating to a tree and using focusTree() on that tree. This means that tab navigating to a tree will actually restore focus back to that tree's previous focused node rather than the root (unless the root is navigated to from within the tree itself). This is meant to provide better consistency between tab and non-tab keyboard navigation.

The isFocusableNode/isFocusableTree methods are type coercion functions needed eventually by LineCursor (at least, checking whether something is a node is needed).

Note that this PR includes a fix for FocusManager.unregisterTree()--it wasn't actually correctly removing the specified tree but, rather, always removing the first registered tree. This was likely introduced after a few back-and-forth implementations with using a wrapper registration class instead of the tree directly, and this spot was missed. A new test was added to specifically catch this issue (and was verified to fail without the fix in place).

Reason for Changes

#8875 demonstrates future changes that will depend on the changes introduced in this PR. Much of this functionality is needed to ensure an easier time updating Workspace, Toolbox, and Flyout to be focusable trees along with their constituent nodes.

Test Coverage

These changes have been manually tested as part of the development work in #8875. Since the new functionality is largely callback related, it isn't being tested in this PR. However, given how critical FocusManager is, it's important to ensure eventual coverage.

#8910 is tracking updating the tests as these can be added after v12 is cut, and it's not expected that these new tests will find many problems with the implementation changes.

Documentation

No documentation changes should be needed here beyond the ones already introduced with JS docs.

Additional Information

Note that these changes originally came from #8875 and are required for later PRs that will introduce IFocusableNode and IFocusableTree implementations.

This introduces new callback methods for IFocusableTree and
IFocusableNode for providing a basis of synchronizing domain state with
focus changes. It also introduces support for implementations of
IFocusableTree to better manage initial state cases, especially when a
tree is focused using tab navigation.

FocusManager has also been updated to ensure functional parity between
tab-navigating to a tree and using focusTree() on that tree. This means
that tab navigating to a tree will actually restore focus back to that
tree's previous focused node rather than the root (unless the root is
navigated to from within the tree itself). This is meant to provide
better consistency between tab and non-tab keyboard navigation.

Note that these changes originally came from google#8875 and are required for
later PRs that will introduce IFocusableNode and IFocusableTree
implementations.
@BenHenning BenHenning marked this pull request as ready for review April 21, 2025 20:49
@BenHenning BenHenning requested a review from a team as a code owner April 21, 2025 20:49
@BenHenning BenHenning added the PR: feature Adds a feature label Apr 21, 2025
These were needed in previous versions of plugin changes, but aren't
anymore.
Copy link
Contributor Author
@BenHenning BenHenning left a comment

Choose a reason for hiding this comment

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

Self-reviewed changes and made a few corrections.

@BenHenning
Copy link
Contributor Author

PTAL @rachel-fenichel.

Copy link
Contributor Author
@BenHenning BenHenning left a comment

Choose a reason for hiding this comment

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

Reviewed method re-introduction.

Apologies, I thought that isFocusableTree and isFocusableNode weren't needed.

Copy link
Contributor Author
@BenHenning BenHenning left a comment

Choose a reason for hiding this comment

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

Reviewed a fix for an existing FocusManager issue that I discovered downstream + a new test for it.

Copy link
Collaborator
@rachel-fenichel rachel-fenichel left a comment

Choose a reason for hiding this comment

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

LGTM after adding comments on some private functions.

}
};
}

private ensureManagerIsUnlocked(): void {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Add function comments on private functions (here and below) for future readers.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I usually never add private methods documentation (since usually the code + line comments are sufficient), but happy to add them!

Copy link
Contributor Author
@BenHenning BenHenning left a comment

Choose a reason for hiding this comment

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

Self-reviewed latest changes meant to address the open review comment.

}
};
}

private ensureManagerIsUnlocked(): void {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I usually never add private methods documentation (since usually the code + line comments are sufficient), but happy to add them!

@BenHenning
Copy link
Contributor Author

Going ahead and merging since I suspect the private method doc changes will be uncontroversial.

@BenHenning BenHenning merged commit ac7fea1 into google:rc/v12.0.0 Apr 23, 2025
7 checks passed
@BenHenning BenHenning deleted the add-focus-manager-callbacks-and-improvements branch April 23, 2025 21:34
BenHenning added a commit to BenHenning/blockly that referenced this pull request Apr 30, 2025
This exposes FocusableTreeTraverser for the plugin's use. It also fixes
a few callback issues with FocusManager that were missed in google#8909.
BenHenning added a commit that referenced this pull request May 2, 2025
## The basics

- [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change)

## The details
### Resolves

Fixes #8940
Fixes #8954
Fixes #8955

### Proposed Changes

This updates `LineCursor` to use `FocusManager` rather than selection (principally) as the source of truth.

### Reason for Changes

Ensuring that keyboard navigation works correctly with eventual screen reader support requires ensuring that ever navigated component is focused, and this is primarily what `FocusManager` has been designed to do. Since these nodes are already focused, `FocusManager` can be used as the primary source of truth for determining where the user currently has navigated, and where to go next.

Previously, `LineCursor` relied on selection for this purpose, but selection is now automatically updated (for blocks) using focus-controlled `focus` and `blur` callbacks. Note that the cursor will still fall back to synchronizing with selection state, though this will be removed once the remaining work to eliminate `MarkerSvg` has concluded (which requires further consideration on the keyboard navigation side viz-a-viz styling and CSS decisions) and once mouse clicks are synchronized with focus management.

Note that the changes in this PR are closely tied to google/blockly-keyboard-experimentation#482 as both are necessary in order for the keyboard navigation plugin to correctly work with `FocusManager`.

Some other noteworthy changes:
- Some special handling exists for flyouts to handle navigating across stacks (per the current cursor design).
- `FocusableTreeTraverser` is needed by the keyboard navigation plugin (in google/blockly-keyboard-experimentation#482) so it's now being exported.
- `FocusManager` had one bug that's now patched and tested in this PR: it didn't handle the case of the browser completely forcing focus loss. It would continue to maintain active focus even though no tracked elements now hold focus. One such case is the element being deleted, but there are other cases where this can happen (such as with dialog prompts).
- `FocusManager` had some issues from #8909 wherein it would overeagerly call tree focus callbacks and slightly mismanage the passive node. Since tests haven't yet been added for these lifecycle callbacks, these cases weren't originally caught (per #8910).
- `FocusManager` was updated to move the tracked manager into a static function so that it can be replaced in tests. This was done to facilitate changes to setup_teardown.js to ensure that a unique `FocusManager` exists _per-test_. It's possible for DOM focus state to still bleed across tests, but `FocusManager` largely guarantees eventual consistency. This change prevents a class of focus errors from being possible when running tests.
- A number of cursor tests needed to be updated to ensure that a connections are properly rendered (as this is a requirement for focusable nodes, and cursor is now focusing nodes). One test for output connections was changed to use an input connection, instead, since output connections can no longer be navigated to (and aren't rendered, thus are not focusable). It's possible this will need to be changed in the future if we decide to reintroduce support for output connections in cursor, but it seems like a reasonable stopgap. Huge thanks to @rachel-fenichel for helping investigate and providing an alternative for the output connection test.

**Current gaps** to be fixed after this PR is merged:
- The flyout automatically closes when creating a variable with with keyboard or mouse (I think this is only for the keyboard navigation plugin). I believe this is a regression from previous behavior due to how the navigation plugin is managing state. It would know the flyout should be open and thus ensure it stays open even when things like dialog prompts try to close it with a blur event. However, the new implementation in google/blockly-keyboard-experimentation#482 complicates this since state is now inferred from `FocusManager`, and the flyout _losing_ focus will force it closed. There was a fix introduced in this PR to fix it for keyboard navigation, but fails for clicks because the flyout never receives focus when the create variable button is clicked. It also caused the advanced compilation tests to fail due to a subtle circular dependency from importing `WorkspaceSvg` directly rather than its type.
- The flyout, while it stays open, does not automatically update past the first variable being created without closing and reopening it. I'm actually not at all sure why this particular behavior has regressed.

### Test Coverage

No new non-`FocusManager` tests have been added. It's certainly possible to add unit tests for the focusable configurations being introduced in this PR, but it may not be highly beneficial. It's largely assumed that the individual implementations should work due to a highly tested FocusManager, and it may be the case that the interactions of the components working together is far more important to verify (that is, the end user flows). The latter is planned to be tackled as part of #8915.

Some new `FocusManager` tests were added, but more are still needed and this is tracked as part of #8910.

### Documentation

No new documentation should be needed for these changes.

### Additional Information

This includes changes that have been pulled from #8875.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR: feature Adds a feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
0