Fix Alert explanation wrapper for rich children

src/components/Alert/alert.test.tsx

@@ -53,6 +53,30 @@ describe('<Alert />', () => {
     expect(explanation).toBeInTheDocument();
   });
 
+  it('renders text explanations in a paragraph', () => {
+    render(
+      <Alert status='info' message='testing'>
+        Explanation
+      </Alert>,
+    );
+    const explanation = screen.getByTestId('explanation');
+    expect(explanation.tagName).toBe('P');
+    expect(explanation).toHaveClass('m-notification__explanation');
+  });
+
+  it('renders non-text explanations in a div to avoid invalid paragraph nesting', () => {
+    render(
+      <Alert status='warning' message='testing'>
+        <ul>
+          <li>Resolve this issue</li>
+        </ul>
+      </Alert>,
+    );
+    const explanation = screen.getByTestId('explanation');
+    expect(explanation.tagName).toBe('DIV');
+    expect(within(explanation).getByRole('list')).toBeInTheDocument();
+  });
+
   it('does not include an explanation wrapper class when there is no message but children are provided', () => {
     render(
       <Alert status='info'>
@@ -172,8 +196,15 @@ describe('<Alert />', () => {
   });
 
   it('renders field-level info alert without status modifier', () => {
-    render(<AlertFieldLevel status='info' message='Details before submit' />);
-    const element = screen.getByTestId('message').parentElement;
+    const testId = 'field-level-info';
+    render(
+      <AlertFieldLevel
+        data-testid={testId}
+        status='info'
+        message='Details before submit'
+      />,
+    );
+    const element = screen.getByTestId(testId);
     expect(element).toHaveClass('a-form-alert');
     expect(element).not.toHaveClass('a-form-alert--info');
   });

src/components/Alert/alert.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import type { HTMLAttributes, ReactNode } from 'react';
+import { Children, type HTMLAttributes, type ReactNode } from 'react';
 import type { HeadingLevel } from '../../types/heading-level';
 import type { JSXElement } from '../../types/jsx-element';
 import { Icon } from '../Icon/icon';
@@ -20,6 +20,11 @@ export const iconByType: Record<string, { name: string; withBg: boolean }> = {
 
 export type AlertType = 'error' | 'info' | 'loading' | 'success' | 'warning';
 
+const hasOnlyTextChildren = (children: ReactNode): boolean =>
+  Children.toArray(children).every(
+    (child) => typeof child === 'string' || typeof child === 'number',
+  );
+
 interface AlertProperties {
   status?: AlertFieldLevelType | AlertType;
   message?: ReactNode;
@@ -70,6 +75,13 @@ export const Alert = ({
     className,
   );
 
+  const explanationClassName = message
+    ? 'm-notification__explanation'
+    : undefined;
+  const explanationTag: 'div' | 'p' =
+    children && hasOnlyTextChildren(children) ? 'p' : 'div';
+  const ExplanationTag = explanationTag;
+
   return (
     <div className={classes} data-testid='notification' {...properties}>
       {showIcon ? (
@@ -82,12 +94,12 @@ export const Alert = ({
           </div>
         ) : null}
         {children ? (
-          <div
-            className={`${message ? 'm-notification__explanation' : ''}`}
+          <ExplanationTag
+            className={explanationClassName}
             data-testid='explanation'
           >
             {children}
-          </div>
+          </ExplanationTag>
         ) : null}
         {links && links.length > 0 ? (
           <List isLinks>