Docs: add aria label on section headings anchor links (#41487)

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>

diff --git a/site/src/libs/astro.ts b/site/src/libs/astro.ts
index 3eb6947d3463763b4d1629153340734aab55ee45..01b4f6b1069def1d38c75b7dbb67fead165af60a 100644 (file)
--- a/site/src/libs/astro.ts
+++ b/site/src/libs/astro.ts
@@ -5,7 +5,7 @@ import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
 import type { AstroIntegration } from 'astro'
 import autoImport from 'astro-auto-import'
-import type { Element } from 'hast'
+import type { Element, Text } from 'hast'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import { getConfig } from './config'
 import { rehypeBsTable } from './rehype'
@@ -59,7 +59,10 @@ export function bootstrap(): AstroIntegration[] {
                   {
                     behavior: 'append',
                     content: [{ type: 'text', value: ' ' }],
-                    properties: { class: 'anchor-link' },
+                    properties: (element: Element) => ({
+                      class: 'anchor-link',
+                      ariaLabel: `Link to this section: ${(element.children[0] as Text).value}`
+                    }),
                     test: (element: Element) => element.tagName.match(headingsRangeRegex)
                   }
                 ],