diff --git a/client/src/components/StreamField/blocks/FieldBlock.js b/client/src/components/StreamField/blocks/FieldBlock.js index 7262c22d9583..3bb117d9e4ed 100644 --- a/client/src/components/StreamField/blocks/FieldBlock.js +++ b/client/src/components/StreamField/blocks/FieldBlock.js @@ -39,12 +39,26 @@ 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 + // to the help text id 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) {