From 44b1fa3ebb4c0e86bbb25fbdceeeb9c47bbff60c Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Tue, 23 Apr 2024 14:53:39 -0500
Subject: [PATCH 1/4] Set first page heading to H1.

---
 .../components/landing_page/onboarding/welcome_header/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx
index c4d5fa13ec6f6..848eece5b243a 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx
@@ -52,7 +52,7 @@ const WelcomeHeaderComponent: React.FC<{ productTier?: ProductTier }> = ({ produ
           </EuiTitle>
         )}
         <EuiSpacer size="s" />
-        <span className={headerSubtitleClassNames}>{GET_STARTED_PAGE_SUBTITLE}</span>
+        <h1 className={headerSubtitleClassNames}>{GET_STARTED_PAGE_SUBTITLE}</h1>
         <EuiSpacer size="s" />
         <span className={headerDescriptionClassNames}>{GET_STARTED_PAGE_DESCRIPTION}</span>
         <CurrentPlan productTier={productTier} projectFeaturesUrl={projectFeaturesUrl} />

From 54c9b9eb4a6b0d52ace8db322f344d9b73ebc50f Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Tue, 23 Apr 2024 14:54:49 -0500
Subject: [PATCH 2/4] Set H2 and H3 markup for expandable cards.

---
 .../landing_page/onboarding/hooks/use_setup_sections.tsx  | 4 ++--
 .../onboarding/step_links/add_integration_buttons.tsx     | 6 ++++--
 .../landing_page/onboarding/styles/step_content.styles.ts | 8 +++++++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx
index 295d6565a4cf1..7587f065a4de9 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx
@@ -101,14 +101,14 @@ export const useSetUpSections = ({ euiTheme }: { euiTheme: EuiThemeComputed }) =
               id={currentSection.id}
               data-test-subj={`section-${currentSection.id}`}
             >
-              <span
+              <h2
                 css={css`
                   font-size: ${euiTheme.base * 1.375}px;
                   font-weight: ${euiTheme.font.weight.bold};
                 `}
               >
                 {currentSection.title}
-              </span>
+              </h2>
               <EuiSpacer size="l" />
               <EuiFlexGroup
                 gutterSize="none"
diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_buttons.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_buttons.tsx
index 35b69b7bedcde..6943c32f08f85 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_buttons.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_buttons.tsx
@@ -9,7 +9,7 @@ import React, { useCallback, type SVGProps } from 'react';
 import { i18n } from '@kbn/i18n';
 import { LinkButton } from '@kbn/security-solution-navigation/links';
 import type { IconType } from '@elastic/eui';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPanel, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPanel, EuiText, EuiTitle } from '@elastic/eui';
 import { AddIntegrationsSteps } from '../types';
 import { useStepContext } from '../context/step_context';
 import { IntegrationsPageName } from './types';
@@ -135,7 +135,9 @@ const AddIntegrationPanel: React.FC<{
           <EuiIcon type={icon} size="xl" />
         </EuiFlexItem>
         <EuiFlexItem>
-          <h4>{title}</h4>
+          <EuiTitle size="xs">
+            <h3>{title}</h3>
+          </EuiTitle>
           <EuiText color="subdued" size="xs">
             {description}
           </EuiText>
diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
index 8cd3026000dc4..ab3cd6e90da84 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useEuiShadow, useEuiTheme } from '@elastic/eui';
+import { useEuiShadow, useEuiTheme, useEuiFontSize } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { useMemo } from 'react';
 
@@ -16,6 +16,7 @@ export const RIGHT_CONTENT_WIDTH = 513;
 export const useStepContentStyles = () => {
   const { euiTheme } = useEuiTheme();
   const imageShadow = useEuiShadow('s');
+  const descriptionHeader = useEuiFontSize('s');
 
   const customStyles = useMemo(
     () => ({
@@ -45,6 +46,11 @@ export const useStepContentStyles = () => {
           '.step-paragraph': {
             marginTop: euiTheme.size.xl,
           },
+
+          '.euiTitle': {
+            fontSize: `${descriptionHeader.fontSize}`,
+            lineHeight: `${descriptionHeader.lineHeight}`,
+          },
         },
       }),
       rightPanelStyles: css({

From 27c843dc1b0112b4f004ccccf0c9846e7b735e62 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Tue, 23 Apr 2024 14:55:05 -0500
Subject: [PATCH 3/4] Set H2 markup for footer callouts.

---
 .../components/landing_page/onboarding/footer/index.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
index 9d026f12b4925..8604a9db1b1c0 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
 import { useFooterStyles } from '../styles/footer.styles';
@@ -25,7 +25,9 @@ const FooterComponent = () => {
         <EuiFlexItem key={`footer-${item.key}`}>
           <img src={item.icon} alt={item.title} height="64" width="64" />
           <EuiSpacer size="m" />
-          <p className={titleStyle}>{item.title}</p>
+          <EuiTitle>
+            <h2 className={titleStyle}>{item.title}</h2>
+          </EuiTitle>
           <p className={descriptionStyle}>{item.description}</p>
           <EuiSpacer size="m" />
           <EuiLink href={item.link.href} external={true} target="_blank" className={linkStyle}>

From 3b96c8c297c1d12791c5b1ef9eba236022901817 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 25 Apr 2024 10:13:35 -0500
Subject: [PATCH 4/4] Updated footer headings to H3.

---
 .../common/components/landing_page/onboarding/footer/index.tsx  | 2 +-
 .../landing_page/onboarding/styles/step_content.styles.ts       | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
index 8604a9db1b1c0..1dd0839e5b758 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
@@ -26,7 +26,7 @@ const FooterComponent = () => {
           <img src={item.icon} alt={item.title} height="64" width="64" />
           <EuiSpacer size="m" />
           <EuiTitle>
-            <h2 className={titleStyle}>{item.title}</h2>
+            <h3 className={titleStyle}>{item.title}</h3>
           </EuiTitle>
           <p className={descriptionStyle}>{item.description}</p>
           <EuiSpacer size="m" />
diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
index ab3cd6e90da84..c0ab2961e4f4b 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
@@ -83,6 +83,8 @@ export const useStepContentStyles = () => {
       euiTheme.size.s,
       euiTheme.size.xl,
       imageShadow,
+      descriptionHeader.fontSize,
+      descriptionHeader.lineHeight,
     ]
   );