fix(tabpanel): L3-4919 tab component was hiding the tabpanel role fro…

…m screen readers (#451)
PhillipsAuctionHouse · Dec 18, 2024 · 0f6e37c · 0f6e37c
1 parent 71dc21b
commit 0f6e37c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/components/Tabs/Tabs.test.tsx b/src/components/Tabs/Tabs.test.tsx
@@ -27,6 +27,8 @@ describe('Tabs', () => {
 
     // Verify default tab content is visible
     expect(screen.getByText('Overview content')).toBeVisible();
+    expect(screen.getByRole('tabpanel', { name: 'Overview' })).toBeInTheDocument();
+    expect(screen.queryByRole('tabpanel', { name: 'Browse lots' })).not.toBeInTheDocument();
   });
   test('renders ReactNode in tab', () => {
     const componentTabs = [
@@ -66,6 +68,8 @@ describe('Tabs', () => {
     await userEvent.click(screen.getByRole('tab', { name: /Browse/i }));
 
     expect(screen.getByText('Browse lots content')).toBeVisible();
+    expect(screen.getByRole('tabpanel', { name: 'Browse lots' })).toBeInTheDocument();
+    expect(screen.queryByRole('tabpanel', { name: 'Overview' })).not.toBeInTheDocument();
   });
   test('calls onTabClick when a tab is clicked', async () => {
     const onTabClickMock = vitest.fn();

diff --git a/src/components/Tabs/TabsContent.tsx b/src/components/Tabs/TabsContent.tsx
@@ -36,7 +36,6 @@ const TabsContent = forwardRef<HTMLDivElement, TabContentProps>(
         {...commonProps}
         ref={ref}
         tabIndex={-1}
-        aria-hidden
       >
         {children}
       </TabsPrimitive.Content>