fix(Toc): set aria-current attribute to selected item (#1426)

gravity-ui · Mar 15, 2024 · 682444a · 682444a
1 parent e731838
commit 682444a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
@@ -24,7 +24,7 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
         <nav className={b(null, className)} ref={ref} data-qa={qa}>
             <ul className={b('sections')}>
                 {items.map(({value, content, href, items: childrenItems}) => (
-                    <li key={value ?? href}>
+                    <li key={value ?? href} aria-current={activeValue === value}>
                         <TocItem
                             content={content}
                             value={value}
@@ -40,7 +40,10 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
                                         content: childrenContent,
                                         href: childrenHref,
                                     }) => (
-                                        <li key={childrenValue ?? childrenHref}>
+                                        <li
+                                            key={childrenValue ?? childrenHref}
+                                            aria-current={activeValue === childrenValue}
+                                        >
                                             <TocItem
                                                 content={childrenContent}
                                                 value={childrenValue}

diff --git a/src/components/Toc/__tests__/Toc.test.tsx b/src/components/Toc/__tests__/Toc.test.tsx
@@ -139,4 +139,15 @@ describe('Toc', () => {
 
         expect(ref.current).toBe(component);
     });
+
+    test('value item should have aria-current attribute', async () => {
+        const value = defaultItems[0].value;
+        const content = defaultItems[0].content;
+
+        render(<Toc value={value} items={defaultItems} qa={qaId} />);
+
+        const currentItem = screen.getByRole('listitem', {current: true});
+
+        expect(currentItem.textContent).toContain(content);
+    });
 });