fix(a11y): better a11y on doc (#3332)

louismaximepiton · web-flow · commit d873a8f79a26 · 2026-02-16T16:33:35.000+01:00
diff --git a/site/src/components/header/Skippy.astro b/site/src/components/header/Skippy.astro
@@ -11,7 +11,7 @@ const { layout } = Astro.props
 <a id="top"></a><!-- OUDS mod: anchor for back-to-top link -->
 <div class="skippy visually-hidden-focusable overflow-hidden position-fixed top-0 end-0 start-0">
   <nav aria-label="Skip links" class="container-fluid container-max-width py-2xsmall ps-4xlarge">
-    <a class="d-inline-flex p-small ms-large bg-always-black" href="#content">Skip to main content</a>
+    <a class="d-inline-flex p-small ms-large bg-always-black" href="#bd-content">Skip to main content</a>
     {
       layout === 'docs' && (
         <a class="d-none d-md-inline-flex p-small bg-always-black" href="#bd-docs-nav">
diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
@@ -6,7 +6,7 @@ import Code from '@components/shortcodes/Code.astro'
 
 <div
   class="bd-masthead position-relative"
-  id="content"
+  id="bd-content"
   {...(getConfig().brand === 'orange' || getConfig().brand === 'orange-compact') && { 'data-bs-theme': 'dark' }}
 >
   <div class="bd-masthead-bg position-absolute w-100 h-100"></div>
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
@@ -95,7 +95,7 @@ const multipleComponents = componentsVersions.length > 1 ? 's' : ''
               View on GitHub
             </a>
           </div>
-          <h1 class="bd-title mb-none" id="content">{frontmatter.title}</h1>
+          <h1 class="bd-title mb-none" id="bd-content">{frontmatter.title}</h1>
         </div>
         <div class="bd-subtitle mt-small">
           {frontmatter.description && <Fragment set:html={processMarkdownToHtml(frontmatter.description)} />}
diff --git a/site/src/layouts/ExamplesLayout.astro b/site/src/layouts/ExamplesLayout.astro
@@ -21,7 +21,7 @@ const {
   theme_selector = true
 } = Astro.props
 
-const pageTitle = `${title} · ${getConfig().title} v${getConfig().docs_version}`
+const pageTitle = `${title} example · ${getConfig().title} v${getConfig().docs_version}`
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site)
 
 const htmlProps: HTMLAttributes<'html'> = direction === 'rtl' ? { lang: 'ar', dir: 'rtl' } : { lang: 'en' }
diff --git a/site/src/layouts/RedirectLayout.astro b/site/src/layouts/RedirectLayout.astro
@@ -15,7 +15,7 @@ const url = new URL(path, Astro.site)
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{getConfig().title}</title>
+    <title>Redirecting - {getConfig().title}</title>
     <link rel="canonical" href={url} />
     <meta name="robots" content="noindex" />
     <script define:vars={{ url: url}}>
diff --git a/site/src/layouts/SingleLayout.astro b/site/src/layouts/SingleLayout.astro
@@ -12,7 +12,7 @@ const { description, title } = Astro.props
 
 <BaseLayout {...Astro.props} layout="single">
   <Fragment slot="main">
-    <main class="bd-content order-1" id="content">
+    <main class="bd-content order-1" id="bd-content">
       <div class="title-bar mb-small mb-md-none">
         <div class="container-fluid container-max-width">
           <h1 class="display-large">{title}</h1>

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const { layout } = Astro.props`
`11`	`11`	`<a id="top"></a><!-- OUDS mod: anchor for back-to-top link -->`
`12`	`12`	`<div class="skippy visually-hidden-focusable overflow-hidden position-fixed top-0 end-0 start-0">`
`13`	`13`	`<nav aria-label="Skip links" class="container-fluid container-max-width py-2xsmall ps-4xlarge">`
`14`		`- <a class="d-inline-flex p-small ms-large bg-always-black" href="#content">Skip to main content</a>`
	`14`	`+ <a class="d-inline-flex p-small ms-large bg-always-black" href="#bd-content">Skip to main content</a>`
`15`	`15`	`{`
`16`	`16`	`layout === 'docs' && (`
`17`	`17`	`<a class="d-none d-md-inline-flex p-small bg-always-black" href="#bd-docs-nav">`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import Code from '@components/shortcodes/Code.astro'`
`6`	`6`
`7`	`7`	`<div`
`8`	`8`	`class="bd-masthead position-relative"`
`9`		`- id="content"`
	`9`	`+ id="bd-content"`
`10`	`10`	`{...(getConfig().brand === 'orange' \|\| getConfig().brand === 'orange-compact') && { 'data-bs-theme': 'dark' }}`
`11`	`11`	`>`
`12`	`12`	`<div class="bd-masthead-bg position-absolute w-100 h-100"></div>`