Commit Graph

1771 Commits

Author SHA1 Message Date
Ben Henning
cac8f0116c feat: Make toolbox and flyout focusable (roll forward) (#8939)
_Note: This is a roll forward of #8920 that was reverted in #8933. See Additional Information below._

## The basics

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

## The details
### Resolves

Fixes #8918
Fixes #8919
Fixes part of #8943
Fixes part of #8771

### Proposed Changes

This updates several classes in order to make toolboxes and flyouts focusable:
- `IFlyout` is now an `IFocusableTree` with corresponding implementations in `FlyoutBase`.
- `IToolbox` is now an `IFocusableTree` with corresponding implementations in `Toolbox`.
- `IToolboxItem` is now an `IFocusableNode` with corresponding implementations in `ToolboxItem`.
- As the primary toolbox items, `ToolboxCategory` and `ToolboxSeparator` were updated to have -1 tab indexes and defined IDs to help `ToolboxItem` fulfill its contracted for `IFocusableNode.getFocusableElement`.
- `FlyoutButton` is now an `IFocusableNode` (with corresponding ID generation, tab index setting, and ID matching for retrieval in `WorkspaceSvg`).

Each of these two new focusable trees have specific noteworthy behaviors behaviors:
- `Toolbox` will automatically indicate that its first item should be focused (if one is present), even overriding the ability to focus the toolbox's root (however there are some cases where that can still happen).
- `Toolbox` will automatically synchronize its selection state with its item nodes being focused.
- `FlyoutBase`, now being a focusable tree, has had a tab index of 0 added. Normally a tab index of -1 is all that's needed, but the keyboard navigation plugin specifically uses 0 for flyout so that the flyout is tabbable. This is a **new** tab stop being introduced.
- `FlyoutBase` holds a workspace (for rendering blocks) and, since `WorkspaceSvg` is already set up to be a focusable tree, it's represented as a subtree to `FlyoutBase`. This does introduce some wonky behaviors: the flyout's root will have passive focus while its contents have active focus. This could be manually disabled with some CSS if it ends up being a confusing user experience.
- Both `FlyoutBase` and `WorkspaceSvg` have built-in behaviors for detecting when a user tries navigating away from an open flyout to ensure that the flyout is closed when it's supposed to be. That is, the flyout is auto-hideable and a non-flyout, non-toolbox node has then been focused. This matches parity with the `T`/`Esc` flows supported in the keyboard navigation plugin playground.

One other thing to note: `Toolbox` had a few tests to update that were trying to reinit a toolbox without first disposing of it (which was caught by one of `FocusManager`'s state guardrails).

This only addresses part of #8943: it adds support for `FlyoutButton` which covers both buttons and labels. However, a longer-term solution may be to change `FlyoutItem` itself to force using an `IFocusableNode` as its element.

### Reason for Changes

This is part of an ongoing effort to ensure key components of Blockly are focusable so that they can be keyboard-navigable (with other needed changes yet both in Core Blockly and the keyboard navigation plugin).

### Test Coverage

No new 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.

### Documentation

No documentation changes should be needed here.

### Additional Information

This includes changes that have been pulled from #8875.

This was originally merged in #8916 but was reverted in #8933 due to https://github.com/google/blockly-keyboard-experimentation/issues/481. Note that this does contain a number of differences from the original PR (namely, changes in `WorkspaceSvg` and `FlyoutButton` in order to make `FlyoutButton`s focusable). Otherwise, this has the same caveats as those noted in #8938 with regards to the experimental keyboard navigation plugin.
2025-04-30 15:49:29 -07:00
Christopher Allen
b9b40f48ab fix: Fix bug in BlockSvg.prototype.setParent (#8934)
* test(BlockSvg): Add tests for setParent(null) when dragging

  Add tests for scenarios where block(s) unrelated to the block
  being disconnected has/have been marked as as being dragged.
  Due to a bug in BlockSvg.prototype.setParent, one of these
  fails in the case that the dragging block is not a top
  block.

  Also add a check to assertNonParentAndOrphan to check that the
  orphan block's SVG root's parent is the workspace's canvass
  (i.e., that orphan is a top-level block in the DOM too).

* fix(BlockSvg): Fix bug in setParent re: dragging block

  Fix an incorrect assumption in setParent: the topmost block
  whose root SVG element has the blocklyDragging class may not
  actually be a top-level block.

* refactor(BlockDragStrategy): Hide connection preview earlier

* chore(BlockDragStrategy): prefer ?. to !.

  Per nit on PR #8934.

* fix(BlockSvg): Spelling: "canvass" -> "canvas"
2025-04-29 15:15:42 +00:00
RoboErikG
c644fe36ef Fix: Revert focus prs (#8933)
* Revert "feat: Make toolbox and flyout focusable (#8920)"

This reverts commit 5bc83808bf.

* Revert "feat: Make WorkspaceSvg and BlockSvg focusable (#8916)"

This reverts commit d7680cf32e.
2025-04-25 15:03:32 -07:00
Grace
8f59649956 fix: LineCursor can loop forward, but not back (#8926)
* fix: loop cursor when moving to prev node

* chore: add loop tests for LineCursor prev and out

* chore: fix out loop test for line cursor
2025-04-25 08:26:58 -07:00
Ben Henning
5bc83808bf feat: Make toolbox and flyout focusable (#8920)
## The basics

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

## The details
### Resolves

Fixes #8918
Fixes #8919
Fixes part of #8771

### Proposed Changes

This updates several classes in order to make toolboxes and flyouts focusable:
- `IFlyout` is now an `IFocusableTree` with corresponding implementations in `FlyoutBase`.
- `IToolbox` is now an `IFocusableTree` with corresponding implementations in `Toolbox`.
- `IToolboxItem` is now an `IFocusableNode` with corresponding implementations in `ToolboxItem`.
- As the primary toolbox items, `ToolboxCategory` and `ToolboxSeparator` were updated to have -1 tab indexes and defined IDs to help `ToolboxItem` fulfill its contracted for `IFocusableNode.getFocusableElement`.

Each of these two new focusable trees have specific noteworthy behaviors behaviors:
- `Toolbox` will automatically indicate that its first item should be focused (if one is present), even overriding the ability to focus the toolbox's root (however there are some cases where that can still happen).
- `Toolbox` will automatically synchronize its selection state with its item nodes being focused.
- `FlyoutBase`, now being a focusable tree, has had a tab index of 0 added. Normally a tab index of -1 is all that's needed, but the keyboard navigation plugin specifically uses 0 for flyout so that the flyout is tabbable. This is a **new** tab stop being introduced.
- `FlyoutBase` holds a workspace (for rendering blocks) and, since `WorkspaceSvg` is already set up to be a focusable tree, it's represented as a subtree to `FlyoutBase`. This does introduce some wonky behaviors: the flyout's root will have passive focus while its contents have active focus. This could be manually disabled with some CSS if it ends up being a confusing user experience.
- Both `FlyoutBase` and `WorkspaceSvg` have built-in behaviors for detecting when a user tries navigating away from an open flyout to ensure that the flyout is closed when it's supposed to be. That is, the flyout is auto-hideable and a non-flyout, non-toolbox node has then been focused. This matches parity with the `T`/`Esc` flows supported in the keyboard navigation plugin playground.

One other thing to note: `Toolbox` had a few tests to update that were trying to reinit a toolbox without first disposing of it (which was caught by one of `FocusManager`'s state guardrails).

### Reason for Changes

This is part of an ongoing effort to ensure key components of Blockly are focusable so that they can be keyboard-navigable (with other needed changes yet both in Core Blockly and the keyboard navigation plugin).

### Test Coverage

No new 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.

### Documentation

No documentation changes should be needed here.

### Additional Information

This includes changes that have been pulled from #8875.
2025-04-24 15:08:18 -07:00
Ben Henning
e9ea69d2bd Merge branch 'rc/v12.0.0' into add-focus-manager-callbacks-and-improvements 2025-04-23 21:15:03 +00:00
Ben Henning
7c0c8536e6 fix: Fix broken FocusManager tree unregistration. 2025-04-22 00:49:52 +00:00
Aaron Dodson
c6e58c4f92 feat: Add support for displaying toast-style notifications. (#8896)
* feat: Allow resetting alert/prompt/confirm to defaults.

* chore: Add unit tests for Blockly.dialog.

* fix: Removed TEST_ONLY hack from Blockly.dialog.

* feat: Add a default toast notification implementation.

* feat: Add support for toasts to Blockly.dialog.

* chore: Add tests for default toast implementation.

* chore: Fix docstring.

* refactor: Use default arguments for dialog functions.

* refactor: Add 'close' to the list of messages.

* chore: Add new message in several other places.

* chore: clarify docstrings.

* feat: Make toast assertiveness configurable.
2025-04-21 15:32:45 -07:00
Ben Henning
0772a29824 feat!: Introduce new focus tree/node functions.
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 #8875 and are required for
later PRs that will introduce IFocusableNode and IFocusableTree
implementations.
2025-04-21 20:42:28 +00:00
Aaron Dodson
fd9263ac51 feat: Allow for HTML elements in dropdown field menus. (#8889)
* feat: Allow for HTML elements in dropdown field menus.

* refactor: Use dot access.
2025-04-15 14:34:38 -07:00
Rachel Fenichel
fac75043dd feat: add loopback in cursor navigation, and add tests (#8883)
* chore: tests for cursor getNextNode

* chore: add tests for getPreviousNode

* feat: add looping to getPreviousNode and getNextNode

* chore: inline returns

* chore: fix test that results in a stack node

* chore: fix annotations
2025-04-14 09:58:58 -07:00
Rachel Fenichel
3160e3d321 feat: add getFirstNode and getLastNode to cursor with tests (#8878)
* feat: add getFirstNode and getlastNode to line_cursor.ts

* chore: add simple tests for getFirstNode and getLastNode

* chore: broken tests for debugging

* chore: additional cursor tests

* chore: lint, format, reenable tasks
2025-04-11 10:13:10 -07:00
Maribeth Moffatt
89194b2ead fix: check potential variables for flyout variable fields (#8873)
* fix: check potential variables for flyout variable fields

* fix: format

* chore: move comment
2025-04-07 17:29:00 -07:00
Ben Henning
17171abf1c Merge pull request #8814 from BenHenning/introduce-focus-system-implementation
feat: Introduce FocusManager implementation
2025-04-03 16:20:49 -07:00
Ben Henning
c5404af82e chore: lint fixes. 2025-04-03 23:04:06 +00:00
Ben Henning
720e8dab2b chore: part 2 of addressing reviewer comments. 2025-04-03 22:55:35 +00:00
Ben Henning
902b26b1a1 chore: part 1 of addressing reviewer comments. 2025-04-03 22:25:50 +00:00
Aaron Dodson
ca362725ee refactor!: Backport LineCursor to core. (#8834)
* refactor: Backport LineCursor to core.

* fix: Fix instantiation of LineCursor.

* fix: Fix tests.

* chore: Assauge the linter.

* chore: Fix some typos.

* feat: Make padding configurable for scrollBoundsIntoView.

* chore: Merge in the latest changes from keyboard-experimentation.

* refactor: Clarify name and docs for findSiblingOrParentSibling().

* fix: Improve scrollBoundsIntoView() behavior.

* fix: Export CursorOptions.

* refactor: Further clarify second parameter of setCurNode().

* fix: Revert change that could prevent scrolling bounds into view.
2025-04-03 12:15:17 -07:00
Ben Henning
3dc4d17b30 Update tests/mocha/index.html 2025-03-27 16:54:19 -07:00
Ben Henning
9ab77cedff chore: fix formatting issues 2025-03-27 22:04:51 +00:00
Ben Henning
516e3af936 feat: finish core impl + tests
This adds new tests for the FocusableTreeTraverser and fixes a number of
issues with the original implementation (one of which required two new
API methods to be added to IFocusableTree). More tests have also been
added for FocusManager, and defocusing tracked nodes/trees has been
fully implemented in FocusManager.
2025-03-27 21:57:30 +00:00
Ben Henning
d9beacddb4 feat: add FocusManager
This is the bulk of the work for introducing the central logical unit
for managing and sychronizing focus as a first-class Blockly concept
with that of DOM focus.

There's a lot to do yet, including:
- Ensuring clicks within Blockly's scope correctly sync back to focus
  changes.
- Adding support for, and testing, cases when focus is lost from all
  registered trees.
- Testing nested tree propagation.
- Testing the traverser utility class.
- Adding implementations for IFocusableTree and IFocusableNode
  throughout Blockly.
2025-03-21 00:33:51 +00:00
Aaron Dodson
b8f71b83b7 Merge branch 'rc/v12.0.0' into develop-v12-merge 2025-03-11 09:42:25 -07:00
Aaron Dodson
34da1da061 fix: Fix flaky connection checker test. (#8754) 2025-01-31 08:10:33 -08:00
Aaron Dodson
343c2f51f3 feat: Add support for toggling readonly mode. (#8750)
* feat: Add methods for toggling and inspecting the readonly state of a workspace.

* refactor: Use the new readonly setters/getters in place of checking the injection options.

* fix: Fix bug that allowed dragging blocks from a flyout onto a readonly workspace.

* feat: Toggle a `blocklyReadOnly` class when readonly status is changed.

* chore: Placate the linter.

* chore: Placate the compiler.
2025-01-30 13:47:36 -08:00
Ben Henning
94794af02f Merge branch 'develop' into improve-workspace-svg-test-robustness 2025-01-16 22:16:01 +00:00
Aaron Dodson
7a23c8878f fix: Actually fix the browser tests. (#8736) 2025-01-16 11:02:49 -08:00
Aaron Dodson
a86ba15154 fix: Fix the browser tests. (#8735) 2025-01-16 10:37:24 -08:00
Aaron Dodson
bcdb65c623 release: Merge branch 'develop' into rc/v12.0.0 2025-01-10 10:53:09 -08:00
Aaron Dodson
80a6d85c26 refactor!: Use JSON instead of XML for defining dynamic toolbox categories. (#8658)
* refactor!: Use JSON instead of XML for defining dynamic toolbox categories.

* chore: Fix tests.

* chore: Remove unused import.

* chore: Update docstrings.

* chore: Revert removal of XML-based category functions.

* chore: Add deprecation notices.
2025-01-08 11:50:18 -08:00
Aaron Dodson
77c695a648 fix: Paste blocks copied from a mutator into the mutator. (#8719) 2025-01-06 11:19:23 -08:00
Aaron Dodson
bd7c86a909 chore: Improve code health of generator tests. (#8703) 2025-01-06 10:55:57 -08:00
Aaron Dodson
b8bb26f8fd fix: Fix serialization of the lists_split block. (#8702) 2025-01-06 10:54:33 -08:00
Ben Henning
9283c4e6e8 Improve the robustness of workspace SVG tests.
This largely reduces the dependence on direct value testing and instead
updates clean-up tests to verify logic based on relative positioning.
This guards against potential system-specific flakes that can occur when
there are subtle calculation differences on different systems.
2024-12-06 00:33:58 +00:00
Aaron Dodson
9fcd5a3037 release: Merge branch 'rc/v11.2.0' into rc/v12.0.0 2024-12-04 12:06:12 -08:00
Christopher Allen
4680b4b5c1 test: Disable failing tests (#8677)
See issue #8676.
2024-12-04 09:30:22 -08:00
Aaron Dodson
24ab50d49d fix: Fix bug that caused text to be selected when long-pressing in the workspace on a touch device. (#8670)
* fix: Fix bug that caused text to be selected when long-pressing in the workspace on a touch device.

* chore: Fix test failure.
2024-12-03 13:41:32 -08:00
Aaron Dodson
5870c66cf0 chore: Migrate ESLint configuration file to new flat format. (#8675)
* chore: rename .eslintrc.js to eslint.config.js

* chore: Rename eslint.config.js to eslint.config.mjs.

* refactor: Migrate ESLint config to new flat format.

* chore: Remove old per-directory and global ignore ESLint config files.

* fix: Allowlist JSDoc tag aliases.

* fix: Don't require @license in tests/*.

* fix: Add NodeJS globals to several files that run under Node.

* chore: Remove now-unneeded ESLint directives in core.

* chore: Remove invalid/unneeded ESLint directives.

* fix: Fix invalid use of `await` outside of an `async` function.

* fix: Improve screenshot error message.

* fix: Update ESLint config file to not warn on existing violations.

* chore: Remove suppressions of rules that weren't triggering.

* chore: Fix package-lock.json.
2024-12-03 12:40:48 -08:00
Aaron Dodson
61bbd7dbf6 chore: Remove underscores from private fields. (#8682)
* chore: Remove underscores from private fields.

* refactor: Use public APIs in tests where possible.
2024-12-02 11:33:05 -08:00
Aaron Dodson
ae2a140141 refactor!: Use one map for toolbox contents. (#8654) 2024-11-12 09:52:23 -08:00
Aaron Dodson
d804c1a3c4 refactor!: Improve ability to use CSS to style Blockly. (#8647)
* refactor!: Rename blocklyTreeIconClosed to blocklyToolboxCategoryIconClosed.

* refactor!: Rename blocklyTreeLabel to blocklyToolboxCategoryLabel

* refactor!: Rename blocklyToolboxDiv to blocklyToolbox.

* refactor: remove unreferenced CSS classes.

* refactor!: Remove the blocklyArrowTop and blocklyArrowBottom classes.

* feat: Add a blocklyTextInputField class to text fields.
2024-11-07 12:16:17 -08:00
Aaron Dodson
2523093cc9 refactor!: Remove the InsertionMarkerManager. (#8649)
* refactor!: Remove the InsertionMarkerManager.

* chore: Remove unused imports.

* chore: Remove import of insertion marker manager test.
2024-11-07 12:15:55 -08:00
Aaron Dodson
aedcfd6da5 fix: Use a readonly textarea for non-editable comments. (#8632)
* fix: Use a readonly textarea for non-editable comments.

* chore: Run formatter.

* chore: remove old function definition
2024-11-04 09:43:17 -08:00
Aaron Dodson
e777086f16 refactor!: Update flyouts to use inflaters. (#8601)
* refactor: Update flyouts to use inflaters.

* fix: Specify an axis when creating flyout separators.

* chore: Remove unused import.

* chore: Fix tests.

* chore: Update documentation.

* chore: Improve code readability.

* refactor: Use null instead of undefined.
2024-10-02 09:20:45 -07:00
Aaron Dodson
e5c1a89cdf fix: Fix bug that caused fields in the flyout to use the main workspace's scale. (#8607)
* fix: Fix bug that caused fields in the flyout to use the main workspace's scale.

* chore: remove errant param in docs.
2024-10-02 08:18:47 -07:00
John Nesky
8d44a4d93a fix: Group field validator changes with field value changes. (#8589) 2024-09-24 16:09:41 -07:00
Ben Henning
05795a06ea Rename 'tidyUp' back to 'cleanUp'. 2024-09-03 23:13:50 +00:00
Ben Henning
fbafda3e4c Merge branch 'develop' into ensure-immovable-blocks-are-considered-during-workspace-tidying 2024-09-03 23:02:37 +00:00
Christopher Allen
2409123d66 refactor: Omit unused exception arguments from catch blocks (#8559)
Fixes #1770.
2024-09-03 15:27:40 +01:00
Christopher Allen
724828f689 refactor: Use arrow functions when calling Array.prototype.filter (#8557) 2024-08-30 17:23:23 +01:00