FieldBlock: render 'required' and 'aria-describedby' attributes when …

…appropriate

ref: wagtail#10300

client/src/components/StreamField/blocks/FieldBlock.js

@@ -39,13 +39,31 @@ 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,
         prefix,
         prefix,
         initialState,
         this.parentCapabilities,
+        options,
       );
     } catch (e) {
       // eslint-disable-next-line no-console