feat: add labels for toc and mini toc (#187)

* feat: add labels for toc and mini toc

package.json

@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@gravity-ui/icons": "^2.5.0",
-    "@gravity-ui/uikit": "^5.12.2",
+    "@gravity-ui/uikit": "^5.19.0",
     "@popperjs/core": "^2.11.2",
     "bem-cn-lite": "4.1.0",
     "i18next": "^19.9.2",

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {getUniqId} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {omit} from 'lodash';
 
@@ -45,11 +46,13 @@ class Toc extends React.Component<TocProps, TocState> {
 
     containerEl: HTMLElement | null = null;
     footerEl: HTMLElement | null = null;
+    tocTopId: string;
 
     constructor(props: TocProps) {
         super(props);
 
         this.state = this.computeState(this.getInitialState());
+        this.tocTopId = getUniqId();
     }
 
     getInitialState() {
@@ -162,7 +165,7 @@ class Toc extends React.Component<TocProps, TocState> {
             : {};
 
         return (
-            <ul className={b('list')}>
+            <ul className={b('list')} aria-labelledby={this.tocTopId}>
                 {items.map((item, index) => {
                     const main = !this.state.registry.getParentId(item.id);
                     const active =
@@ -233,8 +236,12 @@ class Toc extends React.Component<TocProps, TocState> {
         }
 
         return (
-            <div className={b('top', {scrolled: contentScrolled})}>
-                {tocTitleIcon ? <div className={b('top-header-icon')}>{tocTitleIcon}</div> : null}
+            <div className={b('top', {scrolled: contentScrolled})} id={this.tocTopId}>
+                {tocTitleIcon ? (
+                    <div className={b('top-header-icon')} aria-hidden={'true'}>
+                        {tocTitleIcon}
+                    </div>
+                ) : null}
                 {topHeader}
             </div>
         );

src/i18n/en.json

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

src/i18n/ru.json

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