diff --git a/x-pack/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx b/x-pack/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx
index 757cf71511ffb..58730179aafde 100644
--- a/x-pack/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx
+++ b/x-pack/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx
@@ -10,7 +10,7 @@ import React, { Fragment } from 'react';
 
 import { EUI_MODAL_CONFIRM_BUTTON, EuiConfirmModal } from '@elastic/eui';
 
-import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 
 interface Props {
   cancelAction: () => void;
@@ -27,26 +27,26 @@ export const DeleteAnnotationModal: React.FC<Props> = ({
     <Fragment>
       {isVisible === true && (
         <EuiConfirmModal
-          title={
-            <FormattedMessage
-              id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteAnnotationTitle"
-              defaultMessage="Delete this annotation?"
-            />
-          }
+          title={i18n.translate(
+            'xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteAnnotationTitle',
+            {
+              defaultMessage: 'Delete this annotation?',
+            }
+          )}
           onCancel={cancelAction}
           onConfirm={deleteAction}
-          cancelButtonText={
-            <FormattedMessage
-              id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.cancelButtonLabel"
-              defaultMessage="Cancel"
-            />
-          }
-          confirmButtonText={
-            <FormattedMessage
-              id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteButtonLabel"
-              defaultMessage="Delete"
-            />
-          }
+          cancelButtonText={i18n.translate(
+            'xpack.ml.timeSeriesExplorer.deleteAnnotationModal.cancelButtonLabel',
+            {
+              defaultMessage: 'Cancel',
+            }
+          )}
+          confirmButtonText={i18n.translate(
+            'xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteButtonLabel',
+            {
+              defaultMessage: 'Delete',
+            }
+          )}
           buttonColor="danger"
           defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
           className="eui-textBreakWord"
diff --git a/x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx b/x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx
index 4b576695c981a..8ac2a22be5a93 100644
--- a/x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx
+++ b/x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx
@@ -339,10 +339,12 @@ export const DeleteSpaceAwareItemCheckModal: FC<Props> = ({
         <>
           <EuiModalHeader>
             <EuiModalHeaderTitle>
-              <FormattedMessage
-                id="xpack.ml.deleteSpaceAwareItemCheckModal.modalTitle"
-                defaultMessage="Checking space permissions"
-              />
+              <h1>
+                <FormattedMessage
+                  id="xpack.ml.deleteSpaceAwareItemCheckModal.modalTitle"
+                  defaultMessage="Checking space permissions"
+                />
+              </h1>
             </EuiModalHeaderTitle>
           </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap
index 3a11531f6c4bc..1d4889557002d 100644
--- a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap
+++ b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap
@@ -44,30 +44,12 @@ exports[`DeleteRuleModal renders modal after clicking delete rule link 1`] = `
   </EuiLink>
   <EuiConfirmModal
     buttonColor="danger"
-    cancelButtonText={
-      <FormattedMessage
-        defaultMessage="Cancel"
-        id="xpack.ml.ruleEditor.deleteRuleModal.cancelButtonLabel"
-        values={Object {}}
-      />
-    }
-    confirmButtonText={
-      <FormattedMessage
-        defaultMessage="Delete"
-        id="xpack.ml.ruleEditor.deleteRuleModal.deleteButtonLabel"
-        values={Object {}}
-      />
-    }
+    cancelButtonText="Cancel"
+    confirmButtonText="Delete"
     defaultFocusedButton="confirm"
     onCancel={[Function]}
     onConfirm={[Function]}
-    title={
-      <FormattedMessage
-        defaultMessage="Delete rule?"
-        id="xpack.ml.ruleEditor.deleteRuleModal.deleteRuleTitle"
-        values={Object {}}
-      />
-    }
+    title="Delete rule?"
   />
 </Fragment>
 `;
diff --git a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js
index 1b62ab2907ff7..68221bbe58791 100644
--- a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js
+++ b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js
@@ -11,6 +11,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { i18n } from '@kbn/i18n';
 
 import { EuiConfirmModal, EuiLink, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -44,27 +45,20 @@ export class DeleteRuleModal extends Component {
     if (this.state.isModalVisible) {
       modal = (
         <EuiConfirmModal
-          title={
-            <FormattedMessage
-              id="xpack.ml.ruleEditor.deleteRuleModal.deleteRuleTitle"
-              defaultMessage="Delete rule?"
-            />
-          }
+          title={i18n.translate('xpack.ml.ruleEditor.deleteRuleModal.deleteRuleTitle', {
+            defaultMessage: 'Delete rule?',
+          })}
           onCancel={this.closeModal}
           onConfirm={this.deleteRule}
           buttonColor="danger"
-          cancelButtonText={
-            <FormattedMessage
-              id="xpack.ml.ruleEditor.deleteRuleModal.cancelButtonLabel"
-              defaultMessage="Cancel"
-            />
-          }
-          confirmButtonText={
-            <FormattedMessage
-              id="xpack.ml.ruleEditor.deleteRuleModal.deleteButtonLabel"
-              defaultMessage="Delete"
-            />
-          }
+          cancelButtonText={i18n.translate(
+            'xpack.ml.ruleEditor.deleteRuleModal.cancelButtonLabel',
+            { defaultMessage: 'Cancel' }
+          )}
+          confirmButtonText={i18n.translate(
+            'xpack.ml.ruleEditor.deleteRuleModal.deleteButtonLabel',
+            { defaultMessage: 'Delete' }
+          )}
           defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
         />
       );
diff --git a/x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js b/x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js
index 64910f5abfd21..cc76a708fc77b 100644
--- a/x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js
+++ b/x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js
@@ -84,7 +84,9 @@ const LoadingSpinner = () => (
 const Modal = ({ close, title, children }) => (
   <EuiModal onClose={close} style={{ width: '800px' }}>
     <EuiModalHeader>
-      <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+      <EuiModalHeaderTitle>
+        <h1>{title}</h1>
+      </EuiModalHeaderTitle>
     </EuiModalHeader>
 
     <EuiModalBody>{children}</EuiModalBody>
diff --git a/x-pack/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx b/x-pack/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx
index d030cfc9b92b6..a5b24a2290d67 100644
--- a/x-pack/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx
@@ -81,7 +81,9 @@ export const AddToDashboardControl: FC<AddToDashboardControlProps> = ({
   return (
     <EuiModal onClose={onClose.bind(null, undefined)} data-test-subj="mlAddToDashboardModal">
       <EuiModalHeader>
-        <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>
+          <h1>{title}</h1>
+        </EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
         {children}
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx
index f0c78c3828aeb..e1ec74412990b 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx
@@ -87,7 +87,9 @@ export const CloseJobsConfirmModal: FC<Props> = ({
     return (
       <EuiModal data-test-subj="mlCloseJobsConfirmModal" onClose={closeModal}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <h1>{title}</h1>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
           <ManagedJobsWarningCallout
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/stop_datafeeds_confirm_modal.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/stop_datafeeds_confirm_modal.tsx
index 2edd875279ad0..e7bd57229d3ff 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/stop_datafeeds_confirm_modal.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/stop_datafeeds_confirm_modal.tsx
@@ -88,7 +88,9 @@ export const StopDatafeedsConfirmModal: FC<Props> = ({
     return (
       <EuiModal data-test-subj="mlStopDatafeedsConfirmModal" onClose={closeModal}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <h1>{title}</h1>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
           <ManagedJobsWarningCallout
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/delete_job_modal/delete_job_modal.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/delete_job_modal/delete_job_modal.tsx
index d840d2e016d5e..ac41b9ecbf540 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/delete_job_modal/delete_job_modal.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/delete_job_modal/delete_job_modal.tsx
@@ -92,14 +92,16 @@ export const DeleteJobModal: FC<Props> = ({ setShowFunction, unsetShowFunction,
       <EuiModal data-test-subj="mlDeleteJobConfirmModal" onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <FormattedMessage
-              id="xpack.ml.jobsList.deleteJobModal.deleteJobsTitle"
-              defaultMessage="Delete {jobsCount, plural, one {{jobId}} other {# jobs}}?"
-              values={{
-                jobsCount: jobIds.length,
-                jobId: jobIds[0],
-              }}
-            />
+            <h1>
+              <FormattedMessage
+                id="xpack.ml.jobsList.deleteJobModal.deleteJobsTitle"
+                defaultMessage="Delete {jobsCount, plural, one {{jobId}} other {# jobs}}?"
+                values={{
+                  jobsCount: jobIds.length,
+                  jobId: jobIds[0],
+                }}
+              />
+            </h1>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
index 9100b7ffa03ab..0f97acdae5c3c 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
@@ -475,26 +475,19 @@ export class EditJobFlyoutUI extends Component {
     if (this.state.isConfirmationModalVisible) {
       confirmationModal = (
         <EuiConfirmModal
-          title={
-            <FormattedMessage
-              id="xpack.ml.jobsList.editJobFlyout.unsavedChangesDialogTitle"
-              defaultMessage="Save changes before leaving?"
-            />
-          }
+          title={i18n.translate('xpack.ml.jobsList.editJobFlyout.unsavedChangesDialogTitle', {
+            defaultMessage: 'Save changes before leaving?',
+          })}
           onCancel={() => this.closeFlyout(true)}
           onConfirm={() => this.save()}
-          cancelButtonText={
-            <FormattedMessage
-              id="xpack.ml.jobsList.editJobFlyout.leaveAnywayButtonLabel"
-              defaultMessage="Leave anyway"
-            />
-          }
-          confirmButtonText={
-            <FormattedMessage
-              id="xpack.ml.jobsList.editJobFlyout.saveChangesButtonLabel"
-              defaultMessage="Save changes"
-            />
-          }
+          cancelButtonText={i18n.translate(
+            'xpack.ml.jobsList.editJobFlyout.leaveAnywayButtonLabel',
+            { defaultMessage: 'Leave anyway' }
+          )}
+          confirmButtonText={i18n.translate(
+            'xpack.ml.jobsList.editJobFlyout.saveChangesButtonLabel',
+            { defaultMessage: 'Save changes' }
+          )}
           defaultFocusedButton="confirm"
         >
           <p>
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx
index 9a7508c634c6b..d77ed5c3bb2db 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx
@@ -288,10 +288,12 @@ class CustomUrlsUI extends Component<CustomUrlsProps, CustomUrlsState> {
       >
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <FormattedMessage
-              id="xpack.ml.jobsList.editJobFlyout.customUrls.addCustomUrlButtonLabel"
-              defaultMessage="Add custom URL"
-            />
+            <h1>
+              <FormattedMessage
+                id="xpack.ml.jobsList.editJobFlyout.customUrls.addCustomUrlButtonLabel"
+                defaultMessage="Add custom URL"
+              />
+            </h1>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx
index 335b19bd3a794..55891b3b3b579 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx
@@ -87,14 +87,16 @@ export const ResetJobModal: FC<Props> = ({ setShowFunction, unsetShowFunction, r
     <EuiModal data-test-subj="mlResetJobConfirmModal" onClose={closeModal}>
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          <FormattedMessage
-            id="xpack.ml.jobsList.resetJobModal.resetJobsTitle"
-            defaultMessage="Reset {jobsCount, plural, one {{jobId}} other {# jobs}}?"
-            values={{
-              jobsCount: jobIds.length,
-              jobId: jobIds[0],
-            }}
-          />
+          <h1>
+            <FormattedMessage
+              id="xpack.ml.jobsList.resetJobModal.resetJobsTitle"
+              defaultMessage="Reset {jobsCount, plural, one {{jobId}} other {# jobs}}?"
+              values={{
+                jobsCount: jobIds.length,
+                jobId: jobIds[0],
+              }}
+            />
+          </h1>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js
index c4c53b00591f4..3a2728a810427 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js
@@ -149,14 +149,16 @@ export class StartDatafeedModal extends Component {
         >
           <EuiModalHeader>
             <EuiModalHeaderTitle>
-              <FormattedMessage
-                id="xpack.ml.jobsList.startDatafeedModal.startJobsTitle"
-                defaultMessage="Start {jobsCount, plural, one {{jobId}} other {# jobs}}"
-                values={{
-                  jobsCount: startableJobs.length,
-                  jobId: startableJobs[0].id,
-                }}
-              />
+              <h1>
+                <FormattedMessage
+                  id="xpack.ml.jobsList.startDatafeedModal.startJobsTitle"
+                  defaultMessage="Start {jobsCount, plural, one {{jobId}} other {# jobs}}"
+                  values={{
+                    jobsCount: startableJobs.length,
+                    jobId: startableJobs[0].id,
+                  }}
+                />
+              </h1>
             </EuiModalHeaderTitle>
           </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx
index cc3b20966935b..9617458c6e811 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx
@@ -129,10 +129,12 @@ export const ChangeDataViewModal: FC<Props> = ({ onClose }) => {
       <EuiModal onClose={onClose} data-test-subj="mlJobMgmtImportJobsFlyout">
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <FormattedMessage
-              id="xpack.ml.newJob.wizard.datafeedStep.dataView.step0.title"
-              defaultMessage="Change data view"
-            />
+            <h1>
+              <FormattedMessage
+                id="xpack.ml.newJob.wizard.datafeedStep.dataView.step0.title"
+                defaultMessage="Change data view"
+              />
+            </h1>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx
index 12344c651bd11..3ab60cd8225cc 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx
@@ -34,10 +34,12 @@ export const ModalWrapper: FC<Props> = ({ onCreateClick, closeModal, saveEnabled
     >
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          <FormattedMessage
-            id="xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.title"
-            defaultMessage="Create detector"
-          />
+          <h1>
+            <FormattedMessage
+              id="xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.title"
+              defaultMessage="Create detector"
+            />
+          </h1>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap b/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap
index 16074e3849d02..61449ab5168d9 100644
--- a/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap
+++ b/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap
@@ -15,11 +15,13 @@ exports[`ImportModal Renders import modal 1`] = `
           grow={false}
         >
           <EuiModalHeaderTitle>
-            <FormattedMessage
-              defaultMessage="Import events"
-              id="xpack.ml.calendarsEdit.eventsTable.importEventsTitle"
-              values={Object {}}
-            />
+            <h1>
+              <FormattedMessage
+                defaultMessage="Import events"
+                id="xpack.ml.calendarsEdit.eventsTable.importEventsTitle"
+                values={Object {}}
+              />
+            </h1>
           </EuiModalHeaderTitle>
         </EuiFlexItem>
         <EuiFlexItem
diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/import_modal.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/import_modal.js
index 2abec566b43d1..86b54d359ef90 100644
--- a/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/import_modal.js
+++ b/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/import_modal.js
@@ -147,10 +147,12 @@ export class ImportModal extends Component {
             <EuiFlexGroup direction="column" gutterSize="none">
               <EuiFlexItem grow={false}>
                 <EuiModalHeaderTitle>
-                  <FormattedMessage
-                    id="xpack.ml.calendarsEdit.eventsTable.importEventsTitle"
-                    defaultMessage="Import events"
-                  />
+                  <h1>
+                    <FormattedMessage
+                      id="xpack.ml.calendarsEdit.eventsTable.importEventsTitle"
+                      defaultMessage="Import events"
+                    />
+                  </h1>
                 </EuiModalHeaderTitle>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js
index ae2815ebb5cd6..255405c8cd265 100644
--- a/x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js
+++ b/x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js
@@ -266,10 +266,12 @@ export class NewEventModal extends Component {
         >
           <EuiModalHeader>
             <EuiModalHeaderTitle>
-              <FormattedMessage
-                id="xpack.ml.calendarsEdit.newEventModal.createNewEventTitle"
-                defaultMessage="Create new event"
-              />
+              <h1>
+                <FormattedMessage
+                  id="xpack.ml.calendarsEdit.newEventModal.createNewEventTitle"
+                  defaultMessage="Create new event"
+                />
+              </h1>
             </EuiModalHeaderTitle>
           </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js b/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js
index 9864078aff698..a3bb900ca1ce2 100644
--- a/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js
+++ b/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js
@@ -16,7 +16,6 @@ import { ml } from '../../../services/ml_api_service';
 import { mlNodesAvailable } from '../../../ml_nodes_check/check_ml_nodes';
 import { deleteCalendars } from './delete_calendars';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { withKibana } from '@kbn/kibana-react-plugin/public';
 import { getDocLinks } from '../../../util/dependency_cache';
 import { HelpMenu } from '../../../components/help_menu';
@@ -105,30 +104,27 @@ export class CalendarsListUI extends Component {
       destroyModal = (
         <EuiConfirmModal
           data-test-subj={'mlCalendarDeleteConfirmation'}
-          title={
-            <FormattedMessage
-              id="xpack.ml.calendarsList.deleteCalendarsModal.deleteMultipleCalendarsTitle"
-              defaultMessage="Delete {calendarsCount, plural, one {{calendarsList}} other {# calendars}}?"
-              values={{
+          title={i18n.translate(
+            'xpack.ml.calendarsList.deleteCalendarsModal.deleteMultipleCalendarsTitle',
+            {
+              defaultMessage:
+                'Delete {calendarsCount, plural, one {{calendarsList}} other {# calendars}}?',
+              values: {
                 calendarsCount: selectedForDeletion.length,
                 calendarsList: selectedForDeletion.map((c) => c.calendar_id).join(', '),
-              }}
-            />
-          }
+              },
+            }
+          )}
           onCancel={this.closeDestroyModal}
           onConfirm={this.deleteCalendars}
-          cancelButtonText={
-            <FormattedMessage
-              id="xpack.ml.calendarsList.deleteCalendarsModal.cancelButtonLabel"
-              defaultMessage="Cancel"
-            />
-          }
-          confirmButtonText={
-            <FormattedMessage
-              id="xpack.ml.calendarsList.deleteCalendarsModal.deleteButtonLabel"
-              defaultMessage="Delete"
-            />
-          }
+          cancelButtonText={i18n.translate(
+            'xpack.ml.calendarsList.deleteCalendarsModal.cancelButtonLabel',
+            { defaultMessage: 'Cancel' }
+          )}
+          confirmButtonText={i18n.translate(
+            'xpack.ml.calendarsList.deleteCalendarsModal.deleteButtonLabel',
+            { defaultMessage: 'Delete' }
+          )}
           buttonColor="danger"
           defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
         />
diff --git a/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap b/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap
index d4ea0c49612a8..00072352c4f59 100644
--- a/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap
+++ b/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap
@@ -99,37 +99,14 @@ exports[`DeleteFilterListModal renders modal after clicking delete button 1`] =
   </EuiButton>
   <EuiConfirmModal
     buttonColor="danger"
-    cancelButtonText={
-      <FormattedMessage
-        defaultMessage="Cancel"
-        id="xpack.ml.settings.filterLists.deleteFilterListModal.cancelButtonLabel"
-        values={Object {}}
-      />
-    }
+    cancelButtonText="Cancel"
     className="eui-textBreakWord"
-    confirmButtonText={
-      <FormattedMessage
-        defaultMessage="Delete"
-        id="xpack.ml.settings.filterLists.deleteFilterListModal.confirmButtonLabel"
-        values={Object {}}
-      />
-    }
+    confirmButtonText="Delete"
     data-test-subj="mlFilterListDeleteConfirmation"
     defaultFocusedButton="confirm"
     onCancel={[Function]}
     onConfirm={[Function]}
-    title={
-      <FormattedMessage
-        defaultMessage="Delete {selectedFilterListsLength, plural, one {{selectedFilterId}} other {# filter lists}}?"
-        id="xpack.ml.settings.filterLists.deleteFilterListModal.modalTitle"
-        values={
-          Object {
-            "selectedFilterId": "web_domains",
-            "selectedFilterListsLength": 2,
-          }
-        }
-      />
-    }
+    title="Delete 2 filter lists?"
   />
 </div>
 `;
diff --git a/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js b/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js
index 8f7fc02ffdb24..8540d6c803b78 100644
--- a/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js
+++ b/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js
@@ -8,6 +8,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 
 import { EuiButton, EuiConfirmModal, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui';
 
@@ -56,34 +57,27 @@ export class DeleteFilterListModal extends Component {
     let modal;
 
     if (this.state.isModalVisible) {
-      const title = (
-        <FormattedMessage
-          id="xpack.ml.settings.filterLists.deleteFilterListModal.modalTitle"
-          defaultMessage="Delete {selectedFilterListsLength, plural, one {{selectedFilterId}} other {# filter lists}}?"
-          values={{
-            selectedFilterListsLength: selectedFilterLists.length,
-            selectedFilterId: !!selectedFilterLists.length && selectedFilterLists[0].filter_id,
-          }}
-        />
-      );
       modal = (
         <EuiConfirmModal
-          title={title}
+          title={i18n.translate('xpack.ml.settings.filterLists.deleteFilterListModal.modalTitle', {
+            defaultMessage:
+              'Delete {selectedFilterListsLength, plural, one {{selectedFilterId}} other {# filter lists}}?',
+            values: {
+              selectedFilterListsLength: selectedFilterLists.length,
+              selectedFilterId: !!selectedFilterLists.length && selectedFilterLists[0].filter_id,
+            },
+          })}
           className="eui-textBreakWord"
           onCancel={this.closeModal}
           onConfirm={this.onConfirmDelete}
-          cancelButtonText={
-            <FormattedMessage
-              id="xpack.ml.settings.filterLists.deleteFilterListModal.cancelButtonLabel"
-              defaultMessage="Cancel"
-            />
-          }
-          confirmButtonText={
-            <FormattedMessage
-              id="xpack.ml.settings.filterLists.deleteFilterListModal.confirmButtonLabel"
-              defaultMessage="Delete"
-            />
-          }
+          cancelButtonText={i18n.translate(
+            'xpack.ml.settings.filterLists.deleteFilterListModal.cancelButtonLabel',
+            { defaultMessage: 'Cancel' }
+          )}
+          confirmButtonText={i18n.translate(
+            'xpack.ml.settings.filterLists.deleteFilterListModal.confirmButtonLabel',
+            { defaultMessage: 'Delete' }
+          )}
           buttonColor="danger"
           defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
           data-test-subj={'mlFilterListDeleteConfirmation'}
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/modal.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/modal.js
index 9b7adcf2bce32..1ae5ee2b05604 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/modal.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/modal.js
@@ -33,10 +33,12 @@ export function Modal(props) {
     <EuiModal onClose={props.close} maxWidth={860} data-test-subj="mlModalForecast">
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          <FormattedMessage
-            id="xpack.ml.timeSeriesExplorer.forecastingModal.forecastingTitle"
-            defaultMessage="Forecasting"
-          />
+          <h1>
+            <FormattedMessage
+              id="xpack.ml.timeSeriesExplorer.forecastingModal.forecastingTitle"
+              defaultMessage="Forecasting"
+            />
+          </h1>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/application/trained_models/models_management/delete_models_modal.tsx b/x-pack/plugins/ml/public/application/trained_models/models_management/delete_models_modal.tsx
index b4f0bc0ec505e..f6799469fd1e6 100644
--- a/x-pack/plugins/ml/public/application/trained_models/models_management/delete_models_modal.tsx
+++ b/x-pack/plugins/ml/public/application/trained_models/models_management/delete_models_modal.tsx
@@ -69,14 +69,16 @@ export const DeleteModelsModal: FC<DeleteModelsModalProps> = ({ modelIds, onClos
     >
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          <FormattedMessage
-            id="xpack.ml.trainedModels.modelsList.deleteModal.header"
-            defaultMessage="Delete {modelsCount, plural, one {{modelId}} other {# models}}?"
-            values={{
-              modelId: modelIds[0],
-              modelsCount: modelIds.length,
-            }}
-          />
+          <h1>
+            <FormattedMessage
+              id="xpack.ml.trainedModels.modelsList.deleteModal.header"
+              defaultMessage="Delete {modelsCount, plural, one {{modelId}} other {# models}}?"
+              values={{
+                modelId: modelIds[0],
+                modelsCount: modelIds.length,
+              }}
+            />
+          </h1>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/application/trained_models/models_management/deployment_setup.tsx b/x-pack/plugins/ml/public/application/trained_models/models_management/deployment_setup.tsx
index f8082997a1c6e..c999376eebeaf 100644
--- a/x-pack/plugins/ml/public/application/trained_models/models_management/deployment_setup.tsx
+++ b/x-pack/plugins/ml/public/application/trained_models/models_management/deployment_setup.tsx
@@ -289,7 +289,7 @@ export const StartUpdateDeploymentModal: FC<StartDeploymentModalProps> = ({
           <EuiFlexGroup justifyContent={'spaceBetween'}>
             <EuiFlexItem grow={false}>
               <EuiTitle size={'s'}>
-                <h2>
+                <h1>
                   {isUpdate ? (
                     <FormattedMessage
                       id="xpack.ml.trainedModels.modelsList.updateDeployment.modalTitle"
@@ -303,7 +303,7 @@ export const StartUpdateDeploymentModal: FC<StartDeploymentModalProps> = ({
                       values={{ modelId }}
                     />
                   )}
-                </h2>
+                </h1>
               </EuiTitle>
             </EuiFlexItem>
 
diff --git a/x-pack/plugins/ml/public/application/trained_models/models_management/force_stop_dialog.tsx b/x-pack/plugins/ml/public/application/trained_models/models_management/force_stop_dialog.tsx
index 6a97131723229..1800f9b13db03 100644
--- a/x-pack/plugins/ml/public/application/trained_models/models_management/force_stop_dialog.tsx
+++ b/x-pack/plugins/ml/public/application/trained_models/models_management/force_stop_dialog.tsx
@@ -8,6 +8,7 @@
 import React, { FC } from 'react';
 import { EuiConfirmModal } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import type { OverlayStart, ThemeServiceStart } from '@kbn/core/public';
 import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 import type { ModelItem } from './models_list';
@@ -25,27 +26,20 @@ export const ForceStopModelConfirmDialog: FC<ForceStopModelConfirmDialogProps> =
 }) => {
   return (
     <EuiConfirmModal
-      title={
-        <FormattedMessage
-          id="xpack.ml.trainedModels.modelsList.forceStopDialog.title"
-          defaultMessage="Stop model {modelId}?"
-          values={{ modelId: model.model_id }}
-        />
-      }
+      title={i18n.translate('xpack.ml.trainedModels.modelsList.forceStopDialog.title', {
+        defaultMessage: 'Stop model {modelId}?',
+        values: { modelId: model.model_id },
+      })}
       onCancel={onCancel}
       onConfirm={onConfirm}
-      cancelButtonText={
-        <FormattedMessage
-          id="xpack.ml.trainedModels.modelsList.forceStopDialog.cancelText"
-          defaultMessage="Cancel"
-        />
-      }
-      confirmButtonText={
-        <FormattedMessage
-          id="xpack.ml.trainedModels.modelsList.forceStopDialog.confirmText"
-          defaultMessage="Stop"
-        />
-      }
+      cancelButtonText={i18n.translate(
+        'xpack.ml.trainedModels.modelsList.forceStopDialog.cancelText',
+        { defaultMessage: 'Cancel' }
+      )}
+      confirmButtonText={i18n.translate(
+        'xpack.ml.trainedModels.modelsList.forceStopDialog.confirmText',
+        { defaultMessage: 'Stop' }
+      )}
       buttonColor="danger"
     >
       <FormattedMessage
diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.tsx
index 6e724cf672bb0..9c2c373a3c1e2 100644
--- a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.tsx
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_initializer.tsx
@@ -53,12 +53,12 @@ export const AnomalyChartsInitializer: FC<AnomalyChartsInitializerProps> = ({
     >
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          <h2>
+          <h1>
             <FormattedMessage
               id="xpack.ml.anomalyChartsEmbeddable.setupModal.title"
               defaultMessage="Anomaly explorer charts configuration"
             />
-          </h2>
+          </h1>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 
diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx
index e5e2c2fd3b6be..c4c2fc7262eac 100644
--- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx
@@ -93,10 +93,12 @@ export const AnomalySwimlaneInitializer: FC<AnomalySwimlaneInitializerProps> = (
     <EuiModal initialFocus="[name=panelTitle]" onClose={onCancel}>
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          <FormattedMessage
-            id="xpack.ml.swimlaneEmbeddable.setupModal.title"
-            defaultMessage="Anomaly swim lane configuration"
-          />
+          <h1>
+            <FormattedMessage
+              id="xpack.ml.swimlaneEmbeddable.setupModal.title"
+              defaultMessage="Anomaly swim lane configuration"
+            />
+          </h1>
         </EuiModalHeaderTitle>
       </EuiModalHeader>