Adding EuiModal callout for H1 rendering. (#6497)

* Adding EuiModal callout for H1 rendering. * Updating text to be more concise and clear. * Updating documentation for default H1 wrapper on EuiModalHeaderTitle. * Removing example callout, added explanation to component type definition. * Removed extra H1 tags from Docs examples. * Removed H1 from EUIModal component and a11y specs.
elastic · Jan 23, 2023 · f7b7bb7 · f7b7bb7
1 parent 6cdb223
commit f7b7bb7
Show file tree

Hide file tree

Showing 14 changed files with 19 additions and 40 deletions.
diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
@@ -66,9 +66,7 @@ export default () => {
     modal = (
       <EuiModal onClose={closeModal} style={{ width: '800px' }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Color picker in a modal</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Color picker in a modal</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>

diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js
@@ -125,9 +125,7 @@ export default () => {
     modal = (
       <EuiModal onClose={closeModal} style={{ width: '800px' }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Combo box in a modal</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Combo box in a modal</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>{comboBox}</EuiModalBody>

diff --git a/src-docs/src/views/datagrid/advanced/ref.tsx b/src-docs/src/views/datagrid/advanced/ref.tsx
@@ -220,9 +220,7 @@ export default () => {
       {isModalVisible && (
         <EuiModal onClose={closeModal} style={{ width: 500 }}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <h2>Example modal</h2>
-            </EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>Example modal</EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>

diff --git a/src-docs/src/views/datagrid/basics/datagrid.js b/src-docs/src/views/datagrid/basics/datagrid.js
@@ -242,9 +242,7 @@ const trailingControlColumns = [
         modal = (
           <EuiModal onClose={closeModal} style={{ width: 500 }}>
             <EuiModalHeader>
-              <EuiModalHeaderTitle>
-                <h2>A typical modal</h2>
-              </EuiModalHeaderTitle>
+              <EuiModalHeaderTitle>A typical modal</EuiModalHeaderTitle>
             </EuiModalHeader>
 
             <EuiModalBody>

diff --git a/src-docs/src/views/modal/modal.tsx b/src-docs/src/views/modal/modal.tsx
@@ -23,9 +23,7 @@ export default () => {
     modal = (
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Modal title</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
@@ -34,7 +32,7 @@ export default () => {
           <EuiCodeBlock language="html" isCopyable>
             {`<EuiModal onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>

diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js
@@ -32,7 +32,7 @@ const modalWidthSource = require('!!raw-loader!./modal_width');
 
 const modalSnippet = `<EuiModal onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -46,7 +46,7 @@ const modalSnippet = `<EuiModal onClose={closeModal}>
 
 const modalWidthSnippet = `<EuiModal style={{ width: 800 }} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -60,7 +60,7 @@ const modalWidthSnippet = `<EuiModal style={{ width: 800 }} onClose={closeModal}
 
 const modalFormSnippet = `<EuiModal onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>

diff --git a/src-docs/src/views/modal/modal_form.tsx b/src-docs/src/views/modal/modal_form.tsx
@@ -115,9 +115,7 @@ export default () => {
     modal = (
       <EuiModal onClose={closeModal} initialFocus="[name=popswitch]">
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Modal title</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>{formSample}</EuiModalBody>

diff --git a/src-docs/src/views/modal/modal_width.tsx b/src-docs/src/views/modal/modal_width.tsx
@@ -23,9 +23,7 @@ export default () => {
     modal = (
       <EuiModal style={{ width: 800 }} onClose={closeModal}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Modal title</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
@@ -34,7 +32,7 @@ export default () => {
           <EuiCodeBlock language="html" isCopyable>
             {`<EuiModal style={{ width: 800 }} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>

diff --git a/src-docs/src/views/toast/guidelines.js b/src-docs/src/views/toast/guidelines.js
@@ -36,7 +36,7 @@ export default () => {
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <h1>Your visualization has an error</h1>
+            Your visualization has an error
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 

diff --git a/src-docs/src/views/window_event/basic_window_event.js b/src-docs/src/views/window_event/basic_window_event.js
@@ -12,9 +12,7 @@ import { ModalExample } from './modal_example_container';
 const BasicModal = ({ onClose }) => (
   <EuiModal onClose={onClose} style={{ width: '800px' }}>
     <EuiModalHeader>
-      <EuiModalHeaderTitle>
-        <h1>Example modal</h1>
-      </EuiModalHeaderTitle>
+      <EuiModalHeaderTitle>Example modal</EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>
       <p>

diff --git a/src-docs/src/views/window_event/window_event_conflict.js b/src-docs/src/views/window_event/window_event_conflict.js
@@ -28,9 +28,7 @@ const ConflictModal = (props) => {
   return (
     <EuiModal onClose={props.onClose} style={{ width: '800px' }}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
-          <h1>Example modal</h1>
-        </EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>Example modal</EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
         <EuiFieldText

diff --git a/src/components/modal/modal.a11y.tsx b/src/components/modal/modal.a11y.tsx
@@ -36,9 +36,7 @@ const Modal = () => {
       {isModalVisible && (
         <EuiModal {...modalProps}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <h1>Title of modal</h1>
-            </EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>Title of modal</EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>

diff --git a/src/components/modal/modal.spec.tsx b/src/components/modal/modal.spec.tsx
@@ -36,9 +36,7 @@ const Modal = () => {
       {isModalVisible && (
         <EuiModal {...modalProps}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <h1>Title of modal</h1>
-            </EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>Title of modal</EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>

diff --git a/src/components/modal/modal_header_title.tsx b/src/components/modal/modal_header_title.tsx
@@ -16,7 +16,8 @@ export type EuiModalHeaderTitleProps = FunctionComponent<
   HTMLAttributes<HTMLHeadingElement> &
     CommonProps & {
       /**
-       * The tag to render
+       * The tag to render. Can be changed to a lower heading
+       * level like `h2` or a container `div`.
        * @default h1
        */
       component?: ElementType;