[EuiModal] Wrapping header in H1 if a string is returned (#5494)

* [EuiModal] Wrapping header in H1 if a string is returned
* Adding a changelog entry for PR 5494
* Refactoring children string checker to be more fault tolerant.
* Refactoring to use top level API isValidElement
* Moving changelog entry to main.

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed a `EuiDataGrid` sizing bug which didn't account for a horizontal scrollbar ([#5478](https://github.com/elastic/eui/pull/5478))
+- Fixed `EuiModalHeaderTitle` to conditionally wrap title strings in an H1 ([#5494](https://github.com/elastic/eui/pull/5494))
 
 **Deprecations**
 

src/components/modal/__snapshots__/confirm_modal.test.tsx.snap

@@ -47,7 +47,9 @@ Array [
             class="euiModalHeader__title"
             data-test-subj="confirmModalTitleText"
           >
-            A confirmation modal
+            <h1>
+              A confirmation modal
+            </h1>
           </div>
         </div>
         <div
@@ -160,7 +162,9 @@ Array [
             class="euiModalHeader__title"
             data-test-subj="confirmModalTitleText"
           >
-            A confirmation modal
+            <h1>
+              A confirmation modal
+            </h1>
           </div>
         </div>
         <div

src/components/modal/__snapshots__/modal_header_title.test.tsx.snap

@@ -6,6 +6,8 @@ exports[`renders EuiModalHeaderTitle 1`] = `
   class="euiModalHeader__title testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  children
+  <h1>
+    children
+  </h1>
 </div>
 `;

src/components/modal/modal_header_title.tsx

@@ -22,7 +22,7 @@ export const EuiModalHeaderTitle: EuiModalHeaderTitleProps = ({
   const classes = classnames('euiModalHeader__title', className);
   return (
     <div className={classes} {...rest}>
-      {children}
+      {React.isValidElement(children) ? children : <h1>{children}</h1>}
     </div>
   );
 };