diff --git a/client/src/components/StreamField/blocks/FieldBlock.js b/client/src/components/StreamField/blocks/FieldBlock.js index 7262c22d9583..8566fbd2880b 100644 --- a/client/src/components/StreamField/blocks/FieldBlock.js +++ b/client/src/components/StreamField/blocks/FieldBlock.js @@ -39,12 +39,25 @@ export class FieldBlock { this.prefix = prefix; + const extraAttributes = {}; + + // If the block has help text, we should associate this with the input rendered by the widget. + // To accomplish this, we must tell the widget to render an aria-describedby attribute referring in its HTML. + if (this.blockDef.meta.helpText) { + extraAttributes["aria-describedby"] = `${prefix}-helptext`; + } + // If the block is required, we must tell the widget to render a required attribute in its HTML. + if (this.blockDef.meta.required) { + extraAttributes.required = ""; + } + try { this.widget = this.blockDef.widget.render( widgetElement, prefix, prefix, initialState, + extraAttributes, this.parentCapabilities, ); } catch (e) {