release: Blockly v12.1.0

Merge pull request #9119 from google/rc/v12.1.0

Author: maribethb

core/block_svg.ts

@@ -849,6 +849,17 @@ export class BlockSvg
     Tooltip.dispose();
     ContextMenu.hide();
 
+    // If this block was focused, focus its parent or workspace instead.
+    const focusManager = getFocusManager();
+    if (focusManager.getFocusedNode() === this) {
+      const parent = this.getParent();
+      if (parent) {
+        focusManager.focusNode(parent);
+      } else {
+        setTimeout(() => focusManager.focusTree(this.workspace), 0);
+      }
+    }
+
     if (animate) {
       this.unplug(healStack);
       blockAnimations.disposeUiEffect(this);

core/blockly.ts

@@ -173,6 +173,10 @@ import {IVariableModel, IVariableState} from './interfaces/i_variable_model.js';
 import * as internalConstants from './internal_constants.js';
 import {LineCursor} from './keyboard_nav/line_cursor.js';
 import {Marker} from './keyboard_nav/marker.js';
+import {
+  KeyboardNavigationController,
+  keyboardNavigationController,
+} from './keyboard_navigation_controller.js';
 import type {LayerManager} from './layer_manager.js';
 import * as layers from './layers.js';
 import {MarkerManager} from './marker_manager.js';
@@ -580,6 +584,7 @@ export {
   ImageProperties,
   Input,
   InsertionMarkerPreviewer,
+  KeyboardNavigationController,
   LabelFlyoutInflater,
   LayerManager,
   Marker,
@@ -631,6 +636,7 @@ export {
   isSelectable,
   isSerializable,
   isVariableBackedParameterModel,
+  keyboardNavigationController,
   layers,
   renderManagement,
   serialization,

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

@@ -19,6 +19,7 @@ import {IContextMenu} from '../interfaces/i_contextmenu.js';
 import {ICopyable} from '../interfaces/i_copyable.js';
 import {IDeletable} from '../interfaces/i_deletable.js';
 import {IDraggable} from '../interfaces/i_draggable.js';
+import {IFocusableNode} from '../interfaces/i_focusable_node.js';
 import type {IFocusableTree} from '../interfaces/i_focusable_tree.js';
 import {IRenderedElement} from '../interfaces/i_rendered_element.js';
 import {ISelectable} from '../interfaces/i_selectable.js';
@@ -42,7 +43,8 @@ export class RenderedWorkspaceComment
     ISelectable,
     IDeletable,
     ICopyable<WorkspaceCommentCopyData>,
-    IContextMenu
+    IContextMenu,
+    IFocusableNode
 {
   /** The class encompassing the svg elements making up the workspace comment. */
   private view: CommentView;
@@ -63,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();
 
@@ -207,7 +208,12 @@ export class RenderedWorkspaceComment
   /** Disposes of the view. */
   override dispose() {
     this.disposing = true;
+    const focusManager = getFocusManager();
+    if (focusManager.getFocusedNode() === this) {
+      setTimeout(() => focusManager.focusTree(this.workspace), 0);
+    }
     if (!this.view.isDeadOrDying()) this.view.dispose();
+
     super.dispose();
   }
 

core/common.ts

@@ -8,11 +8,13 @@
 
 import type {Block} from './block.js';
 import {BlockDefinition, Blocks} from './blocks.js';
+import * as browserEvents from './browser_events.js';
 import type {Connection} from './connection.js';
 import {EventType} from './events/type.js';
 import * as eventUtils from './events/utils.js';
 import {getFocusManager} from './focus_manager.js';
 import {ISelectable, isSelectable} from './interfaces/i_selectable.js';
+import {ShortcutRegistry} from './shortcut_registry.js';
 import type {Workspace} from './workspace.js';
 import type {WorkspaceSvg} from './workspace_svg.js';
 
@@ -310,4 +312,29 @@ export function defineBlocks(blocks: {[key: string]: BlockDefinition}) {
   }
 }
 
+/**
+ * Handle a key-down on SVG drawing surface. Does nothing if the main workspace
+ * is not visible.
+ *
+ * @internal
+ * @param e Key down event.
+ */
+export function globalShortcutHandler(e: KeyboardEvent) {
+  const mainWorkspace = getMainWorkspace() as WorkspaceSvg;
+  if (!mainWorkspace) {
+    return;
+  }
+
+  if (
+    browserEvents.isTargetInput(e) ||
+    (mainWorkspace.rendered && !mainWorkspace.isVisible())
+  ) {
+    // When focused on an HTML text input widget, don't trap any keys.
+    // Ignore keypresses on rendered workspaces that have been explicitly
+    // hidden.
+    return;
+  }
+  ShortcutRegistry.registry.onKeyDown(mainWorkspace, e);
+}
+
 export const TEST_ONLY = {defineBlocksWithJsonArrayInternal};

core/css.ts

@@ -505,6 +505,6 @@ input[type=number] {
   .blocklyIconGroup,
   .blocklyTextarea
 ) {
-  outline-width: 0px;
+  outline: none;
 }
 `;

core/dropdowndiv.ts

@@ -13,6 +13,7 @@
 // Former goog.module ID: Blockly.dropDownDiv
 
 import type {BlockSvg} from './block_svg.js';
+import * as browserEvents from './browser_events.js';
 import * as common from './common.js';
 import type {Field} from './field.js';
 import {ReturnEphemeralFocus, getFocusManager} from './focus_manager.js';
@@ -86,6 +87,9 @@ let positionToField: boolean | null = null;
 /** Callback to FocusManager to return ephemeral focus when the div closes. */
 let returnEphemeralFocus: ReturnEphemeralFocus | null = null;
 
+/** Identifier for shortcut keydown listener used to unbind it. */
+let keydownListener: browserEvents.Data | null = null;
+
 /**
  * Dropdown bounds info object used to encapsulate sizing information about a
  * bounding element (bounding box and width/height).
@@ -122,13 +126,21 @@ export function createDom() {
   }
   div = document.createElement('div');
   div.className = 'blocklyDropDownDiv';
+  div.tabIndex = -1;
   const parentDiv = common.getParentContainer() || document.body;
   parentDiv.appendChild(div);
 
   content = document.createElement('div');
   content.className = 'blocklyDropDownContent';
   div.appendChild(content);
 
+  keydownListener = browserEvents.conditionalBind(
+    content,
+    'keydown',
+    null,
+    common.globalShortcutHandler,
+  );
+
   arrow = document.createElement('div');
   arrow.className = 'blocklyDropDownArrow';
   div.appendChild(arrow);
@@ -167,6 +179,10 @@ export function getContentDiv(): HTMLDivElement {
 
 /** Clear the content of the drop-down. */
 export function clearContent() {
+  if (keydownListener) {
+    browserEvents.unbind(keydownListener);
+    keydownListener = null;
+  }
   div.remove();
   createDom();
 }
@@ -192,17 +208,24 @@ export function setColour(backgroundColour: string, borderColour: string) {
  * @param block Block to position the drop-down around.
  * @param opt_onHide Optional callback for when the drop-down is hidden.
  * @param opt_secondaryYOffset Optional Y offset for above-block positioning.
+ * @param manageEphemeralFocus Whether ephemeral focus should be managed
+ *     according to the drop-down div's lifetime. Note that if a false value is
+ *     passed in here then callers should manage ephemeral focus directly
+ *     otherwise focus may not properly restore when the widget closes. Defaults
+ *     to true.
  * @returns True if the menu rendered below block; false if above.
  */
 export function showPositionedByBlock<T>(
   field: Field<T>,
   block: BlockSvg,
   opt_onHide?: () => void,
   opt_secondaryYOffset?: number,
+  manageEphemeralFocus: boolean = true,
 ): boolean {
   return showPositionedByRect(
     getScaledBboxOfBlock(block),
     field as Field,
+    manageEphemeralFocus,
     opt_onHide,
     opt_secondaryYOffset,
   );
@@ -217,17 +240,24 @@ export function showPositionedByBlock<T>(
  * @param field The field to position the dropdown against.
  * @param opt_onHide Optional callback for when the drop-down is hidden.
  * @param opt_secondaryYOffset Optional Y offset for above-block positioning.
+ * @param manageEphemeralFocus Whether ephemeral focus should be managed
+ *     according to the drop-down div's lifetime. Note that if a false value is
+ *     passed in here then callers should manage ephemeral focus directly
+ *     otherwise focus may not properly restore when the widget closes. Defaults
+ *     to true.
  * @returns True if the menu rendered below block; false if above.
  */
 export function showPositionedByField<T>(
   field: Field<T>,
   opt_onHide?: () => void,
   opt_secondaryYOffset?: number,
+  manageEphemeralFocus: boolean = true,
 ): boolean {
   positionToField = true;
   return showPositionedByRect(
     getScaledBboxOfField(field as Field),
     field as Field,
+    manageEphemeralFocus,
     opt_onHide,
     opt_secondaryYOffset,
   );
@@ -271,16 +301,15 @@ function getScaledBboxOfField(field: Field): Rect {
  * @param manageEphemeralFocus Whether ephemeral focus should be managed
  *     according to the drop-down div's lifetime. Note that if a false value is
  *     passed in here then callers should manage ephemeral focus directly
- *     otherwise focus may not properly restore when the widget closes. Defaults
- *     to true.
+ *     otherwise focus may not properly restore when the widget closes.
  * @returns True if the menu rendered below block; false if above.
  */
 function showPositionedByRect(
   bBox: Rect,
   field: Field,
+  manageEphemeralFocus: boolean,
   opt_onHide?: () => void,
   opt_secondaryYOffset?: number,
-  manageEphemeralFocus: boolean = true,
 ): boolean {
   // If we can fit it, render below the block.
   const primaryX = bBox.left + (bBox.right - bBox.left) / 2;
@@ -352,10 +381,6 @@ export function show<T>(
   dom.addClass(div, renderedClassName);
   dom.addClass(div, themeClassName);
 
-  if (manageEphemeralFocus) {
-    returnEphemeralFocus = getFocusManager().takeEphemeralFocus(div);
-  }
-
   // When we change `translate` multiple times in close succession,
   // Chrome may choose to wait and apply them all at once.
   // Since we want the translation to initial X, Y to be immediate,
@@ -364,7 +389,15 @@ export function show<T>(
   // making the dropdown appear to fly in from (0, 0).
   // Using both `left`, `top` for the initial translation and then `translate`
   // for the animated transition to final X, Y is a workaround.
-  return positionInternal(primaryX, primaryY, secondaryX, secondaryY);
+  const atOrigin = positionInternal(primaryX, primaryY, secondaryX, secondaryY);
+
+  // Ephemeral focus must happen after the div is fully visible in order to
+  // ensure that it properly receives focus.
+  if (manageEphemeralFocus) {
+    returnEphemeralFocus = getFocusManager().takeEphemeralFocus(div);
+  }
+
+  return atOrigin;
 }
 
 const internal = {

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/field_image.ts

@@ -212,6 +212,17 @@ export class FieldImage extends Field<string> {
     }
   }
 
+  /**
+   * Check whether this field should be clickable.
+   *
+   * @returns Whether this field is clickable.
+   */
+  isClickable(): boolean {
+    // Images are only clickable if they have a click handler and fulfill the
+    // contract to be clickable: enabled and attached to an editable block.
+    return super.isClickable() && !!this.clickHandler;
+  }
+
   /**
    * If field click is called, and click handler defined,
    * call the handler.