[docs] Expose heading links in a11y tree (#25861)

mui · Apr 22, 2021 · 0181186 · 0181186
1 parent a4d8c4f
commit 0181186
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
@@ -141,13 +141,13 @@ function getTranslatedHeader(t, header) {
 function Heading(props) {
   const { hash, level: Level = 'h2' } = props;
   const t = useTranslate();
+  const headingId = `heading-${hash}`;
 
   return (
-    <Level>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content */}
-      <a className="anchor-link" id={hash} />
+    <Level id={headingId}>
+      <span className="anchor-link" id={hash} />
       {getTranslatedHeader(t, hash)}
-      <a className="anchor-link-style" aria-hidden="true" aria-label="anchor" href={`#${hash}`}>
+      <a aria-labelledby={headingId} className="anchor-link-style" href={`#${hash}`} tabIndex={-1}>
         <svg>
           <use xlinkHref="#anchor-link-icon" />
         </svg>

diff --git a/docs/src/modules/utils/parseMarkdown.js b/docs/src/modules/utils/parseMarkdown.js
@@ -187,12 +187,13 @@ export function createRender(context) {
           hash,
         });
       }
+      const headingId = `heading-${hash}`;
 
       return [
-        `<h${level}>`,
-        `<a class="anchor-link" id="${hash}"></a>`,
+        `<h${level} id="${headingId}">`,
+        `<span class="anchor-link" id="${hash}"></span>`,
         headingHtml,
-        `<a class="anchor-link-style" aria-hidden="true" href="#${hash}">`,
+        `<a aria-labelledby="${headingId}" class="anchor-link-style" href="#${hash}" tabindex="-1">`,
         '<svg><use xlink:href="#anchor-link-icon" /></svg>',
         '</a>',
         `</h${level}>`,