Change case studies and tags item cards from h3 to h2 so headings follow in order

Author: webstackdev

axe-results-incomplete.json

@@ -1,174 +1 @@
-[
-  {
-    "id": "identical-links-same-purpose",
-    "impact": "minor",
-    "tags": [
-      "cat.semantics",
-      "wcag2aaa",
-      "wcag249"
-    ],
-    "description": "Ensure that links with the same accessible name serve a similar purpose",
-    "help": "Links with the same name must have a similar purpose",
-    "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/identical-links-same-purpose?application=playwright",
-    "nodes": [
-      {
-        "any": [],
-        "all": [
-          {
-            "id": "identical-links-same-purpose",
-            "data": {
-              "name": "share on x",
-              "urlProps": {
-                "protocol": "http:",
-                "hostname": "twitter.com",
-                "port": "",
-                "pathname": "/intent/tweet/",
-                "search": {
-                  "text": "Demo Page - This is just a demo page to show how things work on the site",
-                  "url": "/articles/demo"
-                },
-                "hash": "",
-                "filename": ""
-              }
-            },
-            "relatedNodes": [
-              {
-                "html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://twitter.com/...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on X\" data-share=\"x\">",
-                "target": [
-                  ".gap-6.flex-col.flex > .mx-6.md\\:items-center.md\\:flex-row > .sm\\:pl-12.md\\:flex-1.w-full > social-share-element > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-x.hover\\:bg-x-active[data-share=\"x\"]"
-                ]
-              }
-            ],
-            "impact": "minor",
-            "message": "Check that links have the same purpose, or are intentionally ambiguous."
-          }
-        ],
-        "none": [],
-        "impact": "minor",
-        "html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://twitter.com/...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on X\" data-share=\"x\">",
-        "target": [
-          "social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-x.hover\\:bg-x-active[data-share=\"x\"]"
-        ],
-        "failureSummary": "Fix all of the following:\n  Check that links have the same purpose, or are intentionally ambiguous."
-      },
-      {
-        "any": [],
-        "all": [
-          {
-            "id": "identical-links-same-purpose",
-            "data": {
-              "name": "share on linkedin",
-              "urlProps": {
-                "protocol": "http:",
-                "hostname": "www.linkedin.com",
-                "port": "",
-                "pathname": "/sharing/share-offsite/",
-                "search": {
-                  "url": "/articles/demo"
-                },
-                "hash": "",
-                "filename": ""
-              }
-            },
-            "relatedNodes": [
-              {
-                "html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.linkedin...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on LinkedIn\" data-share=\"linkedin\">",
-                "target": [
-                  ".gap-6.flex-col.flex > .mx-6.md\\:items-center.md\\:flex-row > .sm\\:pl-12.md\\:flex-1.w-full > social-share-element > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-linkedin.hover\\:bg-linkedin-active[data-share=\"linkedin\"]"
-                ]
-              }
-            ],
-            "impact": "minor",
-            "message": "Check that links have the same purpose, or are intentionally ambiguous."
-          }
-        ],
-        "none": [],
-        "impact": "minor",
-        "html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.linkedin...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on LinkedIn\" data-share=\"linkedin\">",
-        "target": [
-          "social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-linkedin.hover\\:bg-linkedin-active[data-share=\"linkedin\"]"
-        ],
-        "failureSummary": "Fix all of the following:\n  Check that links have the same purpose, or are intentionally ambiguous."
-      },
-      {
-        "any": [],
-        "all": [
-          {
-            "id": "identical-links-same-purpose",
-            "data": {
-              "name": "share on bluesky",
-              "urlProps": {
-                "protocol": "http:",
-                "hostname": "bsky.app",
-                "port": "",
-                "pathname": "/intent/compose/",
-                "search": {
-                  "text": "Demo Page - This is just a demo page to show how things work on the site /articles/demo"
-                },
-                "hash": "",
-                "filename": ""
-              }
-            },
-            "relatedNodes": [
-              {
-                "html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://bsky.app/int...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Bluesky\" data-share=\"bluesky\">",
-                "target": [
-                  ".gap-6.flex-col.flex > .mx-6.md\\:items-center.md\\:flex-row > .sm\\:pl-12.md\\:flex-1.w-full > social-share-element > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-bluesky.hover\\:bg-bluesky-active[data-share=\"bluesky\"]"
-                ]
-              }
-            ],
-            "impact": "minor",
-            "message": "Check that links have the same purpose, or are intentionally ambiguous."
-          }
-        ],
-        "none": [],
-        "impact": "minor",
-        "html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://bsky.app/int...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Bluesky\" data-share=\"bluesky\">",
-        "target": [
-          "social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-bluesky.hover\\:bg-bluesky-active[data-share=\"bluesky\"]"
-        ],
-        "failureSummary": "Fix all of the following:\n  Check that links have the same purpose, or are intentionally ambiguous."
-      },
-      {
-        "any": [],
-        "all": [
-          {
-            "id": "identical-links-same-purpose",
-            "data": {
-              "name": "share on reddit",
-              "urlProps": {
-                "protocol": "http:",
-                "hostname": "reddit.com",
-                "port": "",
-                "pathname": "/submit/",
-                "search": {
-                  "url": "/articles/demo",
-                  "title": "Demo Page"
-                },
-                "hash": "",
-                "filename": ""
-              }
-            },
-            "relatedNodes": [
-              {
-                "html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://reddit.com/s...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Reddit\" data-share=\"reddit\">",
-                "target": [
-                  ".gap-6.flex-col.flex > .mx-6.md\\:items-center.md\\:flex-row > .sm\\:pl-12.md\\:flex-1.w-full > social-share-element > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-reddit.hover\\:bg-reddit-active[data-share=\"reddit\"]"
-                ]
-              }
-            ],
-            "impact": "minor",
-            "message": "Check that links have the same purpose, or are intentionally ambiguous."
-          }
-        ],
-        "none": [],
-        "impact": "minor",
-        "html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://reddit.com/s...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Reddit\" data-share=\"reddit\">",
-        "target": [
-          "social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-reddit.hover\\:bg-reddit-active[data-share=\"reddit\"]"
-        ],
-        "failureSummary": "Fix all of the following:\n  Check that links have the same purpose, or are intentionally ambiguous."
-      }
-    ]
-  }
-]
+[]

axe-results-violations.json

@@ -1,72 +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": "region",
-              "accessibleText": "with title link"
-            },
-            "relatedNodes": [
-              {
-                "html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-demo/index-title\" data-astro-cid-kfjqoxel=\"\">",
-                "target": [
-                  "carousel-slider[data-carousel-navigation-mode=\"bounded\"] > .py-8.max-w-6xl.lg\\:px-8 > .embla[role=\"region\"][data-astro-cid-kfjqoxel=\"\"]"
-                ]
-              }
-            ],
+            "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": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-demo/index-title\" data-astro-cid-kfjqoxel=\"\">",
+        "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>",
         "target": [
-          "carousel-slider[data-carousel-navigation-mode=\"wrap\"] > .py-8.max-w-6xl.lg\\:px-8 > .embla[role=\"region\"][data-astro-cid-kfjqoxel=\"\"]"
+          "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"
         ],
-        "failureSummary": "Fix any of the following:\n  The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
-      },
-      {
-        "any": [
-          {
-            "id": "landmark-is-unique",
-            "data": {
-              "role": "region",
-              "accessibleText": "share this article"
-            },
-            "relatedNodes": [
-              {
-                "html": "<section class=\"rounded-lg bg-page-offset flex flex-col md:flex-row items-start md:items-center p-6 mx-6\" aria-labelledby=\"social-share-icon-bank-6dq3mht114y-heading\">",
-                "target": [
-                  ".gap-6.flex-col.flex > .mx-6.md\\:items-center.md\\:flex-row"
-                ]
-              }
-            ],
-            "impact": "moderate",
-            "message": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
-          }
-        ],
-        "all": [],
-        "none": [],
-        "impact": "moderate",
-        "html": "<section class=\"rounded-lg bg-page-offset flex flex-col md:flex-row items-start md:items-center p-6 mx-6\" aria-labelledby=\"social-share-icon-bank-bqai9oray59-heading\">",
-        "target": [
-          ".markdown-content__prose > .mx-6.md\\:items-center.md\\:flex-row"
-        ],
-        "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/content/articles/demo/index.mdx

@@ -2226,24 +2226,6 @@ graph TD
   url="https://codepen.io/webstackdev/pen/JaEgxM"
 />
 
-## Social Shares
-
-Add social sharing buttons for the article. The social image is auto-generated, and can be passed as an optional param to override the generated version.
-
-```markdown
-<Shares
-  title="Demo Page"
-  description="This is just a demo page to show how things work on the site"
-  url="/articles/demo"
-/>
-```
-
-<Shares
-  title="Demo Page"
-  description="This is just a demo page to show how things work on the site"
-  url="/articles/demo"
-/>
-
 ## Tables (Markdown)
 
 ```markdown

src/pages/case-studies/index.astro

@@ -65,9 +65,9 @@ const path = '/case-studies'
 
               <div class="flex flex-1 min-h-0 flex-col justify-between p-6">
                 <div>
-                  <h3 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
+                  <h2 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
                     {caseStudy.data.title}
-                  </h3>
+                  </h2>
 
                   {caseStudy.data.description && (
                     <p class="text-content-offset leading-relaxed text-sm">

src/pages/tags/[tag].astro

@@ -172,9 +172,9 @@ const paginatedContent = sortedContent.slice(startIndex, endIndex)
                         </time>
                       </div>
 
-                      <h3 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
+                      <h2 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
                         {item.data.title}
-                      </h3>
+                      </h2>
 
                       {item.data.description && (
                         <p class="text-content-offset leading-relaxed text-sm">