From a7af280848db840ceac621b768bfa04455cf4381 Mon Sep 17 00:00:00 2001
From: kkmch <kkmch@yandex-team.ru>
Date: Tue, 7 Nov 2023 15:26:42 +0100
Subject: [PATCH] fix: using aria labelledby

---
 package-lock.json          | 14 +++++++-------
 package.json               |  2 +-
 src/components/Toc/Toc.tsx | 15 +++++++++++----
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f088a8c3..07a18c39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "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",
@@ -1828,9 +1828,9 @@
       "dev": true
     },
     "node_modules/@gravity-ui/uikit": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.12.2.tgz",
-      "integrity": "sha512-wb7WfGs8wPGi1e38+axczHGa738fkwR9Z4+o6p3Yuq5rdAb+b1vzVvNVKJQjNWpOpIasBXGZmysct2cEDElbrw==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.19.0.tgz",
+      "integrity": "sha512-fZoGjkbOMngv6tfHroTmipa8shjYaeSGlqUIn16csDp0SUyF75e6TlJBHdnHxSvl0S4InCGPjNlvPEiwcp/Wvw==",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
         "@gravity-ui/i18n": "^1.1.0",
@@ -10069,9 +10069,9 @@
       "dev": true
     },
     "@gravity-ui/uikit": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.12.2.tgz",
-      "integrity": "sha512-wb7WfGs8wPGi1e38+axczHGa738fkwR9Z4+o6p3Yuq5rdAb+b1vzVvNVKJQjNWpOpIasBXGZmysct2cEDElbrw==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.19.0.tgz",
+      "integrity": "sha512-fZoGjkbOMngv6tfHroTmipa8shjYaeSGlqUIn16csDp0SUyF75e6TlJBHdnHxSvl0S4InCGPjNlvPEiwcp/Wvw==",
       "requires": {
         "@bem-react/classname": "^1.6.0",
         "@gravity-ui/i18n": "^1.1.0",
diff --git a/package.json b/package.json
index 1493d072..8f93c4ed 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
index 00bad260..35eebf8c 100644
--- a/src/components/Toc/Toc.tsx
+++ b/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() {
@@ -153,7 +156,7 @@ class Toc extends React.Component<TocProps, TocState> {
 
     private renderList = (items: TocItem[]) => {
         const {toggleItem} = this;
-        const {singlePage, title} = this.props;
+        const {singlePage} = this.props;
         const {activeId, fixedById} = this.state;
 
         const activeItem = activeId && this.state.registry.getItemById(activeId);
@@ -162,7 +165,7 @@ class Toc extends React.Component<TocProps, TocState> {
             : {};
 
         return (
-            <ul className={b('list')} aria-label={title}>
+            <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>
         );