summaryrefslogtreecommitdiffstats
path: root/src/components/Widgets/ToC/ToC.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Widgets/ToC/ToC.tsx')
-rw-r--r--src/components/Widgets/ToC/ToC.tsx15
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)} />
)}