Move Service list view page cards to H2 from H3

Author: webstackdev

axe-results-violations.json

@@ -1,43 +1,33 @@
 [
   {
-    "id": "landmark-unique",
+    "id": "heading-order",
     "impact": "moderate",
     "tags": [
       "cat.semantics",
       "best-practice"
     ],
-    "description": "Ensure landmarks are unique",
-    "help": "Landmarks should have a unique role or role/label/title (i.e. accessible name) combination",
-    "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright",
+    "description": "Ensure the order of headings is semantically correct",
+    "help": "Heading levels should only increase by one",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/heading-order?application=playwright",
     "nodes": [
       {
         "any": [
           {
-            "id": "landmark-is-unique",
-            "data": {
-              "role": "search",
-              "accessibleText": "site search"
-            },
-            "relatedNodes": [
-              {
-                "html": "<form data-search-form=\"\" class=\"relative\" role=\"search\" aria-label=\"Site search\" data-astro-cid-yeu7u2zk=\"\" data-search-listener=\"true\">",
-                "target": [
-                  ".max-w-lg > form[data-search-form=\"\"][role=\"search\"][aria-label=\"Site search\"]"
-                ]
-              }
-            ],
+            "id": "heading-order",
+            "data": null,
+            "relatedNodes": [],
             "impact": "moderate",
-            "message": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
+            "message": "Heading order invalid"
           }
         ],
         "all": [],
         "none": [],
         "impact": "moderate",
-        "html": "<form data-search-form=\"\" data-state=\"closed\" class=\"flex items-center w-full h-(--header-icon-size) overflow-visible rounded-full data-[state=open]:bg-page-base data-[state=open]:shadow-elevated\" role=\"search\" aria-label=\"Site search\" data-search-listener=\"true\">",
+        "html": "<h3 class=\"text-xl font-bold\">Full Workstream</h3>",
         "target": [
-          ".overflow-visible"
+          ".service-card-header--default > h3"
         ],
-        "failureSummary": "Fix any of the following:\n  The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
+        "failureSummary": "Fix any of the following:\n  Heading order invalid"
       }
     ]
   }

src/components/Pages/Services/index.astro

@@ -120,7 +120,7 @@ const splitH2Sections = (html: string): string[] => {
                     Most Popular
                   </span>
                 )}
-                <h3 class="text-xl font-bold">{service.data.title}</h3>
+                <h2 class="text-xl font-bold">{service.data.title}</h2>
                 <p
                   class:list={[
                     'service-card-description sm:mt-2 text-sm leading-relaxed text-content-offset',