_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#8918Fixes#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.
* Revert "feat: Make toolbox and flyout focusable (#8920)"
This reverts commit 5bc83808bf.
* Revert "feat: Make WorkspaceSvg and BlockSvg focusable (#8916)"
This reverts commit d7680cf32e.
## The basics
- [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change)
## The details
### Resolves
Fixes#8918Fixes#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.
* 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.
* Remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes
* Removed .gitpod file
* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes https://github.com/google/blockly/issues/8328
* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes #8328
* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes #8328
* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes #8328
* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes #8328
* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes
* fix!: #8345 rename css class
This commit renames the blocklyTreeRow CSS class to blocklyToolboxCategory
* Update category.ts
* fix: css class conflicts
Rename original blocklyToolboxCategory to blocklyToolboxCategoryContainer
* chore(deps): Bump chai from 4.3.10 to 5.1.1
Bumps [chai](https://github.com/chaijs/chai) from 4.3.10 to 5.1.1.
- [Release notes](https://github.com/chaijs/chai/releases)
- [Changelog](https://github.com/chaijs/chai/blob/main/History.md)
- [Commits](https://github.com/chaijs/chai/compare/v4.3.10...v5.1.1)
---
updated-dependencies:
- dependency-name: chai
dependency-type: direct:development
update-type: version-update:semver-major
...
Signed-off-by: dependabot[bot] <support@github.com>
* fix(tests): Migrate all usage of chai to ESM (#8216)
* fix(tests): Migrate node tests from CJS to ESM
This allows us to import (rather than require) chai, fixing failures
caused by that package dropping suppport for CJS in chai v5.0.0.
* fix(tests): Have mocha tests directly import chai
Previously they relied on obtaining it from the global scope, but it's
better if imports are explicit.
* fix(tests): Remove broken load of chai as script
Chai v5.0.0 no longer supports being loaded as a script, so this did
nothing but emit an syntax error message on the console.
* fix(tests): Migrate browser tests from CJS to ESM
This allows us to import (rather than require) chai, fixing failures
caused by chai no longer supporting CJS.
* chore(tests): format
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Christopher Allen <cpcallen+git@google.com>
* fix(build): Have buildShims clean up up after itself
We need to create a build/package.json file to allow node.js to
load build/src/core/blockly.js and the other chunk entry points
as ES modules (it forcibly assumes .js means CJS even if one is
trying to import, unless package.json says {"type": "module"}),
but this interferes with scripts/migration/js2ts doing a
require('build/deps.js'), which is _not_ an ES module.
Specific error message was:
/Users/cpcallen/src/blockly/scripts/migration/js2ts:56
require(path.resolve(__dirname, '../../build/deps.js'));
^
Error [ERR_REQUIRE_ESM]: require() of ES Module
/Users/cpcallen/src/blockly/build/deps.js from /Users/cpcallen/src/blockly/scripts/migration/js2ts
not supported.
deps.js is treated as an ES module file as it is a .js file whose
nearest parent package.json contains "type": "module" which
declares all .js files in that package scope as ES modules.
Instead rename deps.js to end in .cjs, change the requiring code
to use dynamic import() which is available in all CommonJS
modules, or change "type": "module" to "type": "commonjs" in
/Users/cpcallen/src/blockly/build/package.json to treat all .js
files as CommonJS (using .mjs for all ES modules instead).
at Object.<anonymous> (/Users/cpcallen/src/blockly/scripts/migration/js2ts:56:1) {
code: 'ERR_REQUIRE_ESM'
}
* chore(tests): Reorder to put interesting script nearer top of file
* chore(tests): Add missing imports of closure/goog/goog.js
These modules were depending on being loaded via the
debug module loader, which cannot be used without first loading
base.js as a script, and thereby defining goog.declareModuleId
as a side effect—but if they are to be loaded via direct import
statements then they need to actually import their own
dependencies.
This is a temporary measure as soon the goog.declareMouleId
calls can themselves be deleted.
* refactor(tests): Use import instead of bootstrap to load Blockly
* chores(build): Stop generating deps.mocha.js
This file was only needed by tests/mocha/index.html's use of
the debug module loader (via bootstrap.js), which has now been
removed.
* chore(tests): Remove unneeded goog.declareModuleId calls
These were only needed because these modules were previously
being loaded by goog.require and/or goog.bootstrap.
* chores(tests): Remove dead code
We are fully committed to proper modules now.
* Reduce usage of obsolete .keyCode property.
* Rename private properties/methods which violate eslint rules.
* Use arrays of bound events rather than individual properties.
* Improve typing info.
* Also fix O(n^2) recursive performance issue in theme's getComponentStyle function.
* And replace String(...) with '${...}' (smaller, faster).
* .toString() is considered harmful.
* refactor: Remove checks for PointerEvent support.
* refactor: Deprecate and remove calls to splitEventByTouches.
* refactor: Deprecate and remove calls to setClientFromTouch().
* refactor: Use PointerEvent in place of Event/MouseEvent/TouchEvent/PseudoEvent.
* refactor: Update references to mouse/touch events in code and documentation to reference pointer events.
* refactor: Merge Gesture and TouchGesture
* chore: clang-format changed files
* refactor: Bind and expect PointerEvents instead of MouseEvents.
* refactor: Rename TouchGesture to Gesture.
* fix: Fix test failures.
* chore: clang-format changed files.
* fix: Fix errant _ from merging
* refactor: Clean up dead code in browser_events.ts.
* chore: Update version in deprecation notices to reflect release schedule
* fix: Fixed a bug that caused the browser context menu to not be suppressed in Chrome.
* fix: Re-export Gesture as TouchGesture for backwards compatibility.
* refactor: Deprecate and remove uses of opt_noPreventDefault.
* chore: Fix error message in gesture.ts.
* chore: Removed obsolete todo.
* chore: change goog.module to goog.declareModuleId
* chore: change test helper exports to esmod exports
* chore: change test helpers to use esmodule imports
* chore: convert imports of test helpers to esmodule imports
* chore: convert other imports in tests to esm imports
* fix: make imports use built files
* chore: add blockly imports to a bunch of tests
* fix: reference Blockly.Blocks instead of Blocks'
* fix: properly import generators
* chore: fix lint
* chore: cleanup from rebase
* chore: cleanup from rebase
* chore: fix blocks tests
* fix: move core test helpers into new directory
* fix: add test helpers to core and convert to goog modules
* fix: change tests to use local helpers
* fix: change local tests to use chai asserts
* fix: skip field tests in serializer b/c test blocks are unavailable
* fix: rename some helper files
* fix: rename some helper modules
* fix: split block helpers into code gen and serialization
* fix: split block defs into new helper file
* fix: split warning helpers into new file
* fix: split user input helpers into new file
* fix: split event helpers into a new file
* fix: split variable helper into new file
* fix: move remaining test helpers to new setup-teardown file
* fix: rename setup and teardown module
* fix: cleanup from rebase
* fix: undo accidental rename
* fix: lint?
* fix: bad toolbox definitions namespace
* fix: fixup warning helpers
* fix: remove inclusion of dev-tools in mocha tests
* move to modules, but break mocha
* fix: run mocha as a module
* fix: lint
* Add deprecation warnings and reorganize blockly.js
* Update usages of deprecated properties
* chore: make dates consistent, remove extra function
* chore: run clang-format and fix lint
* chore: add more tags
* chore: fix updated location of Align types
* chore: fix deprecated usages in tests
* chore: rebuild deps
* chore: fix moved Align types in demos and tests
* chore: update which properties are actually deprecated
* chore: don't deprecate Blockly.selected.
* Use goog.module in mocha tests
* Fix compiler warnings
* Make test helpers a module
* Name test modules Blockly.test.*
This is to be more consistent with how non-test modules are named.
Also remove top-level goog.require of TestHelpers (now
Blockly.test.helpers) since requiring a side-effect-less module does
nothing.
* Convert block_test.js and comment_test.js to goog.module syntax
* Address PR comments
* Goog modulify tests
* Goog modulify toolbox helpers
* Fixes imports and moves common tests from workspace_test.js to a helper file.
* Update test deps after rebase
Co-authored-by: Christopher Allen <cpcallen+git@google.com>
* Add hideChaff() to core/workspace_svg.js
* Mark Blockly.hideChaff as deprecated
* Update uses of Blockly.hideChaff() to WorkspaceSvg.hideChaff() in core
* Update uses of Blockly.hideChaff() to WorkspaceSvg.hideChaff() in demos
* Style and formatting fixes
* Switch from accessor to stub wrapper for Blockly.hideChaff
Co-authored-by: Christopher Allen <cpcallen+github@gmail.com>
Co-authored-by: Christopher Allen <cpcallen+github@gmail.com>
* Refactor block type cleanup into shared cleanup.
* Use shared cleanup for block type cleanup.
* Remove overwriting of core Blockly block in test.
* Rename cleanup arrays for clarity
* Add blocks to cleanup array when defined in shared helpers
* Refactor logic for adding to shared cleanup.
* Add helper for defining block and adding block type to cleanup.
* Fix jsdocs
* Simplifying helpers for adding to cleanup.
* Add missing semicolons
* Update jsdoc for sharedTestSetup
* Use stub to wrap cleanup with defineBlocksWithJsonArray
* Remove unused helper from lint ignore
