a11y: landing page headings adjustments (#24295)

* Adjust heading level and only heading with intro text

* Adjust heading level

* Adjust code example and guide card heading levels

* Adjust tests for new heading levels

* Adjust rendering test for new heading levels

components/landing/ArticleList.tsx

@@ -25,7 +25,7 @@ export const ArticleList = ({
     <>
       {title && (
         <div className="mb-4 d-flex flex-items-baseline">
-          <h3 className={cx('f4 text-semibold')}>{title}</h3>
+          <h2 className={cx('f4 text-semibold')}>{title}</h2>
           {viewAllHref && (
             <Link
               href={viewAllHref}
@@ -60,13 +60,23 @@ export const ArticleList = ({
                   href={link.href}
                   className="py-3"
                   title={
-                    <h4 data-testid="link-with-intro-title">
+                    !link.hideIntro && link.intro ? (
+                      <h3 className="f4" data-testid="link-with-intro-title">
                         <span
                           dangerouslySetInnerHTML={
                             link.fullTitle ? { __html: link.fullTitle } : { __html: link.title }
                           }
                         />
-                    </h4>
+                      </h3>
+                    ) : (
+                      <span
+                        className="f4 text-bold d-block"
+                        data-testid="link-with-intro-title"
+                        dangerouslySetInnerHTML={
+                          link.fullTitle ? { __html: link.fullTitle } : { __html: link.title }
+                        }
+                      ></span>
+                    )
                   }
                 >
                   {!link.hideIntro && link.intro && (

components/landing/CodeExampleCard.tsx

@@ -14,7 +14,7 @@ export const CodeExampleCard = ({ example }: Props) => {
       href={`https://github.com/${example.href}`}
     >
       <div className="p-4">
-        <h4 dangerouslySetInnerHTML={{ __html: example.title }} />
+        <h3 className="f4" dangerouslySetInnerHTML={{ __html: example.title }} />
         <p
           className="mt-2 mb-4 color-fg-muted"
           dangerouslySetInnerHTML={{ __html: example.description }}

components/landing/GuideCard.tsx

@@ -13,7 +13,7 @@ export const GuideCard = ({ guide }: Props) => {
         className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5"
         href={guide.href}
       >
-        <h2 dangerouslySetInnerHTML={{ __html: guide.title }} />
+        <h3 className="f2" dangerouslySetInnerHTML={{ __html: guide.title }} />
         <p
           className="mt-2 mb-4 color-fg-muted"
           dangerouslySetInnerHTML={{ __html: guide.intro || '' }}

components/landing/ProductArticlesList.tsx

@@ -34,11 +34,11 @@ const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
 
   return (
     <div className="col-12 col-lg-4 mb-6 height-full">
-      <h4 className="mb-3">
+      <h3 className="mb-3 f4">
         <Link className="color-unset" href={treeNode.href}>
           {treeNode.renderedFullTitle}
         </Link>
-      </h4>
+      </h3>
 
       <ActionList
         {...{ as: 'ul' }}

tests/content/featured-links.js

@@ -38,13 +38,13 @@ describe('featuredLinks', () => {
       const $featuredLinks = $('[data-testid=article-list] a')
       expect($featuredLinks).toHaveLength(9)
       expect($featuredLinks.eq(0).attr('href')).toBe('/en/get-started/quickstart/set-up-git')
-      expect($featuredLinks.eq(0).children('h4').text().startsWith('Set up Git')).toBe(true)
+      expect($featuredLinks.eq(0).children('h3').text().startsWith('Set up Git')).toBe(true)
       expect($featuredLinks.eq(0).children('p').text().startsWith('At the heart of GitHub')).toBe(
         true
       )
 
       expect($featuredLinks.eq(8).attr('href')).toBe('/en/pages')
-      expect($featuredLinks.eq(8).children('h4').text().startsWith('GitHub Pages')).toBe(true)
+      expect($featuredLinks.eq(8).children('h3').text().startsWith('GitHub Pages')).toBe(true)
       expect($featuredLinks.eq(8).children('p').text().startsWith('You can create a website')).toBe(
         true
       )
@@ -74,7 +74,7 @@ describe('featuredLinks', () => {
       expect($featuredLinks.eq(0).attr('href')).toBe(
         `/en/enterprise-server@${enterpriseServerReleases.latest}/github/getting-started-with-github/githubs-products`
       )
-      expect($featuredLinks.eq(0).children('h4').text().startsWith("GitHub's products")).toBe(true)
+      expect($featuredLinks.eq(0).children('h3').text().startsWith("GitHub's products")).toBe(true)
       expect(
         $featuredLinks
           .eq(0)

tests/rendering/server.js

@@ -810,7 +810,7 @@ describe('GitHub Enterprise URLs', () => {
   test('renders the Enterprise Admin category homepage', async () => {
     const adminPath = `/en/enterprise-server@${enterpriseServerReleases.latest}/admin`
     const $ = await getDOM(adminPath)
-    expect($(`h3 ~ a[href="${adminPath}/guides"]`).length).toBe(1)
+    expect($(`h2 ~ a[href="${adminPath}/guides"]`).length).toBe(1)
     expect($('h2 a[href="#all-docs"]').length).toBe(1)
   })