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

…appropriate

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

@@ -39,13 +39,16 @@ export class FieldBlock {
 
     this.prefix = prefix;
 
+    const options = { attributes: this.getAttributes() };
+
     try {
       this.widget = this.blockDef.widget.render(
         widgetElement,
         prefix,
         prefix,
         initialState,
         this.parentCapabilities,
+        options,
       );
     } catch (e) {
       // eslint-disable-next-line no-console
@@ -137,6 +140,24 @@ export class FieldBlock {
     }
   }
 
+  getAttributes() {
+    const prefix = this.prefix;
+    const attributes = {};
+
+    // 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) {
+      attributes['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) {
+      attributes.required = '';
+    }
+
+    return attributes;
+  }
+
   getState() {
     return this.widget.getState();
   }