Update permalinks for accessibility (#36714)

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

lib/render-content/create-processor.js

@@ -6,7 +6,6 @@ import emoji from 'remark-gemoji-to-emoji'
 import remark2rehype from 'remark-rehype'
 import raw from 'rehype-raw'
 import slug from 'rehype-slug'
-import autolinkHeadings from 'rehype-autolink-headings'
 import highlight from 'rehype-highlight'
 import dockerfile from 'highlight.js/lib/languages/dockerfile'
 import http from 'highlight.js/lib/languages/http'
@@ -22,7 +21,7 @@ import rewriteImgSources from './plugins/rewrite-asset-urls.js'
 import rewriteAssetImgTags from './plugins/rewrite-asset-img-tags.js'
 import useEnglishHeadings from './plugins/use-english-headings.js'
 import wrapInElement from './plugins/wrap-in-element.js'
-import doctocatLinkIcon from './doctocat-link-icon.js'
+import permalinks from './plugins/permalinks.js'
 
 // plugins aren't designed to be used more than once,
 // this workaround lets us do that
@@ -72,11 +71,7 @@ export default function createProcessor(context) {
     .use(remark2rehype, { allowDangerousHtml: true })
     .use(slug)
     .use(useEnglishHeadings, context)
-    .use(autolinkHeadings, {
-      behavior: 'prepend',
-      properties: { ariaHidden: true, tabIndex: -1, class: 'doctocat-link' },
-      content: doctocatLinkIcon,
-    })
+    .use(permalinks)
     .use(highlight, {
       languages: { graphql, dockerfile, http, groovy, erb, powershell },
       subset: false,