feat: add labels for toc and mini toc

src/components/MiniToc/MiniToc.tsx

@@ -57,6 +57,7 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
                 router={router}
                 headerHeight={headerHeight}
                 onSectionClick={onItemClick}
+                aria-label={t('description')}
             >
                 {flatHeadings.map(({href, title, isChild}) => (
                     <li key={href} data-hash={href} className={b('section', {child: isChild})}>

src/components/Scrollspy/Scrollspy.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import React, {HTMLProps, ReactElement} from 'react';
 
 import {debounce, isEqual} from 'lodash';
 import scrollIntoView from 'scroll-into-view-if-needed';
@@ -12,7 +12,9 @@ interface ScrollspyDefaultProps {
     headerHeight: number;
 }
 
-export interface ScrollspyProps extends Partial<ScrollspyDefaultProps> {
+export interface ScrollspyProps
+    extends Partial<ScrollspyDefaultProps>,
+        Partial<HTMLProps<HTMLUListElement>> {
     items: string[];
     children: ReactElement[];
     router: Router;
@@ -93,7 +95,7 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
     }
 
     render() {
-        const {children, currentClassName, className} = this.props;
+        const {children, currentClassName, className, ...rest} = this.props;
         const {inViewState} = this.state;
 
         const items = children.map((child, index) => {
@@ -124,7 +126,7 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
         });
 
         return (
-            <ul className={className} ref={this.containerRef}>
+            <ul className={className} ref={this.containerRef} {...rest}>
                 {items}
             </ul>
         );

src/components/Toc/Toc.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import block from 'bem-cn-lite';
 import {omit} from 'lodash';
+import {WithTranslation} from 'react-i18next';
 
+import {withTranslation} from '../../hoc/withTranslation';
 import {PopperPosition} from '../../hooks';
 import {ControlSizes, Router, TocData, TocItem} from '../../models';
 import {isActiveItem, normalizeHash, normalizePath} from '../../utils';
@@ -21,7 +23,7 @@ function zip<T>(array: string[], fill: T): Record<string, T> {
     return array.reduce((acc, item) => Object.assign(acc, {[item]: fill}), {});
 }
 
-export interface TocProps extends TocData {
+export interface TocProps extends TocData, WithTranslation {
     router: Router;
     headerHeight?: number;
     tocTitleIcon?: React.ReactNode;
@@ -153,7 +155,7 @@ class Toc extends React.Component<TocProps, TocState> {
 
     private renderList = (items: TocItem[]) => {
         const {toggleItem} = this;
-        const {singlePage} = this.props;
+        const {singlePage, t} = this.props;
         const {activeId, fixedById} = this.state;
 
         const activeItem = activeId && this.state.registry.getItemById(activeId);
@@ -162,7 +164,7 @@ class Toc extends React.Component<TocProps, TocState> {
             : {};
 
         return (
-            <ul className={b('list')}>
+            <ul className={b('list')} aria-label={t('description')}>
                 {items.map((item, index) => {
                     const main = !this.state.registry.getParentId(item.id);
                     const active =
@@ -336,4 +338,4 @@ class Toc extends React.Component<TocProps, TocState> {
     };
 }
 
-export default Toc;
+export default withTranslation('toc')(Toc);

src/hoc/withTranslation.ts

@@ -0,0 +1,9 @@
+import {withTranslation as withTranslationReacti18n} from 'react-i18next';
+
+import {configure} from '../config';
+
+export function withTranslation(namespace: string) {
+    configure();
+
+    return withTranslationReacti18n(namespace);
+}

src/i18n/en.json

@@ -46,7 +46,11 @@
     "lang-control-text-en": "English"
   },
   "mini-toc": {
-    "title": "In this article"
+    "title": "In this article",
+    "description": "Current article contents"
+  },
+  "toc": {
+    "description": "Table of contents"
   },
   "toc-nav-panel": {
     "hint_previous": "Previous",

src/i18n/ru.json

@@ -46,7 +46,11 @@
     "lang-control-text-en": "English"
   },
   "mini-toc": {
-    "title": "В этой статье"
+    "title": "В этой статье",
+    "description": "Содержание текущей статьи"
+  },
+  "toc": {
+    "description": "Содержание"
   },
   "toc-nav-panel": {
     "hint_previous": "Предыдущая",