chore: Update header hierarchy

mozilla · Jan 13, 2025 · 322d990 · 322d990
1 parent 89ca25e
commit 322d990
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 22 deletions.
diff --git a/...pp/(proper_react)/(redesign)/(public)/LandingViewRedesign/LandingViewRedesign.module.scss b/...pp/(proper_react)/(redesign)/(public)/LandingViewRedesign/LandingViewRedesign.module.scss
@@ -30,18 +30,8 @@
     }
   }
 
-  h1 {
-    font: tokens.$text-title-sm;
-  }
-
-  h2,
   h3 {
     font: tokens.$text-title-xs;
-  }
-
-  h1,
-  h2,
-  h3 {
     font-family: var(--font-inter);
     font-weight: 400;
     line-height: 1.25em;

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/CtaBanner.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/CtaBanner.tsx
@@ -12,13 +12,13 @@ export const CtaBanner = (props: LandingPageProps) => {
   return (
     <div className={styles.banner}>
       <div className={styles.bannerHeader}>
-        <h2>
+        <h3>
           <b>
             {props.l10n.getFragment("landing-redesign-banner-cta-header", {
               elems: { b: <strong /> },
             })}
           </b>
-        </h2>
+        </h3>
         <p>{props.l10n.getString("landing-redesign-banner-cta-subheader")}</p>
       </div>
       {props.eligibleForPremium && props.scanLimitReached ? (

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/CtaInputBanner.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/CtaInputBanner.tsx
@@ -12,7 +12,7 @@ export const CtaInputBanner = (props: LandingPageProps) => {
     <div className={styles.banner}>
       <div className={styles.bannerContent}>
         <div className={styles.bannerHeader}>
-          <h2>
+          <h3>
             <b>
               {props.l10n.getFragment(
                 "landing-redesign-cta-input-banner-header",
@@ -21,7 +21,7 @@ export const CtaInputBanner = (props: LandingPageProps) => {
                 },
               )}
             </b>
-          </h2>
+          </h3>
           <p>
             {props.l10n.getString(
               "landing-redesign-cta-input-banner-subheader",

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Faq.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Faq.tsx
@@ -147,9 +147,9 @@ export const Faq = () => {
 
   return (
     <div className={styles.content}>
-      <h2>
+      <h3>
         <b>{l10n.getString("landing-redesign-faq-section-title")}</b>
-      </h2>
+      </h3>
       <dl id="faq" className={styles.faqList}>
         {faqItems.map(
           ({ question, answer, isExpanded, id, onExpandAnswer }) => (

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Hero.module.scss b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Hero.module.scss
@@ -44,6 +44,13 @@
     padding: 0 tokens.$layout-md;
   }
 
+  h2 {
+    font: tokens.$text-title-sm;
+    font-family: var(--font-inter);
+    font-weight: 400;
+    line-height: 1.25em;
+  }
+
   p {
     font: tokens.$text-body-lg;
   }

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Hero.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Hero.tsx
@@ -17,11 +17,11 @@ export const Hero = (props: LandingPageProps) => {
     <header className={styles.hero}>
       <div className={styles.heroContent}>
         <div className={styles.heroTitle}>
-          <h1>
+          <h2>
             {props.l10n.getFragment("landing-redesign-hero-title", {
               elems: { b: <b /> },
             })}
-          </h1>
+          </h2>
           <p>{props.l10n.getString("landing-redesign-hero-lead")}</p>
         </div>
         <div className={styles.heroCta}>

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/LogoBlock.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/LogoBlock.tsx
@@ -73,9 +73,9 @@ export const LogoBlock = ({ l10n }: { l10n: ExtendedReactLocalization }) => {
   return (
     <div className={styles.content}>
       <div className={styles.header}>
-        <h2>
+        <h3>
           <b>{l10n.getString("landing-redesign-logo-block-title")}</b>
-        </h2>
+        </h3>
         <p>{l10n.getString("landing-redesign-logo-block-description")}</p>
       </div>
       <div className={styles.logosWrapper}>

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/PricingPlans.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/PricingPlans.tsx
@@ -17,13 +17,13 @@ export const PricingPlans = (props: LandingPageProps) => {
   return (
     <div className={styles.content}>
       <div className={styles.header}>
-        <h2 id={headingId}>
+        <h3 id={headingId}>
           <b>
             {props.l10n.getString(
               "landing-redesign-pricing-plans-section-title",
             )}
           </b>
-        </h2>
+        </h3>
         <p>
           {props.l10n.getString(
             "landing-redesign-pricing-plans-section-description",