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

* issue fix #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]>
EddieHubCommunity · Nov 3, 2023 · f095519 · f095519
1 parent 9920c91
commit f095519
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 23,907 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"