From 258d687bcc2c427c5cef74b67dba84451a8018da Mon Sep 17 00:00:00 2001
From: Gagan Bhullar <g.deepsingh1@gmail.com>
Date: Wed, 7 Aug 2024 14:41:08 -0600
Subject: [PATCH] fix(ui): render certification on profile page in ul (#55576)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 .../profile/components/certifications.css     |  7 +++
 .../profile/components/certifications.tsx     | 56 +++++++++++--------
 2 files changed, 40 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/profile/components/certifications.css

diff --git a/client/src/components/profile/components/certifications.css b/client/src/components/profile/components/certifications.css
new file mode 100644
index 00000000000..875a0d95589
--- /dev/null
+++ b/client/src/components/profile/components/certifications.css
@@ -0,0 +1,7 @@
+.profile-certifications {
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+}
diff --git a/client/src/components/profile/components/certifications.tsx b/client/src/components/profile/components/certifications.tsx
index 35252dc9902..a8395bfc5b1 100644
--- a/client/src/components/profile/components/certifications.tsx
+++ b/client/src/components/profile/components/certifications.tsx
@@ -6,6 +6,7 @@ import { createSelector } from 'reselect';
 import { certificatesByNameSelector } from '../../../redux/selectors';
 import type { CurrentCert } from '../../../redux/prop-types';
 import { FullWidthRow, Spacer, ButtonLink } from '../../helpers';
+import './certifications.css';
 
 const mapStateToProps = (
   state: Record<string, unknown>,
@@ -45,7 +46,7 @@ interface CertButtonProps {
 function CertButton({ username, cert }: CertButtonProps): JSX.Element {
   const { t } = useTranslation();
   return (
-    <>
+    <li>
       <ButtonLink
         block
         size='large'
@@ -56,7 +57,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
         })}
       </ButtonLink>
       <Spacer size='small' />
-    </>
+    </li>
   );
 }
 
@@ -69,36 +70,45 @@ function Certificates({
 }: CertificationProps): JSX.Element {
   const { t } = useTranslation();
   return (
-    <FullWidthRow className='certifications'>
-      <h2>{t('profile.fcc-certs')}</h2>
+    <FullWidthRow className='profile-certifications'>
+      <h2 id='fcc-certifications'>{t('profile.fcc-certs')}</h2>
       <br />
       {hasModernCert && currentCerts ? (
-        currentCerts
-          .filter(({ show }) => show)
-          .map(cert => (
-            <CertButton key={cert.certSlug} cert={cert} username={username} />
-          ))
+        <ul aria-labelledby='fcc-certifications'>
+          {currentCerts
+            .filter(({ show }) => show)
+            .map(cert => (
+              <CertButton key={cert.certSlug} cert={cert} username={username} />
+            ))}
+        </ul>
       ) : (
         <p className='text-center'>{t('profile.no-certs')}</p>
       )}
-      {hasLegacyCert ? (
+      {hasLegacyCert && (
         <div>
           <Spacer size='medium' />
-          <h3>{t('settings.headings.legacy-certs')}</h3>
-          <Spacer size='medium' />
-          {legacyCerts &&
-            legacyCerts
-              .filter(({ show }) => show)
-              .map(cert => (
-                <CertButton
-                  key={cert.certSlug}
-                  cert={cert}
-                  username={username}
-                />
-              ))}
+          <h3 id='legacy-certifications'>
+            {t('settings.headings.legacy-certs')}
+          </h3>
           <Spacer size='medium' />
+          {legacyCerts && (
+            <>
+              <ul aria-labelledby='legacy-certifications'>
+                {legacyCerts
+                  .filter(({ show }) => show)
+                  .map(cert => (
+                    <CertButton
+                      key={cert.certSlug}
+                      cert={cert}
+                      username={username}
+                    />
+                  ))}
+              </ul>
+              <Spacer size='medium' />
+            </>
+          )}
         </div>
-      ) : null}
+      )}
       <hr />
     </FullWidthRow>
   );