From 9d3ddecde0960c81d2bc347ec50a9b6f11420cb3 Mon Sep 17 00:00:00 2001
From: "Storm B. Heg" <storm@stormbase.digital>
Date: Thu, 20 Jul 2023 15:01:38 +0200
Subject: [PATCH] FieldBlock: render 'required' and 'aria-describedby'
 attributes when appropriate

ref: https://github.com/wagtail/wagtail/issues/10300
---
 .../StreamField/blocks/FieldBlock.js           | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

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