diff --git a/client/src/components/StreamField/blocks/FieldBlock.js b/client/src/components/StreamField/blocks/FieldBlock.js index 7262c22d9583..bd8abe80181e 100644 --- a/client/src/components/StreamField/blocks/FieldBlock.js +++ b/client/src/components/StreamField/blocks/FieldBlock.js @@ -39,6 +39,23 @@ 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 = ''; + } + + const options = { + attributes: extraAttributes, + }; + try { this.widget = this.blockDef.widget.render( widgetElement, @@ -46,6 +63,7 @@ export class FieldBlock { prefix, initialState, this.parentCapabilities, + options, ); } catch (e) { // eslint-disable-next-line no-console