From 42223d3f325c3410754a6fc3df9a393ff55db3a5 Mon Sep 17 00:00:00 2001
From: Tyan_Pavel <ptyan_1@edu.hse.ru>
Date: Thu, 4 Jul 2024 14:43:30 +0300
Subject: [PATCH 1/7] feat: add aria-label and aria-current for MiniToc

---
 src/components/MiniToc/MiniToc.tsx | 32 ++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx
index 72d97919..16d483e8 100644
--- a/src/components/MiniToc/MiniToc.tsx
+++ b/src/components/MiniToc/MiniToc.tsx
@@ -48,7 +48,7 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
     }
 
     return (
-        <div className={b()}>
+        <div className={b()} aria-label="Article navigation">
             <div className={b('title')}>{t<string>('title')}:</div>
             <Scrollspy
                 className={b('sections')}
@@ -59,13 +59,29 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
                 onSectionClick={onItemClick}
                 aria-label={t('description')}
             >
-                {flatHeadings.map(({href, title, isChild}) => (
-                    <li key={href} data-hash={href} className={b('section', {child: isChild})}>
-                        <a href={href} className={b('section-link')} data-router-shallow>
-                            {title}
-                        </a>
-                    </li>
-                ))}
+                {flatHeadings.map(({href, title, isChild}, index) => {
+                    if (index === 0) {
+                        return (
+                            <li
+                                key={href}
+                                data-hash={href}
+                                className={b('section', {child: isChild})}
+                                aria-current="location"
+                            >
+                                <a href={href} className={b('section-link')} data-router-shallow>
+                                    {title}
+                                </a>
+                            </li>
+                        );
+                    }
+                    return (
+                        <li key={href} data-hash={href} className={b('section', {child: isChild})}>
+                            <a href={href} className={b('section-link')} data-router-shallow>
+                                {title}
+                            </a>
+                        </li>
+                    );
+                })}
             </Scrollspy>
         </div>
     );

From 6bf0c0b45aea3d76bb952ae1b46da5e11915e70c Mon Sep 17 00:00:00 2001
From: Tyan_Pavel <ptyan_1@edu.hse.ru>
Date: Thu, 4 Jul 2024 14:56:04 +0300
Subject: [PATCH 2/7] refactor: extract MiniToc content into variable

---
 src/components/MiniToc/MiniToc.tsx | 48 ++++++++++++++++--------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx
index 16d483e8..ad063575 100644
--- a/src/components/MiniToc/MiniToc.tsx
+++ b/src/components/MiniToc/MiniToc.tsx
@@ -47,6 +47,30 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
         return null;
     }
 
+    const miniTocContent = flatHeadings.map(({href, title, isChild}, index) => {
+        if (index === 0) {
+            return (
+                <li
+                    key={href}
+                    data-hash={href}
+                    className={b('section', {child: isChild})}
+                    aria-current="location"
+                >
+                    <a href={href} className={b('section-link')} data-router-shallow>
+                        {title}
+                    </a>
+                </li>
+            );
+        }
+        return (
+            <li key={href} data-hash={href} className={b('section', {child: isChild})}>
+                <a href={href} className={b('section-link')} data-router-shallow>
+                    {title}
+                </a>
+            </li>
+        );
+    });
+
     return (
         <div className={b()} aria-label="Article navigation">
             <div className={b('title')}>{t<string>('title')}:</div>
@@ -59,29 +83,7 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
                 onSectionClick={onItemClick}
                 aria-label={t('description')}
             >
-                {flatHeadings.map(({href, title, isChild}, index) => {
-                    if (index === 0) {
-                        return (
-                            <li
-                                key={href}
-                                data-hash={href}
-                                className={b('section', {child: isChild})}
-                                aria-current="location"
-                            >
-                                <a href={href} className={b('section-link')} data-router-shallow>
-                                    {title}
-                                </a>
-                            </li>
-                        );
-                    }
-                    return (
-                        <li key={href} data-hash={href} className={b('section', {child: isChild})}>
-                            <a href={href} className={b('section-link')} data-router-shallow>
-                                {title}
-                            </a>
-                        </li>
-                    );
-                })}
+                {miniTocContent}
             </Scrollspy>
         </div>
     );

From 97f97f1ddfe53fdbdf5fbcf762b48d9d2b27ba5b Mon Sep 17 00:00:00 2001
From: Tyan_Pavel <ptyan_1@edu.hse.ru>
Date: Fri, 5 Jul 2024 13:21:56 +0300
Subject: [PATCH 3/7] feat: add translation to aria-label in MiniToc

---
 src/components/MiniToc/MiniToc.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx
index ad063575..0b6ed05b 100644
--- a/src/components/MiniToc/MiniToc.tsx
+++ b/src/components/MiniToc/MiniToc.tsx
@@ -72,7 +72,7 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
     });
 
     return (
-        <div className={b()} aria-label="Article navigation">
+        <div className={b()} aria-label={t('article navigation')}>
             <div className={b('title')}>{t<string>('title')}:</div>
             <Scrollspy
                 className={b('sections')}

From 3b76f136d04f2fa0b6e42fa7ead9872278fad1a5 Mon Sep 17 00:00:00 2001
From: Tyan_Pavel <ptyan_1@edu.hse.ru>
Date: Fri, 5 Jul 2024 15:36:32 +0300
Subject: [PATCH 4/7] feat: add i18n for MiniToc aria-label

add hyphen in aria-label value

add Russian and English translation
---
 src/components/MiniToc/MiniToc.tsx | 2 +-
 src/i18n/en.json                   | 1 +
 src/i18n/ru.json                   | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx
index 0b6ed05b..a2360037 100644
--- a/src/components/MiniToc/MiniToc.tsx
+++ b/src/components/MiniToc/MiniToc.tsx
@@ -72,7 +72,7 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
     });
 
     return (
-        <div className={b()} aria-label={t('article navigation')}>
+        <div className={b()} aria-label={t('article-navigation')}>
             <div className={b('title')}>{t<string>('title')}:</div>
             <Scrollspy
                 className={b('sections')}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 35bcbcb1..f7773a8a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -47,6 +47,7 @@
   },
   "mini-toc": {
     "title": "In this article",
+    "article-navigation": "Article navigation",
     "description": "Current article contents"
   },
   "toc-nav-panel": {
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index a2a1da5c..79756887 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -47,6 +47,7 @@
   },
   "mini-toc": {
     "title": "В этой статье",
+    "article-navigation": "Навигация по статье",
     "description": "Содержание текущей статьи"
   },
   "toc-nav-panel": {

From 3dbbd9cc519207366822b9dcd352e6fa672e9cd7 Mon Sep 17 00:00:00 2001
From: Tyan_Pavel <ptyan_1@edu.hse.ru>
Date: Thu, 11 Jul 2024 10:49:12 +0300
Subject: [PATCH 5/7] feat: add nav and h1-h6 tags in MiniToc

replace div to nav tag
replace div to h1 for title
wrap MiniToc links into h2 and h3 tags
---
 src/components/MiniToc/MiniToc.scss | 38 +++++++++++++------
 src/components/MiniToc/MiniToc.tsx  | 59 +++++++++++++++++++++--------
 2 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss
index 25d7f371..0cd680ab 100644
--- a/src/components/MiniToc/MiniToc.scss
+++ b/src/components/MiniToc/MiniToc.scss
@@ -9,6 +9,7 @@
         font-weight: 500;
         color: var(--g-color-text-primary);
         margin-bottom: 12px;
+        margin-top: 0;
     }
 
     &__sections {
@@ -24,34 +25,49 @@
     &__section {
         display: block;
 
-        & > #{$class}__section-link {
+        & > #{$class}__section-heading {
             border-left-color: var(--g-color-line-generic);
-
-            @include focusable(-2px);
         }
 
-        &-link {
+        &-heading {
             display: flex;
             align-items: center;
-            padding: 6px 6px 6px 12px;
-            min-height: 28px;
 
             color: var(--g-color-text-secondary);
+            font-size: 13px;
+            font-weight: normal;
+            margin: 0;
+
             border-left: 2px solid transparent;
             text-decoration: none;
 
             &:hover {
                 color: var(--g-color-text-complementary);
             }
-        }
 
-        &_child {
-            #{$class}__section-link {
-                padding-left: 25px;
+            &_child {
+                #{$class}__section-link {
+                    padding-left: 25px;
+                }
             }
         }
 
-        &_active > #{$class}__section-link {
+        &-link {
+            display: flex;
+            align-items: center;
+
+            width: 100%;
+            min-height: 28px;
+
+            padding: 6px 6px 6px 12px;
+
+            color: inherit;
+            text-decoration: none;
+
+            @include focusable(-2px);
+        }
+
+        &_active > #{$class}__section-heading {
             color: var(--g-color-text-primary);
             border-left-color: var(--g-color-text-primary);
         }
diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx
index a2360037..97797715 100644
--- a/src/components/MiniToc/MiniToc.tsx
+++ b/src/components/MiniToc/MiniToc.tsx
@@ -49,31 +49,58 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
 
     const miniTocContent = flatHeadings.map(({href, title, isChild}, index) => {
         if (index === 0) {
+            if (isChild) {
+                return (
+                    <li
+                        key={href}
+                        data-hash={href}
+                        className={b('section')}
+                        aria-current="location"
+                    >
+                        <h3 className={b('section-heading', {child: isChild})}>
+                            <a className={b('section-link')} href={href} data-router-shallow>
+                                {title}
+                            </a>
+                        </h3>
+                    </li>
+                );
+            }
             return (
-                <li
-                    key={href}
-                    data-hash={href}
-                    className={b('section', {child: isChild})}
-                    aria-current="location"
-                >
-                    <a href={href} className={b('section-link')} data-router-shallow>
-                        {title}
-                    </a>
+                <li key={href} data-hash={href} className={b('section')} aria-current="location">
+                    <h2 className={b('section-heading', {child: isChild})}>
+                        <a className={b('section-link')} href={href} data-router-shallow>
+                            {title}
+                        </a>
+                    </h2>
+                </li>
+            );
+        }
+
+        if (isChild) {
+            return (
+                <li key={href} data-hash={href} className={b('section')}>
+                    <h3 className={b('section-heading', {child: isChild})}>
+                        <a className={b('section-link')} href={href} data-router-shallow>
+                            {title}
+                        </a>
+                    </h3>
                 </li>
             );
         }
         return (
-            <li key={href} data-hash={href} className={b('section', {child: isChild})}>
-                <a href={href} className={b('section-link')} data-router-shallow>
-                    {title}
-                </a>
+            <li key={href} data-hash={href} className={b('section')}>
+                <h2 className={b('section-heading', {child: isChild})}>
+                    <a className={b('section-link')} href={href} data-router-shallow>
+                        {title}
+                    </a>
+                </h2>
             </li>
         );
     });
 
     return (
-        <div className={b()} aria-label={t('article-navigation')}>
-            <div className={b('title')}>{t<string>('title')}:</div>
+        <nav className={b()} aria-label={t('article-navigation')}>
+            <h1 className={b('title')}>{t<string>('title')}:</h1>
             <Scrollspy
                 className={b('sections')}
                 currentClassName={b('section', {active: true})}
@@ -85,7 +112,7 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
             >
                 {miniTocContent}
             </Scrollspy>
-        </div>
+        </nav>
     );
 });
 

From ac8e1791b9e4392a51d9c70f759b1876121e1fc1 Mon Sep 17 00:00:00 2001
From: Tyan_Pavel <ptyan_1@edu.hse.ru>
Date: Fri, 12 Jul 2024 06:52:47 +0300
Subject: [PATCH 6/7] fix: change tags and aria in MiniToc

delete h2, h3 tags from MiniToc items
delete aria-current from MiniToc items
change h1 to h2 for MiniToc title
wrap MiniToc title in div
---
 src/components/MiniToc/MiniToc.scss | 37 +++++------------
 src/components/MiniToc/MiniToc.tsx  | 63 +++++------------------------
 2 files changed, 21 insertions(+), 79 deletions(-)

diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss
index 0cd680ab..121813d4 100644
--- a/src/components/MiniToc/MiniToc.scss
+++ b/src/components/MiniToc/MiniToc.scss
@@ -25,49 +25,34 @@
     &__section {
         display: block;
 
-        & > #{$class}__section-heading {
+        & > #{$class}__section-link {
             border-left-color: var(--g-color-line-generic);
+
+            @include focusable(-2px);
         }
 
-        &-heading {
+        &-link {
             display: flex;
             align-items: center;
+            padding: 6px 6px 6px 12px;
+            min-height: 28px;
 
             color: var(--g-color-text-secondary);
-            font-size: 13px;
-            font-weight: normal;
-            margin: 0;
-
             border-left: 2px solid transparent;
             text-decoration: none;
 
             &:hover {
                 color: var(--g-color-text-complementary);
             }
-
-            &_child {
-                #{$class}__section-link {
-                    padding-left: 25px;
-                }
-            }
         }
 
-        &-link {
-            display: flex;
-            align-items: center;
-
-            width: 100%;
-            min-height: 28px;
-
-            padding: 6px 6px 6px 12px;
-
-            color: inherit;
-            text-decoration: none;
-
-            @include focusable(-2px);
+        &_child {
+            #{$class}__section-link {
+                padding-left: 25px;
+            }
         }
 
-        &_active > #{$class}__section-heading {
+        &_active > #{$class}__section-link {
             color: var(--g-color-text-primary);
             border-left-color: var(--g-color-text-primary);
         }
diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx
index 97797715..5a86e579 100644
--- a/src/components/MiniToc/MiniToc.tsx
+++ b/src/components/MiniToc/MiniToc.tsx
@@ -47,60 +47,11 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
         return null;
     }
 
-    const miniTocContent = flatHeadings.map(({href, title, isChild}, index) => {
-        if (index === 0) {
-            if (isChild) {
-                return (
-                    <li
-                        key={href}
-                        data-hash={href}
-                        className={b('section')}
-                        aria-current="location"
-                    >
-                        <h3 className={b('section-heading', {child: isChild})}>
-                            <a className={b('section-link')} href={href} data-router-shallow>
-                                {title}
-                            </a>
-                        </h3>
-                    </li>
-                );
-            }
-            return (
-                <li key={href} data-hash={href} className={b('section')} aria-current="location">
-                    <h2 className={b('section-heading', {child: isChild})}>
-                        <a className={b('section-link')} href={href} data-router-shallow>
-                            {title}
-                        </a>
-                    </h2>
-                </li>
-            );
-        }
-
-        if (isChild) {
-            return (
-                <li key={href} data-hash={href} className={b('section')}>
-                    <h3 className={b('section-heading', {child: isChild})}>
-                        <a className={b('section-link')} href={href} data-router-shallow>
-                            {title}
-                        </a>
-                    </h3>
-                </li>
-            );
-        }
-        return (
-            <li key={href} data-hash={href} className={b('section')}>
-                <h2 className={b('section-heading', {child: isChild})}>
-                    <a className={b('section-link')} href={href} data-router-shallow>
-                        {title}
-                    </a>
-                </h2>
-            </li>
-        );
-    });
-
     return (
         <nav className={b()} aria-label={t('article-navigation')}>
-            <h1 className={b('title')}>{t<string>('title')}:</h1>
+            <div>
+                <h2 className={b('title')}>{t<string>('title')}:</h2>
+            </div>
             <Scrollspy
                 className={b('sections')}
                 currentClassName={b('section', {active: true})}
@@ -110,7 +61,13 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
                 onSectionClick={onItemClick}
                 aria-label={t('description')}
             >
-                {miniTocContent}
+                {flatHeadings.map(({href, title, isChild}) => (
+                    <li key={href} data-hash={href} className={b('section', {child: isChild})}>
+                        <a href={href} className={b('section-link')} data-router-shallow>
+                            {title}
+                        </a>
+                    </li>
+                ))}
             </Scrollspy>
         </nav>
     );

From 04234dc00db65df8ba971e6c58d7e68b568c2bf2 Mon Sep 17 00:00:00 2001
From: Tyan_Pavel <ptyan_1@edu.hse.ru>
Date: Fri, 12 Jul 2024 11:39:38 +0300
Subject: [PATCH 7/7] fix: remove redudant div tag for MiniToc title

---
 src/components/MiniToc/MiniToc.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx
index 5a86e579..eaeaa8cf 100644
--- a/src/components/MiniToc/MiniToc.tsx
+++ b/src/components/MiniToc/MiniToc.tsx
@@ -49,9 +49,7 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick
 
     return (
         <nav className={b()} aria-label={t('article-navigation')}>
-            <div>
-                <h2 className={b('title')}>{t<string>('title')}:</h2>
-            </div>
+            <h2 className={b('title')}>{t<string>('title')}:</h2>
             <Scrollspy
                 className={b('sections')}
                 currentClassName={b('section', {active: true})}