Add aria-level to role=heading elements

Accessibility scanner flagged this as an issue.
microsoft · Mar 6, 2024 · 0be8dce · 0be8dce
1 parent 7ae2e88
commit 0be8dce
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 92 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",
     "@craco/craco": "7.0.0-alpha.3",
-    "@fluentui/react": "^8.106.1",
+    "@fluentui/react": "^8.115.6",
     "@radiantearth/stac-fields": "1.0.0-beta.7",
     "@reduxjs/toolkit": "^1.8.2",
     "@testing-library/jest-dom": "^5.16.4",

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -174,6 +174,11 @@ export const a11yPostProcessDom = (dom: Document) => {
   dom.querySelectorAll(".highlight pre").forEach(el => {
     el.setAttribute("tabindex", "0");
   });
+
+  // <p> tags with role="heading" need an aria-level attribute
+  dom
+    .querySelectorAll("p[role=heading]")
+    .forEach(el => el.setAttribute("aria-level", "3"));
 };
 
 export const scrollToHash = (