fix: filter block a11y (#980)

gravity-ui · Sep 5, 2024 · 41b2bc3 · 41b2bc3
1 parent 4f124f4
commit 41b2bc3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/components/ButtonTabs/ButtonTabs.tsx b/src/components/ButtonTabs/ButtonTabs.tsx
@@ -53,7 +53,7 @@ const ButtonTabs: React.FC<ButtonTabsProps> = ({
     );
 
     return (
-        <div className={b(null, className)} data-qa={qa}>
+        <div className={b(null, className)} role="tablist" data-qa={qa}>
             {items.map(({id, title}) => {
                 const isActive = id === activeTabId;
 
@@ -65,7 +65,8 @@ const ButtonTabs: React.FC<ButtonTabsProps> = ({
                         size={tabSize}
                         onClick={handleClick(id)}
                         extraProps={{
-                            'aria-current': isActive || undefined,
+                            role: 'tab',
+                            'aria-selected': isActive,
                         }}
                     />
                 );

diff --git a/src/components/ButtonTabs/__tests__/ButtonTabs.test.tsx b/src/components/ButtonTabs/__tests__/ButtonTabs.test.tsx
@@ -36,7 +36,7 @@ describe('ButtonTabs', () => {
     test('has active tab', async () => {
         const activeTabId = 1;
         render(<ButtonTabs items={items} qa={qa} activeTab={String(activeTabId)} />);
-        const buttons = screen.getAllByRole('button');
+        const buttons = screen.getAllByRole('tab');
 
         buttons.forEach((button, index) => {
             if (index === activeTabId) {
@@ -59,7 +59,7 @@ describe('ButtonTabs', () => {
         const handleOnClick = jest.fn();
         render(<ButtonTabs items={items} qa={qa} onSelectTab={handleOnClick} />);
 
-        const buttons = screen.getAllByRole('button');
+        const buttons = screen.getAllByRole('tab');
 
         buttons.forEach(async (button, i) => {
             await user.click(button);