google · BenHenning · Apr 9, 2025 · Apr 11, 2025 · Apr 18, 2025 · Apr 21, 2025
@@ -214,6 +214,10 @@ export class BlockSvg
 
     // The page-wide unique ID of this Block used for focusing.
     svgPath.id = idGenerator.getNextUniqueId();
+    svgPath.setAttribute(
+      'aria-label',
+      this.type ? '"' + this.type + '" block' : 'Block',
+    );
 
     this.doInit_();
   }

@@ -143,8 +143,14 @@ import {
 } from './interfaces/i_draggable.js';
 import {IDragger} from './interfaces/i_dragger.js';
 import {IFlyout} from './interfaces/i_flyout.js';
-import {IFocusableNode} from './interfaces/i_focusable_node.js';
-import {IFocusableTree} from './interfaces/i_focusable_tree.js';
+import {
+  IFocusableNode,
+  isFocusableNode,
+} from './interfaces/i_focusable_node.js';
+import {
+  IFocusableTree,
+  isFocusableTree,
+} from './interfaces/i_focusable_tree.js';
 import {IHasBubble, hasBubble} from './interfaces/i_has_bubble.js';
 import {IIcon, isIcon} from './interfaces/i_icon.js';
 import {IKeyboardAccessible} from './interfaces/i_keyboard_accessible.js';
@@ -624,6 +630,8 @@ export {
   isCopyable,
   isDeletable,
   isDraggable,
+  isFocusableNode,
+  isFocusableTree,
   isIcon,
   isObservable,
   isPaster,

@@ -147,8 +147,8 @@ let content = `
 
 .blocklyHighlightedConnectionPath {
   fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
+  // stroke: #fc3;
+  // stroke-width: 4px;
 }
 
 .blocklyPathLight {
@@ -157,10 +157,6 @@ let content = `
   stroke-width: 1;
 }
 
-.blocklySelected>.blocklyPathLight {
-  display: none;
-}
-
 .blocklyDraggable {
   cursor: grab;
   cursor: -webkit-grab;

@@ -641,6 +641,10 @@
   animateOutTimer = setTimeout(function () {
     hideWithoutAnimation();
   }, ANIMATION_TIME * 1000);
+  if (returnEphemeralFocus) {
+    returnEphemeralFocus();
+    returnEphemeralFocus = null;
+  }
   if (onHide) {
     onHide();
     >
@@ -656,6 +660,10 @@
     clearTimeout(animateOutTimer);
   }
 
+  if (returnEphemeralFocus) {
+    returnEphemeralFocus();
+    returnEphemeralFocus = null;
+  }
   if (onHide) {
     onHide();
     >
@@ -666,7 +674,7 @@
  (common.getMainWorkspace() as WorkspaceSvg).markFocused();

  if (returnEphemeralFocus) {
    returnEphemeralFocus();
    returnEphemeralFocus = null;
  }
 }

@@ -314,6 +314,7 @@
     this.fieldGroup_ = dom.createSvgElement(Svg.G, {
       'tabindex': '-1',
       'id': id,
+      'aria-label': 'Field ' + this.name,
     });
     if (!this.isVisible()) {
       this.fieldGroup_.style.display = 'none';
@@ -1362,7 +1363,7 @@
  }

  /** See IFocusableNode.getFocusableElement. */
  getFocusableElement(): HTMLElement | SVGElement {
    if (!this.fieldGroup_) {
      throw Error('This field currently has no representative DOM element.');
    }
@@ -1370,7 +1371,7 @@
  }

  /** See IFocusableNode.getFocusableTree. */
  getFocusableTree(): IFocusableTree {
    const block = this.getSourceBlock();
    if (!block) {
      throw new UnattachedFieldError();
@@ -1379,16 +1380,39 @@
  }

  /** See IFocusableNode.onNodeFocus. */
  onNodeFocus(): void {}

  /** See IFocusableNode.onNodeBlur. */
  onNodeBlur(): void {}

  /** See IFocusableNode.canBeFocused. */
  canBeFocused(): boolean {
     return true;
   }
 
+  /** See IFocusableNode.getFocusableElement. */
+  getFocusableElement(): HTMLElement | SVGElement {
+    if (!this.fieldGroup_) {
+      throw Error('This field currently has no representative DOM element.');
+    }
+    return this.fieldGroup_;
+  }
+
+  /** See IFocusableNode.getFocusableTree. */
+  getFocusableTree(): IFocusableTree {
+    const block = this.getSourceBlock();
+    if (!block) {
+      throw new UnattachedFieldError();
+    }
+    return block.workspace as WorkspaceSvg;
+  }
+
+  /** See IFocusableNode.onNodeFocus. */
+  onNodeFocus(): void {}
+
+  /** See IFocusableNode.onNodeBlur. */
+  onNodeBlur(): void {}
+
   /**
    * Subclasses should reimplement this method to construct their Field
    * subclass from a JSON arg object.

@@ -309,6 +309,7 @@ export abstract class Flyout
     this.svgGroup_ = dom.createSvgElement(tagName, {
       'class': 'blocklyFlyout',
       'tabindex': '0',
+      'aria-label': 'Flyout',
     });
     this.svgGroup_.style.display = 'none';
     this.svgBackground_ = dom.createSvgElement(

@@ -727,6 +727,7 @@ export class Gesture {
     if (this.targetBlock) {
       this.bringBlockToFront();
       this.targetBlock.workspace.hideChaff(!!this.flyout);
+      getFocusManager().focusNode(this.targetBlock);
       this.targetBlock.showContextMenu(e);
     } else if (this.startBubble) {
       this.startBubble.showContextMenu(e);
@@ -929,6 +930,9 @@ export class Gesture {
         'block',
       );
       eventUtils.fire(event);
+      if (this.targetBlock) {
+        getFocusManager().focusNode(this.targetBlock);
+      }
     }
     this.bringBlockToFront();
     eventUtils.setGroup(false);

@@ -595,6 +595,14 @@
     return this;
   }
 
+  private findHighlightSvg(): SVGElement | null {
+    // This cast is valid as TypeScript's definition is wrong. See:
+    // https://github.com/microsoft/TypeScript/issues/60996.
+    return document.getElementById(this.id) as
+      | unknown
+      | null as SVGElement | null;
+  }
+
   /**
    * Handles showing the context menu when it is opened on a connection.
    * Note that typically the context menu can't be opened with the mouse

@@ -1196,16 +1196,10 @@ export class ConstantProvider {
         `font-weight: ${this.FIELD_TEXT_FONTWEIGHT};`,
       `}`,
 
-      // Selection highlight.
-      `${selector} .blocklySelected>.blocklyPath {`,
-        `stroke: #fc3;`,
-        `stroke-width: 3px;`,
-      `}`,
-
       // Connection highlight.
-      `${selector} .blocklyHighlightedConnectionPath {`,
-        `stroke: #fc3;`,
-      `}`,
+      // `${selector} .blocklyHighlightedConnectionPath {`,
+      //   `stroke: #fc3;`,
+      // `}`,
 
       // Replaceable highlight.
       `${selector} .blocklyReplaceable .blocklyPath {`,

@@ -439,6 +439,13 @@ export class Drawer {
         if (highlightSvg) {
           highlightSvg.style.display = elem.highlighted ? '' : 'none';
         }
+        // if (elem.highlighted) {
+        //   this.drawConnectionHighlightPath(elem);
+        // } else {
+        //   this.block_.pathObject.removeConnectionHighlight?.(
+        //     elem.connectionModel,
+        //   );
+        // }
       }
     }
   }

@@ -105,13 +105,17 @@ export class PathObject implements IPathObject {
    *     removed.
    */
   protected setClass_(className: string, add: boolean) {
+    this.setClassOnElem_(this.svgRoot, className, add);
+  }
+
+  private setClassOnElem_(root: SVGElement, className: string, add: boolean) {
     if (!className) {
       return;
     }
     if (add) {
-      dom.addClass(this.svgRoot, className);
+      dom.addClass(root, className);
     } else {
-      dom.removeClass(this.svgRoot, className);
+      dom.removeClass(root, className);
     }
   }
 
@@ -161,7 +165,7 @@ export class PathObject implements IPathObject {
    * @param enable True if selection is enabled, false otherwise.
    */
   updateSelected(enable: boolean) {
-    this.setClass_('blocklySelected', enable);
+    this.setClassOnElem_(this.svgPath, 'blocklySelected', enable);
   }
 
   /**
@@ -245,6 +249,8 @@ export class PathObject implements IPathObject {
       },
       this.svgRoot,
     );
+    // TODO: Do this in a cleaner way. One possibility: create the path without 'd' or 'transform' in RenderedConnection, then just update it here (and keep registrations).
+    (highlight as any).renderedConnection = connection;
     this.connectionHighlights.set(connection, highlight);
     return highlight;
   }

@@ -192,6 +192,7 @@ export class ToolboxCategory
     aria.setRole(this.htmlDiv_, aria.Role.TREEITEM);
     aria.setState(this.htmlDiv_, aria.State.SELECTED, false);
     aria.setState(this.htmlDiv_, aria.State.LEVEL, this.level_ + 1);
+    this.htmlDiv_.setAttribute('aria-label', 'Category ' + this.name_);
 
     this.rowDiv_ = this.createRowContainer_();
     this.rowDiv_.style.pointerEvents = 'auto';

@@ -61,6 +61,7 @@ export class ToolboxSeparator extends ToolboxItem {
       dom.addClass(container, className);
     }
     this.htmlDiv = container;
+    this.htmlDiv.setAttribute('aria-label', 'Separator');
     return container;
   }
 

@@ -146,6 +146,7 @@ export class Toolbox
     this.flyout = this.createFlyout_();
 
     this.HtmlDiv = this.createDom_(this.workspace_);
+    this.HtmlDiv.setAttribute('aria-label', 'Toolbox');
     const flyoutDom = this.flyout.createDom('svg');
     dom.addClass(flyoutDom, 'blocklyToolboxFlyout');
     dom.insertAfter(flyoutDom, svg);
@@ -965,7 +966,7 @@ export class Toolbox
    *
    * @returns True if a parent category was selected, false otherwise.
    */
-  private selectParent(): boolean {
+  selectParent(): boolean {
     if (!this.selectedItem_) {
       return false;
     }
@@ -993,7 +994,7 @@ export class Toolbox
    *
    * @returns True if a child category was selected, false otherwise.
    */
-  private selectChild(): boolean {
+  selectChild(): boolean {
     if (!this.selectedItem_ || !this.selectedItem_.isCollapsible()) {
       return false;
     }
@@ -1012,7 +1013,7 @@ export class Toolbox
    *
    * @returns True if a next category was selected, false otherwise.
    */
-  private selectNext(): boolean {
+  selectNext(): boolean {
     if (!this.selectedItem_) {
       return false;
     }
@@ -1037,7 +1038,7 @@ export class Toolbox
    *
    * @returns True if a previous category was selected, false otherwise.
    */
-  private selectPrevious(): boolean {
+  selectPrevious(): boolean {
     if (!this.selectedItem_) {
       return false;
     }

@@ -765,6 +765,7 @@ export class WorkspaceSvg
       // Only the top-level workspace should be tabbable.
       'tabindex': injectionDiv ? '0' : '-1',
       'id': this.id,
+      'aria-label': 'Workspace',
     });
     if (injectionDiv) {
       aria.setState(