fix: Miscellaneous screen reader issues (experimental)

blocks/math.ts

@@ -32,6 +32,7 @@ export const blocks = createBlockDefinitionsFromJsonArray([
         'type': 'field_number',
         'name': 'NUM',
         'value': 0,
+        'ariaName': 'Number',
       },
     ],
     'output': 'Number',

core/block_svg.ts

@@ -268,7 +268,7 @@ export class BlockSvg
 
     let blockTypeText = 'block';
     if (this.isShadow()) {
-      blockTypeText = 'replacable block';
+      blockTypeText = 'replaceable block';
     } else if (this.outputConnection) {
       blockTypeText = 'input block';
     } else if (this.statementInputCount) {

core/bubbles/bubble.ts

@@ -144,6 +144,8 @@ export abstract class Bubble implements IBubble, ISelectable, IFocusableNode {
     this.focusableElement = overriddenFocusableElement ?? this.svgRoot;
     this.focusableElement.setAttribute('id', this.id);
     aria.setRole(this.focusableElement, aria.Role.GROUP);
+    const label = this.getAriaLabel();
+    if (label) aria.setState(this.focusableElement, aria.State.LABEL, label);
 
     browserEvents.conditionalBind(
       this.background,
@@ -166,6 +168,13 @@ export abstract class Bubble implements IBubble, ISelectable, IFocusableNode {
     this.disposed = true;
   }
 
+  /**
+   * @returns The ARIA label to use for this bubble, or null if none should be used.
+   */
+  protected getAriaLabel(): string | null {
+    return null;
+  }
+
   /**
    * Set the location the tail of this bubble points to.
    *

core/bubbles/mini_workspace_bubble.ts

@@ -89,6 +89,10 @@ export class MiniWorkspaceBubble extends Bubble {
     this.updateBubbleSize();
   }
 
+  protected override getAriaLabel(): string | null {
+    return 'Mutator Bubble';
+  }
+
   dispose() {
     this.miniWorkspace.dispose();
     super.dispose();

core/bubbles/text_bubble.ts

@@ -30,6 +30,10 @@ export class TextBubble extends Bubble {
     dom.addClass(this.svgRoot, 'blocklyTextBubble');
   }
 
+  protected override getAriaLabel(): string | null {
+    return 'Warning Bubble';
+  }
+
   /** @returns the current text of this text bubble. */
   getText(): string {
     return this.text;

core/bubbles/textinput_bubble.ts

@@ -87,6 +87,10 @@ export class TextInputBubble extends Bubble {
     this.setSize(this.DEFAULT_SIZE, true);
   }
 
+  protected override getAriaLabel(): string | null {
+    return 'Comment Bubble';
+  }
+
   /** @returns the text of this bubble. */
   getText(): string {
     return this.editor.getText();

core/field.ts

@@ -272,14 +272,7 @@ export abstract class Field<T = any>
   }
 
   getAriaName(): string | null {
-    return (
-      this.config?.ariaName ??
-      this.config?.name ??
-      this.config?.type ??
-      this.getSourceBlock()?.type ??
-      this.name ??
-      null
-    );
+    return this.config?.ariaName ?? null;
   }
 
   /**

core/field_image.ts

@@ -156,17 +156,18 @@ export class FieldImage extends Field<string> {
     }
 
     const element = this.getFocusableElement();
-    if (this.clickHandler) {
+    if (this.isClickable()) {
       this.imageElement.style.cursor = 'pointer';
       aria.setRole(element, aria.Role.BUTTON);
+
+      const label = [this.altText, this.getAriaName()]
+        .filter((item) => !!item)
+        .join(', ');
+      aria.setState(element, aria.State.LABEL, label);
     } else {
-      aria.setRole(element, aria.Role.IMAGE);
+      // The field isn't navigable unless it's clickable.
+      aria.setRole(element, aria.Role.PRESENTATION);
     }
-
-    const label = [this.altText, this.getAriaName()]
-      .filter((item) => !!item)
-      .join(', ');
-    aria.setState(element, aria.State.LABEL, label);
   }
 
   override updateSize_() {}