feat: Automatically manage focus tree tab indexes (#9079)

## The basics

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

## The details
### Resolves

Fixes #8965
Fixes #8978
Fixes #8970
Fixes google/blockly-keyboard-experimentation#523
Fixes google/blockly-keyboard-experimentation#547
Fixes part of #8910

### Proposed Changes

Fives groups of changes are included in this PR:
1. Support for automatic tab index management for focusable trees.
2. Support for automatic tab index management for focusable nodes.
3. Support for automatically hiding the flyout when back navigating from the toolbox.
4. A fix for `FocusManager` losing DOM syncing that was introduced in #9082.
5. Some cleanups for flyout and some tests for previous behavior changes to `FocusManager`.

### Reason for Changes

Infrastructure changes reasoning:
- Automatically managing tab indexes for both focusable trees and roots can largely reduce the difficulty of providing focusable nodes/trees and generally interacting with `FocusManager`. This facilitates a more automated navigation experience.
- The fix for losing DOM syncing is possibly not reliable, but there are at least now tests to cover for it. This may be a case where a `try{} finally{}` could be warranted, but the code will stay as-is unless requested otherwise.

`Flyout` changes:
- `Flyout` no longer needs to be a focusable tree, but removing that would be an API breakage. Instead, it throws for most of the normal tree/node calls as it should no longer be used as such. Instead, its workspace has been made top-level tabbable (in addition to the  main workspace) which solves the extra tab stop issues and general confusing inconsistencies between the flyout, toolbox, and workspace.
- `Flyout` now correctly auto-selects the first block (#9103 notwithstanding). Technically it did before, however the extra `Flyout` tabstop before its workspace caused the inconsistency (since focusing the `Flyout` itself did not auto-select, only selecting its workspace did).

Important caveats:
- `getAttribute` is used in place of directly fetching `.tabIndex` since the latter can apparently default to `-1` (and possibly `0`) in cases when it's not actually set. This is a very surprising behavior that leads to incorrect test results.
- Sometimes tab index still needs to be introduced (such as in cases where native DOM focus is needed, e.g. via `focus()` calls or clicking). This is demonstrated both by updates to `FocusManager`'s tests as well as toolbox's category and separator. This can be slightly tricky to miss as large parts of Blockly now depend on focus to represent their state, so clicking either needs to be managed by Blockly (with corresponding `focusNode` calls) or automatic (with a tab index defined for the element that can be clicked, or which has a child that can be clicked).

Note that nearly all elements used for testing focus in the test `index.html` page have had their tab indexes removed to lean on `FocusManager`'s automatic tab management (though as mentioned above there is still some manual tab index management required for `focus()`-specific tests).

### Test Coverage

New tests were added for all of the updated behaviors to `FocusManager`, including a new need to explicitly provide (and reset) tab indexes for all `focus()`-esque tests. This also includes adding new tests for some behaviors introduced in past PRs (a la #8910).

Note that all of the new and affected conditionals in `FocusManager` have been verified as having at least 1 test that breaks when it's removed (inverted conditions weren't thoroughly tested, but it's expected that they should also be well covered now).

Additional tests to cover the actual navigation flows will be added to the keyboard experimentation plugin repository as part of google/blockly-keyboard-experimentation#557 (this PR needs to be merged first).

For manual testing, I mainly verified keyboard navigation with some cursory mouse & click testing in the simple playground. @rachel-fenichel also performed more thorough mouse & click testing (that yielded an actual issue that was fixed--see discussion below).

The core webdriver tests have been verified to have seemingly the same existing failures with and without these changes.

All of the following new keyboard navigation plugin tests have been verified as failing without the fixes introduced in this branch (and passing with them):
- `Tab navigating to flyout should auto-select first block`
- `Keyboard nav to different toolbox category should auto-select first block`
- `Keyboard nav to different toolbox category and block should select different block`
- `Tab navigate away from toolbox restores focus to initial element`
- `Tab navigate away from toolbox closes flyout`
- `Tab navigate away from flyout to toolbox and away closes flyout`
- `Tabbing to the workspace after selecting flyout block should close the flyout`
- `Tabbing to the workspace after selecting flyout block via workspace toolbox shortcut should close the flyout`
- `Tabbing back from workspace should reopen the flyout`
- `Navigation position in workspace should be retained when tabbing to flyout and back`
- `Clicking outside Blockly with focused toolbox closes the flyout`
- `Clicking outside Blockly with focused flyout closes the flyout`
- `Clicking on toolbox category focuses it and opens flyout`

### Documentation

No documentation changes are needed beyond the code doc changes included in the PR.

### Additional Information

An additional PR will be introduced for the keyboard experimentation plugin repository to add tests there (see test coverage above). This description will be updated with a link to that PR once it exists.

Author: BenHenning

core/bubbles/bubble.ts

@@ -98,8 +98,8 @@ export abstract class Bubble implements IBubble, ISelectable {
    *     when automatically positioning.
    * @param overriddenFocusableElement An optional replacement to the focusable
    *     element that's represented by this bubble (as a focusable node). This
-   *     element will have its ID and tabindex overwritten. If not provided, the
-   *     focusable element of this node will default to the bubble's SVG root.
+   *     element will have its ID overwritten. If not provided, the focusable
+   *     element of this node will default to the bubble's SVG root.
    */
   constructor(
     public readonly workspace: WorkspaceSvg,
@@ -138,7 +138,6 @@ export abstract class Bubble implements IBubble, ISelectable {
 
     this.focusableElement = overriddenFocusableElement ?? this.svgRoot;
     this.focusableElement.setAttribute('id', this.id);
-    this.focusableElement.setAttribute('tabindex', '-1');
 
     browserEvents.conditionalBind(
       this.background,

core/comments/rendered_workspace_comment.ts

@@ -65,7 +65,6 @@ export class RenderedWorkspaceComment
     this.view.setEditable(this.isEditable());
     this.view.getSvgRoot().setAttribute('data-id', this.id);
     this.view.getSvgRoot().setAttribute('id', this.id);
-    this.view.getSvgRoot().setAttribute('tabindex', '-1');
 
     this.addModelUpdateBindings();
 

core/field.ts

@@ -312,7 +312,6 @@ export abstract class Field<T = any>
     const id = this.id_;
     if (!id) throw new Error('Expected ID to be defined prior to init.');
     this.fieldGroup_ = dom.createSvgElement(Svg.G, {
-      'tabindex': '-1',
       'id': id,
     });
     if (!this.isVisible()) {

core/flyout_base.ts

@@ -22,7 +22,6 @@ import {FlyoutItem} from './flyout_item.js';
 import {FlyoutMetricsManager} from './flyout_metrics_manager.js';
 import {FlyoutNavigator} from './flyout_navigator.js';
 import {FlyoutSeparator, SeparatorAxis} from './flyout_separator.js';
-import {getFocusManager} from './focus_manager.js';
 import {IAutoHideable} from './interfaces/i_autohideable.js';
 import type {IFlyout} from './interfaces/i_flyout.js';
 import type {IFlyoutInflater} from './interfaces/i_flyout_inflater.js';
@@ -308,7 +307,6 @@ export abstract class Flyout
     // hide/show code will set up proper visibility and size later.
     this.svgGroup_ = dom.createSvgElement(tagName, {
       'class': 'blocklyFlyout',
-      'tabindex': '0',
     });
     this.svgGroup_.style.display = 'none';
     this.svgBackground_ = dom.createSvgElement(
@@ -324,8 +322,6 @@ export abstract class Flyout
       .getThemeManager()
       .subscribe(this.svgBackground_, 'flyoutOpacity', 'fill-opacity');
 
-    getFocusManager().registerTree(this);
-
     return this.svgGroup_;
   }
 
@@ -407,7 +403,6 @@ export abstract class Flyout
     if (this.svgGroup_) {
       dom.removeNode(this.svgGroup_);
     }
-    getFocusManager().unregisterTree(this);
   }
 
   /**
@@ -971,15 +966,22 @@ export abstract class Flyout
     return null;
   }
 
-  /** See IFocusableNode.getFocusableElement. */
+  /**
+   * See IFocusableNode.getFocusableElement.
+   *
+   * @deprecated v12: Use the Flyout's workspace for focus operations, instead.
+   */
   getFocusableElement(): HTMLElement | SVGElement {
-    if (!this.svgGroup_) throw new Error('Flyout DOM is not yet created.');
-    return this.svgGroup_;
+    throw new Error('Flyouts are not directly focusable.');
   }
 
-  /** See IFocusableNode.getFocusableTree. */
+  /**
+   * See IFocusableNode.getFocusableTree.
+   *
+   * @deprecated v12: Use the Flyout's workspace for focus operations, instead.
+   */
   getFocusableTree(): IFocusableTree {
-    return this;
+    throw new Error('Flyouts are not directly focusable.');
   }
 
   /** See IFocusableNode.onNodeFocus. */
@@ -990,31 +992,45 @@ export abstract class Flyout
 
   /** See IFocusableNode.canBeFocused. */
   canBeFocused(): boolean {
-    return true;
+    return false;
   }
 
-  /** See IFocusableTree.getRootFocusableNode. */
+  /**
+   * See IFocusableNode.getRootFocusableNode.
+   *
+   * @deprecated v12: Use the Flyout's workspace for focus operations, instead.
+   */
   getRootFocusableNode(): IFocusableNode {
-    return this;
+    throw new Error('Flyouts are not directly focusable.');
   }
 
-  /** See IFocusableTree.getRestoredFocusableNode. */
+  /**
+   * See IFocusableNode.getRestoredFocusableNode.
+   *
+   * @deprecated v12: Use the Flyout's workspace for focus operations, instead.
+   */
   getRestoredFocusableNode(
     _previousNode: IFocusableNode | null,
   ): IFocusableNode | null {
-    return null;
+    throw new Error('Flyouts are not directly focusable.');
   }
 
-  /** See IFocusableTree.getNestedTrees. */
+  /**
+   * See IFocusableNode.getNestedTrees.
+   *
+   * @deprecated v12: Use the Flyout's workspace for focus operations, instead.
+   */
   getNestedTrees(): Array<IFocusableTree> {
-    return [this.workspace_];
+    throw new Error('Flyouts are not directly focusable.');
   }
 
-  /** See IFocusableTree.lookUpFocusableNode. */
+  /**
+   * See IFocusableNode.lookUpFocusableNode.
+   *
+   * @deprecated v12: Use the Flyout's workspace for focus operations, instead.
+   */
   lookUpFocusableNode(_id: string): IFocusableNode | null {
-    // No focusable node needs to be returned since the flyout's subtree is a
-    // workspace that will manage its own focusable state.
-    return null;
+    throw new Error('Flyouts are not directly focusable.');
   }
 
   /** See IFocusableTree.onTreeFocus. */
@@ -1023,15 +1039,12 @@ export abstract class Flyout
     _previousTree: IFocusableTree | null,
   ): void {}
 
-  /** See IFocusableTree.onTreeBlur. */
-  onTreeBlur(nextTree: IFocusableTree | null): void {
-    const toolbox = this.targetWorkspace.getToolbox();
-    // If focus is moving to either the toolbox or the flyout's workspace, do
-    // not close the flyout. For anything else, do close it since the flyout is
-    // no longer focused.
-    if (toolbox && nextTree === toolbox) return;
-    if (nextTree === this.workspace_) return;
-    if (toolbox) toolbox.clearSelection();
-    this.autoHide(false);
+  /**
+   * See IFocusableNode.onTreeBlur.
+   *
+   * @deprecated v12: Use the Flyout's workspace for focus operations, instead.
+   */
+  onTreeBlur(_nextTree: IFocusableTree | null): void {
+    throw new Error('Flyouts are not directly focusable.');
   }
 }

core/flyout_button.ts

@@ -113,7 +113,7 @@ export class FlyoutButton
     this.id = idGenerator.getNextUniqueId();
     this.svgGroup = dom.createSvgElement(
       Svg.G,
-      {'id': this.id, 'class': cssClass, 'tabindex': '-1'},
+      {'id': this.id, 'class': cssClass},
       this.workspace.getCanvas(),
     );