fix(a11y): changing from div and span elements to ul and li (#52345)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/src/components/Footer/__snapshots__/footer.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`<Footer /> matches snapshot 1`] = `
   >
     <div
       className="footer-desc-col"
-      data-playwright-test-label="footer-desc-col"
     >
       <p>
         footer.tax-exempt-status
@@ -38,14 +37,15 @@ exports[`<Footer /> matches snapshot 1`] = `
     >
       <h2
         className="col-header"
+        id="trending-guides"
       >
         footer.trending-guides
       </h2>
-      <div
+      <ul
+        aria-labelledby="trending-guides"
         className="trending-guides-articles"
-        data-playwright-test-label="trending-guides-articles"
       >
-        <span>
+        <li>
           <a
             href="trending:article0link"
             rel="noopener noreferrer"
@@ -53,8 +53,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article0title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article1link"
             rel="noopener noreferrer"
@@ -62,8 +62,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article1title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article2link"
             rel="noopener noreferrer"
@@ -71,8 +71,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article2title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article3link"
             rel="noopener noreferrer"
@@ -80,8 +80,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article3title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article4link"
             rel="noopener noreferrer"
@@ -89,8 +89,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article4title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article5link"
             rel="noopener noreferrer"
@@ -98,8 +98,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article5title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article6link"
             rel="noopener noreferrer"
@@ -107,8 +107,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article6title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article7link"
             rel="noopener noreferrer"
@@ -116,8 +116,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article7title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article8link"
             rel="noopener noreferrer"
@@ -125,8 +125,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article8title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article9link"
             rel="noopener noreferrer"
@@ -134,8 +134,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article9title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article10link"
             rel="noopener noreferrer"
@@ -143,8 +143,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article10title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article11link"
             rel="noopener noreferrer"
@@ -152,8 +152,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article11title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article12link"
             rel="noopener noreferrer"
@@ -161,8 +161,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article12title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article13link"
             rel="noopener noreferrer"
@@ -170,8 +170,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article13title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article14link"
             rel="noopener noreferrer"
@@ -179,8 +179,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article14title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article15link"
             rel="noopener noreferrer"
@@ -188,8 +188,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article15title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article16link"
             rel="noopener noreferrer"
@@ -197,8 +197,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article16title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article17link"
             rel="noopener noreferrer"
@@ -206,8 +206,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article17title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article18link"
             rel="noopener noreferrer"
@@ -215,8 +215,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article18title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article19link"
             rel="noopener noreferrer"
@@ -224,8 +224,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article19title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article20link"
             rel="noopener noreferrer"
@@ -233,8 +233,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article20title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article21link"
             rel="noopener noreferrer"
@@ -242,8 +242,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article21title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article22link"
             rel="noopener noreferrer"
@@ -251,8 +251,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article22title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article23link"
             rel="noopener noreferrer"
@@ -260,8 +260,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article23title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article24link"
             rel="noopener noreferrer"
@@ -269,8 +269,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article24title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article25link"
             rel="noopener noreferrer"
@@ -278,8 +278,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article25title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article26link"
             rel="noopener noreferrer"
@@ -287,8 +287,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article26title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article27link"
             rel="noopener noreferrer"
@@ -296,8 +296,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article27title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article28link"
             rel="noopener noreferrer"
@@ -305,8 +305,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article28title
           </a>
-        </span>
-        <span>
+        </li>
+        <li>
           <a
             href="trending:article29link"
             rel="noopener noreferrer"
@@ -314,8 +314,8 @@ exports[`<Footer /> matches snapshot 1`] = `
           >
             trending:article29title
           </a>
-        </span>
-      </div>
+        </li>
+      </ul>
     </div>
   </div>
   <div

client/src/components/Footer/footer.css

@@ -52,10 +52,14 @@
 }
 
 .trending-guides-articles {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
   grid-column-gap: 3rem;
   grid-row-gap: 0.5rem;
+  white-space: pre;
 }
 
 @media (max-width: 1400px) {
@@ -70,10 +74,6 @@
   }
 }
 
-.trending-guides-articles {
-  white-space: pre;
-}
-
 .footer-row {
   margin: 0;
 }

client/src/components/Footer/index.tsx

@@ -9,10 +9,7 @@ function Footer(): JSX.Element {
   return (
     <footer className='site-footer'>
       <div className='footer-top'>
-        <div
-          className='footer-desc-col'
-          data-playwright-test-label='footer-desc-col'
-        >
+        <div className='footer-desc-col'>
           <p>{t('footer.tax-exempt-status')}</p>
           <p>{t('footer.mission-statement')}</p>
           <p>{t('footer.donation-initiatives')}</p>
@@ -27,163 +24,164 @@ function Footer(): JSX.Element {
           </p>
         </div>
         <div className='trending-guides'>
-          <h2 className='col-header'>{t('footer.trending-guides')}</h2>
-          <div
+          <h2 id='trending-guides' className='col-header'>
+            {t('footer.trending-guides')}
+          </h2>
+          <ul
+            aria-labelledby='trending-guides'
             className='trending-guides-articles'
-            data-playwright-test-label='trending-guides-articles'
           >
-            {/* the span elements were add so the link can be inline and its text would be the only active target */}
-            <span>
+            <li>
               <Link external={false} to={t('trending:article0link')}>
                 {t('trending:article0title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article1link')}>
                 {t('trending:article1title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article2link')}>
                 {t('trending:article2title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article3link')}>
                 {t('trending:article3title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article4link')}>
                 {t('trending:article4title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article5link')}>
                 {t('trending:article5title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article6link')}>
                 {t('trending:article6title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article7link')}>
                 {t('trending:article7title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article8link')}>
                 {t('trending:article8title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article9link')}>
                 {t('trending:article9title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article10link')}>
                 {t('trending:article10title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article11link')}>
                 {t('trending:article11title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article12link')}>
                 {t('trending:article12title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article13link')}>
                 {t('trending:article13title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article14link')}>
                 {t('trending:article14title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article15link')}>
                 {t('trending:article15title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article16link')}>
                 {t('trending:article16title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article17link')}>
                 {t('trending:article17title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article18link')}>
                 {t('trending:article18title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article19link')}>
                 {t('trending:article19title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article20link')}>
                 {t('trending:article20title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article21link')}>
                 {t('trending:article21title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article22link')}>
                 {t('trending:article22title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article23link')}>
                 {t('trending:article23title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article24link')}>
                 {t('trending:article24title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article25link')}>
                 {t('trending:article25title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article26link')}>
                 {t('trending:article26title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article27link')}>
                 {t('trending:article27title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article28link')}>
                 {t('trending:article28title')}
               </Link>
-            </span>
-            <span>
+            </li>
+            <li>
               <Link external={false} to={t('trending:article29link')}>
                 {t('trending:article29title')}
               </Link>
-            </span>
-          </div>
+            </li>
+          </ul>
         </div>
       </div>
       <div className='footer-bottom'>

e2e/footer.spec.ts

@@ -2,6 +2,53 @@ import { test, expect } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
 import links from '../client/i18n/locales/english/links.json';
 
+const BOTTOM_LINKS = [
+  {
+    title: translations.footer.links.about,
+    href: links.footer['about-url']
+  },
+  {
+    title: translations.footer.links.alumni,
+    href: 'https://www.linkedin.com/school/free-code-camp/people/'
+  },
+  {
+    title: translations.footer.links['open-source'],
+    href: 'https://github.com/freeCodeCamp/'
+  },
+  {
+    title: translations.footer.links.shop,
+    href: links.footer['shop-url']
+  },
+  {
+    title: translations.footer.links.support,
+    href: links.footer['support-url']
+  },
+  {
+    title: translations.footer.links.sponsors,
+    href: links.footer['sponsors-url']
+  },
+  {
+    title: translations.footer.links.honesty,
+    href: links.footer['honesty-url']
+  },
+  {
+    title: translations.footer.links.coc,
+    href: links.footer['coc-url']
+  },
+  {
+    title: translations.footer.links.privacy,
+    href: links.footer['privacy-url']
+  },
+  {
+    title: translations.footer.links.tos,
+    href: links.footer['tos-url']
+  },
+  {
+    title: translations.footer.links.copyright,
+    href: links.footer['copyright-url']
+  }
+];
+
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
@@ -34,7 +81,7 @@ test.describe('Footer Trending Guides section', () => {
     ).toBeVisible();
 
     const articles = await page
-      .getByTestId('trending-guides-articles')
+      .getByRole('list', { name: translations.footer['trending-guides'] })
       .getByRole('link')
       .all();
 
@@ -46,109 +93,21 @@ test.describe('Footer Trending Guides section', () => {
   });
 });
 
-test.describe('Footer bottom links', () => {
-  test('should display correct link to about us page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.about
-    });
+test.describe('Footer bottom section', () => {
+  test('should display the content correctly', async ({ page, isMobile }) => {
+    if (isMobile) {
+      await expect(
+        page.getByRole('heading', {
+          name: translations.footer['our-nonprofit']
+        })
+      ).toBeVisible();
+    }
 
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['about-url']);
-  });
+    for (const item of BOTTOM_LINKS) {
+      const link = page.getByRole('link', { name: item.title });
 
-  test('should display correct link to alumni page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.alumni
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute(
-      'href',
-      'https://www.linkedin.com/school/free-code-camp/people/'
-    );
-  });
-
-  test('should display correct link to open-source page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links['open-source']
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute(
-      'href',
-      'https://github.com/freeCodeCamp/'
-    );
-  });
-
-  test('should display correct link to shop', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.shop
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['shop-url']);
-  });
-
-  test('should display correct link to support page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.support
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['support-url']);
-  });
-
-  test('should display correct link to sponsors page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.sponsors
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['sponsors-url']);
-  });
-
-  test('should display correct link to honesty page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.honesty
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['honesty-url']);
-  });
-
-  test('should display correct link to coc page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.coc
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['coc-url']);
-  });
-
-  test('should display correct link to privacy page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.privacy
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['privacy-url']);
-  });
-
-  test('should display correct link to tos page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.tos
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['tos-url']);
-  });
-
-  test('should display correct link to copyright page', async ({ page }) => {
-    const link = page.getByRole('link', {
-      name: translations.footer.links.copyright
-    });
-
-    await expect(link).toBeVisible();
-    await expect(link).toHaveAttribute('href', links.footer['copyright-url']);
+      await expect(link).toBeVisible();
+      await expect(link).toHaveAttribute('href', item.href);
+    }
   });
 });