From 8647197a05490e2c10106a021cf6760bdabb5b2a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 11 Feb 2022 17:56:27 +0100
Subject: chore: improve accessibility

---
 src/components/Widgets/ToC/ToC.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

(limited to 'src/components/Widgets/ToC')

diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx
index 8a2d493..f3f783c 100644
--- a/src/components/Widgets/ToC/ToC.tsx
+++ b/src/components/Widgets/ToC/ToC.tsx
@@ -1,7 +1,7 @@
 import { ExpandableWidget, OrderedList } from '@components/WidgetParts';
 import { Heading } from '@ts/types/app';
 import useHeadingsTree from '@utils/hooks/useHeadingsTree';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 const ToC = () => {
   const intl = useIntl();
@@ -15,7 +15,18 @@ const ToC = () => {
     return headings.map((heading) => {
       return (
         <li key={heading.id}>
-          <a href={`#${heading.id}`}>{heading.title}</a>
+          <a href={`#${heading.id}`}>
+            <FormattedMessage
+              defaultMessage="<a11y>Jump to </a11y>{title}"
+              description="ToC: link"
+              values={{
+                title: heading.title,
+                a11y: (chunks: string) => (
+                  <span className="screen-reader-text">{chunks}</span>
+                ),
+              }}
+            />
+          </a>
           {heading.children.length > 0 && (
             <OrderedList items={getItems(heading.children)} />
           )}
-- 
cgit v1.2.3