diff --git a/packages/blockly/core/field.ts b/packages/blockly/core/field.ts index 295a13863..9f218288f 100644 --- a/packages/blockly/core/field.ts +++ b/packages/blockly/core/field.ts @@ -476,15 +476,18 @@ export abstract class Field } /** - * Create a field text element. Not to be overridden by subclasses. Instead + * Create a field text element. Not to be overridden by subclasses. Instead, * modify the result of the function inside initView, or create a separate - * function to call. + * function to call. Aria state is hidden; use the aria label for the field + * and/or containing block to expose content to screen readers. Text content + * for custom blocks can be set after creation. */ protected createTextElement_() { this.textElement_ = dom.createSvgElement( Svg.TEXT, { 'class': 'blocklyText blocklyFieldText', + 'aria-hidden': 'true', }, this.fieldGroup_, ); diff --git a/packages/blockly/tests/mocha/field_test.js b/packages/blockly/tests/mocha/field_test.js index e2163a2a3..7736c6b50 100644 --- a/packages/blockly/tests/mocha/field_test.js +++ b/packages/blockly/tests/mocha/field_test.js @@ -944,5 +944,14 @@ suite('Abstract Fields', function () { assert.equal(field.computeAriaLabel(true), 'custom type: custom value'); }); }); + + suite('Field text elements are hidden', function () { + test('Field text element has aria-hidden=true', function () { + const field = new TestField(); + field.constants_ = {FIELD_BORDER_RECT_RADIUS: 5}; + field.initView(); + assert(field.getTextElement().ariaHidden === 'true'); + }); + }); }); });