fix(theme): add accessible name for the heading hash-link #8562

facebook · Jan 26, 2023 · 63ec772 · 63ec772
1 parent c6cdf70
commit 63ec772
Show file tree

Hide file tree

Showing 29 changed files with 45 additions and 36 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx b/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
 import type {Props} from '@theme/Heading';
 
 import styles from './styles.module.css';
@@ -22,6 +23,17 @@ export default function Heading({as: As, id, ...props}: Props): JSX.Element {
     return <As {...props} id={undefined} />;
   }
 
+  const anchorTitle = translate(
+    {
+      id: 'theme.common.headingLinkTitle',
+      message: 'Direct link to {heading}',
+      description: 'Title for link to heading',
+    },
+    {
+      heading: typeof props.children === 'string' ? props.children : id,
+    },
+  );
+
   return (
     <As
       {...props}
@@ -34,16 +46,13 @@ export default function Heading({as: As, id, ...props}: Props): JSX.Element {
       )}
       id={id}>
       {props.children}
-      <a
+      <Link
         className="hash-link"
-        href={`#${id}`}
-        title={translate({
-          id: 'theme.common.headingLinkTitle',
-          message: 'Direct link to heading',
-          description: 'Title for link to heading',
-        })}>
+        to={`#${id}`}
+        aria-label={anchorTitle}
+        title={anchorTitle}>
         &#8203;
-      </a>
+      </Link>
     </As>
   );
 }
diff --git a/packages/docusaurus-theme-translations/locales/ar/theme-common.json b/packages/docusaurus-theme-translations/locales/ar/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "الوضع الداكن",
   "theme.colorToggle.ariaLabel.mode.light": "الوضع الفاتح",
   "theme.common.editThisPage": "تعديل هذه الصفحة",
-  "theme.common.headingLinkTitle": "ارتباط مباشر بالعنوان",
+  "theme.common.headingLinkTitle": "ارتباط مباشر بالعنوان {heading}",
   "theme.common.skipToMainContent": "انتقل إلى المحتوى الرئيسي",
   "theme.docs.DocCard.categoryDescription": "{count} مواد",
   "theme.docs.breadcrumbs.home": "الرئيسية",

diff --git a/packages/docusaurus-theme-translations/locales/base/theme-common.json b/packages/docusaurus-theme-translations/locales/base/theme-common.json
@@ -73,7 +73,7 @@
   "theme.colorToggle.ariaLabel.mode.light___DESCRIPTION": "The name for the light color mode",
   "theme.common.editThisPage": "Edit this page",
   "theme.common.editThisPage___DESCRIPTION": "The link label to edit the current page",
-  "theme.common.headingLinkTitle": "Direct link to heading",
+  "theme.common.headingLinkTitle": "Direct link to {heading}",
   "theme.common.headingLinkTitle___DESCRIPTION": "Title for link to heading",
   "theme.common.skipToMainContent": "Skip to main content",
   "theme.common.skipToMainContent___DESCRIPTION": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",

diff --git a/packages/docusaurus-theme-translations/locales/bn/theme-common.json b/packages/docusaurus-theme-translations/locales/bn/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "এই পেজটি এডিট করুন",
-  "theme.common.headingLinkTitle": "হেডিং এর সঙ্গে সরাসরি লিংকড",
+  "theme.common.headingLinkTitle": "{heading} এর সঙ্গে সরাসরি লিংকড",
   "theme.common.skipToMainContent": "স্কিপ করে মূল কন্টেন্ট এ যান",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/cs/theme-common.json b/packages/docusaurus-theme-translations/locales/cs/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "Upravit tuto stránku",
-  "theme.common.headingLinkTitle": "Přímý odkaz na nadpis",
+  "theme.common.headingLinkTitle": "Přímý odkaz na {heading}",
   "theme.common.skipToMainContent": "Přeskočit na hlavní obsah",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/da/theme-common.json b/packages/docusaurus-theme-translations/locales/da/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "Rediger denne side",
-  "theme.common.headingLinkTitle": "Direkte link til overskrift",
+  "theme.common.headingLinkTitle": "Direkte link til {heading}",
   "theme.common.skipToMainContent": "Hop til hovedindhold",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/de/theme-common.json b/packages/docusaurus-theme-translations/locales/de/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dunkler Modus",
   "theme.colorToggle.ariaLabel.mode.light": "heller Modus",
   "theme.common.editThisPage": "Diese Seite bearbeiten",
-  "theme.common.headingLinkTitle": "Direkter Link zur Überschrift",
+  "theme.common.headingLinkTitle": "Direkter Link zur {heading}",
   "theme.common.skipToMainContent": "Zum Hauptinhalt springen",
   "theme.docs.DocCard.categoryDescription": "{count} Einträge",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/es/theme-common.json b/packages/docusaurus-theme-translations/locales/es/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "Editar esta página",
-  "theme.common.headingLinkTitle": "Enlace directo al encabezado",
+  "theme.common.headingLinkTitle": "Enlace directo al {heading}",
   "theme.common.skipToMainContent": "Saltar al contenido principal",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/fa/theme-common.json b/packages/docusaurus-theme-translations/locales/fa/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "حالت تیره",
   "theme.colorToggle.ariaLabel.mode.light": "حالت روشن",
   "theme.common.editThisPage": "ویرایش مطالب این صفحه",
-  "theme.common.headingLinkTitle": "لینک مستقیم به عنوان",
+  "theme.common.headingLinkTitle": "لینک مستقیم به {heading}",
   "theme.common.skipToMainContent": "پرش به مطلب اصلی",
   "theme.docs.DocCard.categoryDescription": "{count} مورد",
   "theme.docs.breadcrumbs.home": "صفحه اصلی",

diff --git a/packages/docusaurus-theme-translations/locales/fil/theme-common.json b/packages/docusaurus-theme-translations/locales/fil/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "I-edit ang page",
-  "theme.common.headingLinkTitle": "Direktang link patungo sa heading",
+  "theme.common.headingLinkTitle": "Direktang link patungo sa {heading}",
   "theme.common.skipToMainContent": "Lumaktaw patungo sa pangunahing content",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/fr/theme-common.json b/packages/docusaurus-theme-translations/locales/fr/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "mode sombre",
   "theme.colorToggle.ariaLabel.mode.light": "mode clair",
   "theme.common.editThisPage": "Éditer cette page",
-  "theme.common.headingLinkTitle": "Lien direct vers le titre",
+  "theme.common.headingLinkTitle": "Lien direct vers {heading}",
   "theme.common.skipToMainContent": "Aller au contenu principal",
   "theme.docs.DocCard.categoryDescription": "{count} éléments",
   "theme.docs.breadcrumbs.home": "Page d'accueil",

diff --git a/packages/docusaurus-theme-translations/locales/he/theme-common.json b/packages/docusaurus-theme-translations/locales/he/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "ערוך דף זה",
-  "theme.common.headingLinkTitle": "קישור ישיר לכותרת",
+  "theme.common.headingLinkTitle": "קישור ישיר אל {heading}",
   "theme.common.skipToMainContent": "דלג לתוכן הראשי",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/hi/theme-common.json b/packages/docusaurus-theme-translations/locales/hi/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "इस पेज को बदलें",
-  "theme.common.headingLinkTitle": "शीर्षक का सीधा लिंक",
+  "theme.common.headingLinkTitle": "{heading} का सीधा लिंक",
   "theme.common.skipToMainContent": "मुख्य कंटेंट तक स्किप करें",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/it/theme-common.json b/packages/docusaurus-theme-translations/locales/it/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "Modifica questa pagina",
-  "theme.common.headingLinkTitle": "Link diretto all'intestazione",
+  "theme.common.headingLinkTitle": "Link diretto a {heading}",
   "theme.common.skipToMainContent": "Passa al contenuto principale",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/ja/theme-common.json b/packages/docusaurus-theme-translations/locales/ja/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "ダークモード",
   "theme.colorToggle.ariaLabel.mode.light": "ライトモード",
   "theme.common.editThisPage": "このページを編集",
-  "theme.common.headingLinkTitle": "この見出しへのリンク",
+  "theme.common.headingLinkTitle": "{heading} への直接リンク",
   "theme.common.skipToMainContent": "メインコンテンツまでスキップ",
   "theme.docs.DocCard.categoryDescription": "{count}項目",
   "theme.docs.breadcrumbs.home": "ホームページ",

diff --git a/packages/docusaurus-theme-translations/locales/ko/theme-common.json b/packages/docusaurus-theme-translations/locales/ko/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "어두운 모드",
   "theme.colorToggle.ariaLabel.mode.light": "밝은 모드",
   "theme.common.editThisPage": "페이지 편집",
-  "theme.common.headingLinkTitle": "제목으로 바로 가기",
+  "theme.common.headingLinkTitle": "{heading}에 대한 직접 링크",
   "theme.common.skipToMainContent": "본문으로 건너뛰기",
   "theme.docs.DocCard.categoryDescription": "{count} 항목",
   "theme.docs.breadcrumbs.home": "홈",

diff --git a/packages/docusaurus-theme-translations/locales/nl/theme-common.json b/packages/docusaurus-theme-translations/locales/nl/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "donkere modus",
   "theme.colorToggle.ariaLabel.mode.light": "lichte modus",
   "theme.common.editThisPage": "Bewerk deze pagina",
-  "theme.common.headingLinkTitle": "Direct link naar de titel",
+  "theme.common.headingLinkTitle": "Direct link naar {heading}",
   "theme.common.skipToMainContent": "Ga naar hoofdinhoud",
   "theme.docs.DocCard.categoryDescription": "{count} artikelen",
   "theme.docs.breadcrumbs.home": "Homepagina",

diff --git a/packages/docusaurus-theme-translations/locales/pl/theme-common.json b/packages/docusaurus-theme-translations/locales/pl/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "ciemny motyw",
   "theme.colorToggle.ariaLabel.mode.light": "jasny motyw",
   "theme.common.editThisPage": "Edytuj tę stronę",
-  "theme.common.headingLinkTitle": "Bezpośredni link do nagłówka",
+  "theme.common.headingLinkTitle": "Bezpośredni link do {heading}",
   "theme.common.skipToMainContent": "Przejdź do głównej zawartości",
   "theme.docs.DocCard.categoryDescription": "{count} elementów",
   "theme.docs.breadcrumbs.home": "Strona główna",

diff --git a/packages/docusaurus-theme-translations/locales/pt-BR/theme-common.json b/packages/docusaurus-theme-translations/locales/pt-BR/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "Editar essa página",
-  "theme.common.headingLinkTitle": "Link direto para o título",
+  "theme.common.headingLinkTitle": "Link direto para {heading}",
   "theme.common.skipToMainContent": "Pular para o conteúdo principal",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/pt-PT/theme-common.json b/packages/docusaurus-theme-translations/locales/pt-PT/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "Editar esta página",
-  "theme.common.headingLinkTitle": "Link direto para o título",
+  "theme.common.headingLinkTitle": "Link direto para {heading}",
   "theme.common.skipToMainContent": "Saltar para o conteúdo principal",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/ru/theme-common.json b/packages/docusaurus-theme-translations/locales/ru/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "Тёмный режим",
   "theme.colorToggle.ariaLabel.mode.light": "Светлый режим",
   "theme.common.editThisPage": "Отредактировать эту страницу",
-  "theme.common.headingLinkTitle": "Прямая ссылка на этот заголовок",
+  "theme.common.headingLinkTitle": "Прямая ссылка на {heading}",
   "theme.common.skipToMainContent": "Перейти к основному содержимому",
   "theme.docs.DocCard.categoryDescription": "{count} элемент|{count} элемента|{count} элементов",
   "theme.docs.breadcrumbs.home": "Главная страница",

diff --git a/packages/docusaurus-theme-translations/locales/sl/theme-common.json b/packages/docusaurus-theme-translations/locales/sl/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "temni način",
   "theme.colorToggle.ariaLabel.mode.light": "svetli način",
   "theme.common.editThisPage": "Uredi to stran",
-  "theme.common.headingLinkTitle": "Direktna povezava na naslov",
+  "theme.common.headingLinkTitle": "Direktna povezava na {heading}",
   "theme.common.skipToMainContent": "Preskoči na vsebino",
   "theme.docs.DocCard.categoryDescription": "{count} vnosov",
   "theme.docs.breadcrumbs.home": "Domača stran",

diff --git a/packages/docusaurus-theme-translations/locales/sr/theme-common.json b/packages/docusaurus-theme-translations/locales/sr/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "dark mode",
   "theme.colorToggle.ariaLabel.mode.light": "light mode",
   "theme.common.editThisPage": "Уреди ову страницу",
-  "theme.common.headingLinkTitle": "Веза до наслова",
+  "theme.common.headingLinkTitle": "Веза до {heading}",
   "theme.common.skipToMainContent": "Пређи на главни садржај",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Home page",

diff --git a/packages/docusaurus-theme-translations/locales/sv/theme-common.json b/packages/docusaurus-theme-translations/locales/sv/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "mörkt utseende",
   "theme.colorToggle.ariaLabel.mode.light": "ljust utseende",
   "theme.common.editThisPage": "Redigera denna sida",
-  "theme.common.headingLinkTitle": "Direktlänk till huvudtitel",
+  "theme.common.headingLinkTitle": "Direktlänk till {heading}",
   "theme.common.skipToMainContent": "Hoppa till huvudinnehåll",
   "theme.docs.DocCard.categoryDescription": "{count} artiklar",
   "theme.docs.breadcrumbs.home": "Hemsida",

diff --git a/packages/docusaurus-theme-translations/locales/tr/theme-common.json b/packages/docusaurus-theme-translations/locales/tr/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "Karanlık mod",
   "theme.colorToggle.ariaLabel.mode.light": "Aydınlık mod",
   "theme.common.editThisPage": "Bu sayfayı düzenle",
-  "theme.common.headingLinkTitle": "Başlığa doğrudan bağlantı",
+  "theme.common.headingLinkTitle": "{heading} doğrudan bağlantı",
   "theme.common.skipToMainContent": "Ana içeriğe geç",
   "theme.docs.DocCard.categoryDescription": "{count} items",
   "theme.docs.breadcrumbs.home": "Ana sayfa",

diff --git a/packages/docusaurus-theme-translations/locales/uk/theme-common.json b/packages/docusaurus-theme-translations/locales/uk/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "Темний режим",
   "theme.colorToggle.ariaLabel.mode.light": "Світлий режим",
   "theme.common.editThisPage": "Відредагувати цю сторінку",
-  "theme.common.headingLinkTitle": "Пряме посилання на цей заголовок",
+  "theme.common.headingLinkTitle": "Пряме посилання на {heading}",
   "theme.common.skipToMainContent": "Перейти до основного вмісту",
   "theme.docs.DocCard.categoryDescription": "{count} елемент|{count} елементи|{count} елементів",
   "theme.docs.breadcrumbs.home": "Головна сторінка",

diff --git a/packages/docusaurus-theme-translations/locales/vi/theme-common.json b/packages/docusaurus-theme-translations/locales/vi/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "chế độ tối",
   "theme.colorToggle.ariaLabel.mode.light": "chế độ sáng",
   "theme.common.editThisPage": "Sửa trang này",
-  "theme.common.headingLinkTitle": "Đường dẫn trực tiếp tới đề mục này",
+  "theme.common.headingLinkTitle": "Đường dẫn trực tiếp tới {heading}",
   "theme.common.skipToMainContent": "Nhảy tới nội dung",
   "theme.docs.DocCard.categoryDescription": "{count} mục",
   "theme.docs.breadcrumbs.home": "Trang chủ",

diff --git a/packages/docusaurus-theme-translations/locales/zh-Hans/theme-common.json b/packages/docusaurus-theme-translations/locales/zh-Hans/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "暗黑模式",
   "theme.colorToggle.ariaLabel.mode.light": "浅色模式",
   "theme.common.editThisPage": "编辑此页",
-  "theme.common.headingLinkTitle": "标题的直接链接",
+  "theme.common.headingLinkTitle": "{heading}的直接链接",
   "theme.common.skipToMainContent": "跳到主要内容",
   "theme.docs.DocCard.categoryDescription": "{count} 个项目",
   "theme.docs.breadcrumbs.home": "主页面",

diff --git a/packages/docusaurus-theme-translations/locales/zh-Hant/theme-common.json b/packages/docusaurus-theme-translations/locales/zh-Hant/theme-common.json
@@ -36,7 +36,7 @@
   "theme.colorToggle.ariaLabel.mode.dark": "暗黑模式",
   "theme.colorToggle.ariaLabel.mode.light": "淺色模式",
   "theme.common.editThisPage": "編輯此頁",
-  "theme.common.headingLinkTitle": "標題的直接連結",
+  "theme.common.headingLinkTitle": "{heading}的直接連結",
   "theme.common.skipToMainContent": "跳至主要内容",
   "theme.docs.DocCard.categoryDescription": "{count} 個項目",
   "theme.docs.breadcrumbs.home": "主頁面",