Merge pull request #9446 from BenHenning/fix-miscellaneous-screen-reader-issues

## The basics

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

## The details
### Resolves

Fixes #9301
Fixes #9312
Fixes #9313
Fixes part of #9304

### Proposed Changes

This introduces a variety of specific changes to resolve several issues for screen reader work, including introducing fundamental support for field labeling.

Specifically:
- Field labels have been simplified to only use their custom defined ARIA name otherwise they are null (and thus should be ignored for readout purposes) which wraps up the remaining high-level work for #9301 (#9450 tracks more specific follow-up work to improve upon what's been established at this point). The PR also introduces an ARIA override for number inputs in math blocks so that the readout is correct for them.
- Bubble labeling is more explicit now which is useful for mutators (#9312), warnings, and comments. The general improvement for bubbles wraps up the remaining work for #9313 as well since the core issue was resolved in #9351. By default a bubble has no ARIA label.
- #9304 is partly being addressed here with the change to field images: they are no longer being added to the accessibility node tree unless they are actually navigable (that is, clickable). Part of #9304's goal is to remove extraneous nodes.
- Finally, a typo was fixed for 'replaceable blocks' since these were not reading out correctly. This was noticed in passing and isn't directly related to the other issues.

### Reason for Changes

This PR is largely being used as a basis for one particularly significant issue: #9301. Field labeling has undergone several iterations over the past few months and the team seems comfortable sticking with a "do as little as possible" approach when determining the label, thus justifying the need for expecting more specific customization (i.e. #9450). To this end it's important to be clear that getting fields to a good state is not actually "done" but the need to track it as a large incomplete thing has ended. Note that one important part of #9301 was updating field plugins to be accessible--this largely seems unnecessary as-is as it will be completely dependent on the needs of future user tests. The long-term plan will need to account for making all fields in `blockly-samples` accessible (per #9307).

Some of the terminology used here (e.g. for bubbles) will likely need to change after user testing, but it's important to establish that _something_ correct is communicated even if the terminology may require scaffolding and/or refinement.

It's important to note that while non-clickable field images are no longer in the node graph, their ARIA presence still exists as part of the fluent block labeling solution. That is, `FieldImage`'s alt text is used as part of constructing a fluent block label (sometimes to confusing effect--see #9452).

### Test Coverage

No tests needed since these are experimental changes and do not change existing test behaviors.

### Documentation

No documentation changes are needed for these experimental changes.

### Additional Information

None.

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);
-    } else {
-      aria.setRole(element, aria.Role.IMAGE);
-    }
 
-    const label = [this.altText, this.getAriaName()]
-      .filter((item) => !!item)
-      .join(', ');
-    aria.setState(element, aria.State.LABEL, label);
+      const label = [this.altText, this.getAriaName()]
+        .filter((item) => !!item)
+        .join(', ');
+      aria.setState(element, aria.State.LABEL, label);
+    } else {
+      // The field isn't navigable unless it's clickable.
+      aria.setRole(element, aria.Role.PRESENTATION);
+    }
   }
 
   override updateSize_() {}