feat(a11y): improve a11y on section heading anchor links

Author: MaxLardenois

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'
@@ -58,7 +58,30 @@ export function bootstrap(): AstroIntegration[] {
                   rehypeAutolinkHeadings,
                   {
                     behavior: 'append',
-                    content: [{ type: 'text', value: ' ' }],
+                    content: (element: Element) => [
+                      {
+                        type: 'element',
+                        tagName: 'span',
+                        children: [
+                          {
+                            type: 'text',
+                            value: `Link to this section: ${(element.children[0] as Text).value}`
+                          }
+                        ],
+                        properties: { class: 'visually-hidden' }
+                      },
+                      {
+                        type: 'element',
+                        tagName: 'span',
+                        children: [
+                          {
+                            type: 'text',
+                            value: ' #'
+                          }
+                        ],
+                        properties: { ariaHidden: true }
+                      }
+                    ],
                     properties: { class: 'anchor-link' },
                     test: (element: Element) => element.tagName.match(headingsRangeRegex)
                   }

site/src/scss/_anchor.scss

@@ -6,10 +6,6 @@
   opacity: 0;
   @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
 
-  &::after {
-    content: "#";
-  }
-
   &:focus,
   &:hover,
   :hover > &,