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

…appropriate

ref: wagtail#10300

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) {