Render alert elements prior to new content

Author: jrood

packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx

@@ -82,7 +82,6 @@ export function ConnectedFormGroup<T extends ConnectedField>({
       infotip={infotip}
       isSoloField={isSoloField}
       required={!!validation?.required}
-      size={labelSize}
     >
       {label}
     </FormGroupLabel>
@@ -103,13 +102,19 @@ export function ConnectedFormGroup<T extends ConnectedField>({
         name={name}
       />
       {children}
-      {showError && (
-        <FormError
-          aria-live={isFirstError ? 'assertive' : 'off'}
-          id={errorId}
-          role={isFirstError ? 'alert' : 'status'}
-          variant={errorType}
-        >
+      {/*
+       * For screen readers to read new content, role="alert" and/or
+       * aria-live wrapper elements must be present *before* content is
+       * added. Thus, we need to render the FormError span always,
+       * regardless of whether or not there is an error.
+       */}
+      <FormError
+        aria-live={isFirstError ? 'assertive' : 'off'}
+        id={errorId}
+        role={isFirstError ? 'alert' : 'status'}
+        variant={errorType}
+      >
+        {showError && (
           <Markdown
             inline
             overrides={{
@@ -126,8 +131,8 @@ export function ConnectedFormGroup<T extends ConnectedField>({
             spacing="none"
             text={textError}
           />
-        </FormError>
-      )}
+        )}
+      </FormError>
     </FormGroup>
   );
 }

packages/gamut/src/Form/elements/FormGroup.tsx

@@ -98,11 +98,15 @@ export const FormGroup: React.FC<FormGroupProps> = ({
       {labelComponent}
       {descriptionComponent}
       {children}
-      {error && (
-        <FormError aria-live="polite" role="alert">
-          {error}
-        </FormError>
-      )}
+      {/*
+       * For screen readers to read new content, role="alert" and/or
+       * aria-live wrapper elements must be present *before* content is
+       * added. Thus, we need to render the FormError span always,
+       * regardless of whether or not there is an error.
+       */}
+      <FormError aria-live="polite" role="alert">
+        {error}
+      </FormError>
     </FormGroupContainer>
   );
 };