Remove unsupported aria-labelledby attribute from search results header

Author: webstackdev

axe-results-incomplete.json

@@ -0,0 +1,86 @@
+[
+  {
+    "id": "aria-prohibited-attr",
+    "impact": "serious",
+    "tags": [
+      "cat.aria",
+      "wcag2a",
+      "wcag412",
+      "EN-301-549",
+      "EN-9.4.1.2",
+      "RGAAv4",
+      "RGAA-7.1.1"
+    ],
+    "description": "Ensure ARIA attributes are not prohibited for an element's role",
+    "help": "Elements must only use permitted ARIA attributes",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright",
+    "nodes": [
+      {
+        "any": [],
+        "all": [],
+        "none": [
+          {
+            "id": "aria-prohibited-attr",
+            "data": {
+              "role": null,
+              "nodeName": "header",
+              "messageKey": "noRoleSingular",
+              "prohibited": [
+                "aria-labelledby"
+              ]
+            },
+            "relatedNodes": [],
+            "impact": "serious",
+            "message": "aria-labelledby attribute is not well supported on a header with no valid role attribute."
+          }
+        ],
+        "impact": "serious",
+        "html": "<header class=\"space-y-4\" aria-labelledby=\"search-title\" data-astro-cid-yeu7u2zk=\"\">",
+        "target": [
+          ".space-y-4"
+        ],
+        "failureSummary": "Fix all of the following:\n  aria-labelledby attribute is not well supported on a header with no valid role attribute."
+      }
+    ]
+  },
+  {
+    "id": "aria-valid-attr-value",
+    "impact": "critical",
+    "tags": [
+      "cat.aria",
+      "wcag2a",
+      "wcag412",
+      "EN-301-549",
+      "EN-9.4.1.2",
+      "RGAAv4",
+      "RGAA-7.1.1"
+    ],
+    "description": "Ensure all ARIA attributes have valid values",
+    "help": "ARIA attributes must conform to valid values",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright",
+    "nodes": [
+      {
+        "any": [],
+        "all": [
+          {
+            "id": "aria-valid-attr-value",
+            "data": {
+              "messageKey": "noId",
+              "needsReview": "aria-labelledby=\"search-title\""
+            },
+            "relatedNodes": [],
+            "impact": "critical",
+            "message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"search-title\""
+          }
+        ],
+        "none": [],
+        "impact": "critical",
+        "html": "<header class=\"space-y-4\" aria-labelledby=\"search-title\" data-astro-cid-yeu7u2zk=\"\">",
+        "target": [
+          ".space-y-4"
+        ],
+        "failureSummary": "Fix all of the following:\n  ARIA attribute element ID does not exist on the page: aria-labelledby=\"search-title\""
+      }
+    ]
+  }
+]

axe-results-violations.json

@@ -0,0 +1 @@
+[]

src/components/Search/SearchResults/index.astro

@@ -20,7 +20,7 @@ const query = (queryProp ?? Astro.url.searchParams.get('q') ?? '').trim()
   class="block"
 >
   <div class="mx-auto w-full space-y-8 pb-8 sm:pb-12 px-4 sm:px-6 lg:px-8">
-    <header class="space-y-4" aria-labelledby="search-title">
+    <header class="space-y-4">
       {
         showSearchBar && (
           <div class="max-w-lg mx-auto">