fix: heading strucuture fails WCAG 2.2AA (EddieHubCommunity#9631) (Ed…

…dieHubCommunity#9719) * fix: heading strucuture fails WCAG 2.2AA (EddieHubCommunity#9631) * issue fix EddieHubCommunity#9581: heading strrucutre fails WCAG 2.2AA- skipped heading level Restructure the document headings in DataList.js to ensure that heading levels are not skipped. * issue fix #9581_ heading structure fails WCAG 2.2AA- skipped heading changed all <h3> to <h2> --------- Co-authored-by: Eddie Jaoude <[email protected]> * fix: undo file changes * fix: failing tests * fix: search tests for h2 changes --------- Co-authored-by: Jen <[email protected]>
malay44 · Nov 9, 2023 · 64aacbc · 64aacbc
1 parent ba8e72e
commit 64aacbc
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 28 deletions.
diff --git a/components/DataList.js b/components/DataList.js
@@ -2,9 +2,9 @@ export default function DataList({ title, subtitle, data }) {
   return (
     <div>
       <div className="px-4 sm:px-0">
-        <h3 className="text-base font-semibold leading-7 text-primary-high dark:text-primary-low">
+        <h2 className="text-base font-semibold leading-7 text-primary-high dark:text-primary-low">
           {title}
-        </h3>
+        </h2>
         <p className="mt-1 max-w-2xl text-sm leading-6 text-primary-high dark:text-primary-low">
           {subtitle}
         </p>

diff --git a/components/user/UserHorizontal.js b/components/user/UserHorizontal.js
@@ -18,9 +18,9 @@ export default function UserHorizontal({ profile, input }) {
         />
         <div className="flex-1 wrap">
           <div className="flex items-center space-x-3">
-            <h3 className="text-xl font-medium text-gray-900">
+            <h2 className="text-xl font-medium text-gray-900">
               {profile.username}
-            </h3>
+            </h2>
           </div>
           <Markdown
             disallowedElements={["a"]}

diff --git a/components/user/UserLinks.js b/components/user/UserLinks.js
@@ -24,9 +24,9 @@ export default function UserLinks({ BASE_URL, links, username }) {
                   key={name}
                 >
                   <div className="-ml-2 -mt-2 flex flex-wrap items-baseline">
-                    <h3 className="ml-2 mt-2 text-lg font-medium leading-6 dark:text-primary-low text-primary-high">
+                    <h2 className="ml-2 mt-2 text-lg font-medium leading-6 dark:text-primary-low text-primary-high">
                       {name}
-                    </h3>
+                    </h2>
                     <p className="ml-2 mt-1 truncate text-sm dark:text-primary-low-high text-primary-medium">
                       ({buckets[name].length})
                     </p>

diff --git a/components/user/UserMilestone.js b/components/user/UserMilestone.js
@@ -36,14 +36,14 @@ export default function UserMilestone({ milestone, isGoal, manage }) {
         )}
         <div className="flex-1 space-y-1">
           <div className="flex items-center justify-between">
-            <h3
+            <h2
               className={classNames(
                 isGoal && "opacity-70",
                 "text-sm font-medium",
               )}
             >
               <span>{milestone.title}</span>
-            </h3>
+            </h2>
             <p className={`text-sm flex gap-2 items-center ${colors}`}>
               {date}
               {milestone.url && (

diff --git a/components/user/UserTestimonials.js b/components/user/UserTestimonials.js
@@ -28,9 +28,9 @@ export default function UserTestimonials({ testimonials, BASE_URL }) {
                 />
               </div>
               <div className="flex-1 p-6 sm:hidden">
-                <h3 className="font-medium dark:text-primary-medium-low text-primary-high">
+                <h2 className="font-medium dark:text-primary-medium-low text-primary-high">
                   {testimonial.title}
-                </h3>
+                </h2>
                 <Link
                   href={`${BASE_URL}/${testimonial.username}`}
                   target="_blank"

diff --git a/tests/profile.spec.js b/tests/profile.spec.js
@@ -27,7 +27,7 @@ test("Tabs change correctly", async ({ page }) => {
   );
   await expect(page.locator("main")).not.toHaveText(/Top Teacher Award/);
   await page.getByRole("button", { name: /Milestones/ }).click();
-  await expect(page.locator("h3").first()).toHaveText(/Top Teacher Award/);
+  await expect(page.locator("h2").first()).toHaveText(/Top Teacher Award/);
 });
 
 test("Tabs have deep linking test milestone", async ({ page }) => {
@@ -36,7 +36,7 @@ test("Tabs have deep linking test milestone", async ({ page }) => {
   await expect(
     page.getByRole("button", { name: /Milestones/ }),
   ).toHaveAttribute("class", /border-tertiary-medium/);
-  await expect(page.locator("h3").first()).toHaveText(/Top Teacher Award/);
+  await expect(page.locator("h2").first()).toHaveText(/Top Teacher Award/);
 });
 
 test("Tabs have deep linking test repos", async ({ page }) => {
@@ -69,24 +69,24 @@ test("Profile views increase", async ({ page }) => {
   expect(startingViews.views).toEqual(endingViews.views - 3);
 });
 
-test("Link clicks increase", async ({page}) => {
-
+test("Link clicks increase", async ({ page }) => {
   await connectMongo();
-  await page.goto("/eddiejaoude");
-
-  const startingLinks = await Link.find({ username: "eddiejaoude" })
-  const startingLink = startingLinks[0]
-
-  const previousClickCount = startingLink.clicks; 
+  const username = "_test-profile-user-6";
+  await page.goto(username);
 
-  const profileLink = page.locator('a').filter({ hasText: startingLink.name })
+  const startingLink = await Link.findOne({ username });
+  const profileLink = page.locator("a").filter({ hasText: startingLink.name });
+  await profileLink.click();
+  await page.waitForTimeout(1000);
 
+  const previousClickCount = startingLink.clicks;
   await profileLink.click();
   await page.waitForTimeout(1000);
-  const currentLink = await Link.findOne({ name: startingLink.name, username: "eddiejaoude" })
-  const updateCurrentLinkClicks = currentLink.clicks
-
-  expect(updateCurrentLinkClicks).toEqual((previousClickCount + 1));
+
+  const currentLink = await Link.findOne({ username });
+  const updateCurrentLinkClicks = currentLink.clicks;
+
+  expect(updateCurrentLinkClicks).toEqual(previousClickCount + 2); // it is clicked twice above
 });
 
 test("Profile not found redirects to search page with error message", async ({

diff --git a/tests/search.spec.js b/tests/search.spec.js
@@ -71,13 +71,13 @@ test("Search term persistence after navigating back", async ({ page }) => {
   await page.goto("/search");
   const input = page.locator("[name='keyword']");
   const searchTerm = "_test-profile-user-1";
-  const searchName = "Test User Name 1"
+  const searchName = "Test User Name 1";
   await input.fill(searchTerm);
 
   // 2. Navigate to profile
   await expect(page).toHaveURL(`/search?userSearchParam=${searchTerm}`);
   await page.waitForLoadState("networkidle");
-  await page.locator(`a h3:has-text('${searchTerm}')`).click();
+  await page.locator(`a h2:has-text('${searchTerm}')`).click();
   await page.waitForURL(`/${searchTerm}`);
 
   // 3. Check if the profile is displayed
@@ -109,7 +109,7 @@ test("find the profile after providing concise name", async ({ page }) => {
   await input.fill(searchTerm);
 
   // 4. select and click on the profile by matching name string
-  const profileHeader = page.locator(`h3:has-text('${searchTerm}')`);
+  const profileHeader = page.locator(`h2:has-text('${searchTerm}')`);
   const profileHeaderText = await profileHeader.innerText();
   await expect(profileHeaderText).toContain(searchTerm);
 });