chore: improve accessibility

1 files changed, 13 insertions, 2 deletions

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)} />
           )}