fix(gcds-radios): Fix focus when radios has an error (#968)

* fix(gcds-radios): Fix focus when radios has an error

* Fix test

---------

Co-authored-by: Melanie Boeckmann <[email protected]>

Author: ethanWallace

packages/web/src/components/gcds-radios/gcds-radios.tsx

@@ -412,11 +412,9 @@ export class GcdsRadios {
             ) : null}
 
             {errorMessage ? (
-              <div>
-                <gcds-error-message id="radios-error" messageId="radios">
-                  {errorMessage}
-                </gcds-error-message>
-              </div>
+              <gcds-error-message id="radios-error" messageId="radios">
+                {errorMessage}
+              </gcds-error-message>
             ) : null}
 
             {this.optionsArr &&
@@ -432,11 +430,10 @@ export class GcdsRadios {
 
                 if (radio.hint) {
                   const hintID = radio.hint ? `hint-${radio.id} ` : '';
-                  attrsInput['aria-describedby'] = `${hintID}${
-                    attrsInput['aria-describedby']
-                      ? `${attrsInput['aria-describedby']}`
-                      : ''
-                  }`;
+                  attrsInput['aria-describedby'] = `${hintID}${attrsInput['aria-describedby']
+                    ? `${attrsInput['aria-describedby']}`
+                    : ''
+                    }`;
                 }
 
                 if (hasError) {
@@ -446,9 +443,8 @@ export class GcdsRadios {
 
                 return (
                   <div
-                    class={`gcds-radio ${
-                      disabled ? 'gcds-radio--disabled' : ''
-                    } ${hasError ? 'gcds-radio--error' : ''}`}
+                    class={`gcds-radio ${disabled ? 'gcds-radio--disabled' : ''
+                      } ${hasError ? 'gcds-radio--error' : ''}`}
                   >
                     <input
                       id={radio.id}

packages/web/src/components/gcds-radios/test/gcds-radios.spec.tsx

@@ -145,11 +145,9 @@ describe('gcds-radios', () => {
             <legend class="gcds-radios__legend" id="radios-legend">
               Legend
             </legend>
-            <div>
-              <gcds-error-message id="radios-error" messageid="radios">
-                Error message
-              </gcds-error-message>
-            </div>
+            <gcds-error-message id="radios-error" messageid="radios">
+              Error message
+            </gcds-error-message>
             <div class="gcds-radio gcds-radio--error">
               <input aria-description="Error message" aria-invalid="true" id="radio1" name="radio" type="radio" value="radio1">
               <gcds-label label="Label 1" label-for="radio1" lang="en"></gcds-label>