[TASK][Security Serverless]: Add semantic headings to Get Started page (

elastic#181494) Refactored the Security Serverless "Getting Started" page to use semantic headings instead of P and SPAN tags marked up as headings.
peteharverson · Apr 29, 2024 · 3e7f11b · 3e7f11b
1 parent 0780c19
commit 3e7f11b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/...ugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx b/...ugins/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>
+            <h3 className={titleStyle}>{item.title}</h3>
+          </EuiTitle>
           <p className={descriptionStyle}>{item.description}</p>
           <EuiSpacer size="m" />
           <EuiLink href={item.link.href} external={true} target="_blank" className={linkStyle}>

diff --git a/...ty_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx b/...ty_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/...n/public/common/components/landing_page/onboarding/step_links/add_integration_buttons.tsx b/...n/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/...y_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts b/...y_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({
@@ -77,6 +83,8 @@ export const useStepContentStyles = () => {
       euiTheme.size.s,
       euiTheme.size.xl,
       imageShadow,
+      descriptionHeader.fontSize,
+      descriptionHeader.lineHeight,
     ]
   );
 

diff --git a/...curity_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx b/...curity_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} />