Change my-data item cards from h3 to h2 so headings follow in order

Author: webstackdev

axe-results-violations.json

@@ -23,9 +23,9 @@
         "all": [],
         "none": [],
         "impact": "moderate",
-        "html": "<h3 class=\"text-xl font-semibold mb-3 group-hover:text-primary transition-colors\" data-astro-cid-72nlo57a=\"\"> Self-Service Infrastructure for Product Teams </h3>",
+        "html": "<h3 class=\"inline-flex items-center gap-2 whitespace-nowrap text-xl text-page-inverse font-bold transition-colors no-underline\">",
         "target": [
-          "article:nth-child(1) > .rounded-xl.hover\\:-translate-y-2.focus-visible\\:shadow-none > .p-6.min-h-0.flex-1 > div:nth-child(1) > h3"
+          ".md\\:flex-row.shadow-sm[href$=\"articles\"] > .p-6.grow.flex-col > .mb-4.gap-4.relative > h3"
         ],
         "failureSummary": "Fix any of the following:\n  Heading order invalid"
       }

src/components/Search/SearchEmptyState/index.astro

@@ -57,10 +57,10 @@ const items = [
         </div>
         <div class="p-6 flex flex-col justify-center grow">
           <div class="relative flex items-center gap-4 mb-4">
-            <h3 class="inline-flex items-center gap-2 whitespace-nowrap text-xl text-page-inverse font-bold transition-colors no-underline">
+            <h2 class="inline-flex items-center gap-2 whitespace-nowrap text-xl text-page-inverse font-bold transition-colors no-underline">
               <Icon icon={item.icon} size={6} />
               {item.title}
-            </h3>
+            </h2>
           </div>
           <p class="relative text-content-offset text-sm leading-relaxed no-underline">{item.text}</p>
           <div class="relative mt-6 flex pointer-events-none">