google
feat: support keyboard navigation of flyout buttons
The basics
- [x] I validated my changes
The details
Requires:
- https://github.com/google/blockly/pull/7852
(Tests will continue to fail as this requires a new flyout.getContents() method, defined in the above PR.)
Resolves
Makes it possible to support keyboard navigation of flyout buttons, which is listed as a limitation in the documentation: https://developers.google.com/blockly/guides/configure/web/keyboard-nav
Fixes
Proposed Changes
- modify navigation.js to find top button or block based on contents -modify navigation_controller to trigger button callbacks when pressing "mark" (enter key)
Requires button-type AST Nodes and flyout.getContents(), which are proposed here: https://github.com/google/blockly/pull/7852#
Reason for Changes
These changes will make it possible for users to interact with flyout buttons using keyboard navigation. They also ensure that the top flyout item is selected when focusing a flyout, whether that be a block (stack) or a button. Code.org specifically needs this functionality for variables as well its modal editor for functions and behaviors.
The changes described above are working locally. The following screen recording demonstrates some simple flyout navigation including using various buttons. Note that the keyboard monitoring in the middle of the workspace is a separate application and just used here for illustration purposes. https://github.com/google/blockly/assets/43474485/899bf8e3-5a76-4c5c-8e3a-3645e42de323
Test Coverage
I have updated the plugin test toolbox to include more buttons as well as nested categories in order to easily test some edge cases. No new tests have been created.
Documentation
The following sections would need to be updated:
Inserting A Block From The Toolbox Limitations
