@instructure/ui-tabs 10.14.0 → 10.14.1-snapshot-0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.14.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-0) (2025-03-17)
+
+**Note:** Version bump only for package @instructure/ui-tabs
+
+
+
+
+
 # [10.14.0](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.14.0) (2025-03-17)
 
 **Note:** Version bump only for package @instructure/ui-tabs

package/es/Tabs/{TabsLocator.js → Panel/__new-tests__/Panel.test.js}

@@ -1,3 +1,4 @@
+var _Panel, _Panel2;
 /*
  * The MIT License (MIT)
  *
@@ -21,27 +22,27 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { locator } from '@instructure/ui-test-locator';
-import { Tabs } from './index';
-const TabLocator = locator('[role="tab"]');
-const PanelLocator = locator('[role="tabpanel"]');
-const SelectedTabLocator = locator('[role="tab"][aria-selected="true"]');
 
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-export const TabsLocator = locator(Tabs.selector, {
-  findTab: (...args) => {
-    return TabLocator.find(...args);
-  },
-  findAllTabs: (...args) => {
-    return TabLocator.findAll(...args);
-  },
-  findSelectedTab: (...args) => {
-    return SelectedTabLocator.find(...args);
-  },
-  findTabPanel: (...args) => {
-    return PanelLocator.find(...args);
-  },
-  findAllTabPanels: (...args) => {
-    return PanelLocator.findAll(...args);
-  }
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Panel } from '../index';
+describe('<Tabs.Panel />', () => {
+  it('should render children', async () => {
+    render(_Panel || (_Panel = /*#__PURE__*/React.createElement(Panel, {
+      isSelected: true,
+      renderTitle: "Panel Title"
+    }, "Panel contents")));
+    const children = screen.getByText('Panel contents');
+    expect(children).toBeInTheDocument();
+  });
+  it('should have appropriate role attribute', async () => {
+    const _render = render(_Panel2 || (_Panel2 = /*#__PURE__*/React.createElement(Panel, {
+        isSelected: true,
+        renderTitle: "Panel Title"
+      }, "Panel contents"))),
+      container = _render.container;
+    const tabPanel = container.querySelector('[class$="-panel"]');
+    expect(tabPanel).toHaveAttribute('role', 'tabpanel');
+  });
 });

package/es/Tabs/Tab/__new-tests__/Tab.test.js

@@ -0,0 +1,175 @@
+var _Tab, _Tab2, _Tab3, _Tab4, _Tab5, _Tab6, _Tab7, _Tab8;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Tab } from '../index';
+describe('<Tabs.Tab />', () => {
+  it('should render children', async () => {
+    render(_Tab || (_Tab = /*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel"
+    }, "Tab Label")));
+    const children = screen.getByText('Tab Label');
+    expect(children).toBeInTheDocument();
+  });
+  it('should have appropriate role attribute', async () => {
+    render(_Tab2 || (_Tab2 = /*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel"
+    }, "Tab Label")));
+    const tab = screen.getByRole('tab');
+    expect(tab).toBeInTheDocument();
+  });
+  it('should have appropriate aria attributes', async () => {
+    render(_Tab3 || (_Tab3 = /*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel"
+    }, "Tab Label")));
+    const tab = screen.getByRole('tab');
+    expect(tab).not.toHaveAttribute('aria-selected');
+    expect(tab).not.toHaveAttribute('aria-disabled');
+  });
+  it('should set the aria-selected attribute', async () => {
+    render(_Tab4 || (_Tab4 = /*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      isSelected: true
+    }, "Tab Label")));
+    const tab = screen.getByRole('tab');
+    expect(tab).toHaveAttribute('aria-selected', 'true');
+  });
+  it('should set the aria-disabled attribute', async () => {
+    render(_Tab5 || (_Tab5 = /*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      isDisabled: true
+    }, "Tab Label")));
+    const tab = screen.getByRole('tab');
+    expect(tab).toHaveAttribute('aria-disabled', 'true');
+  });
+  it('should set the tabindex to 0 when selected', async () => {
+    render(_Tab6 || (_Tab6 = /*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      isSelected: true
+    }, "Tab Label")));
+    const tab = screen.getByRole('tab');
+    expect(tab).toHaveAttribute('tabindex', '0');
+  });
+  it('should not set the tabindex when not selected', async () => {
+    render(_Tab7 || (_Tab7 = /*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel"
+    }, "Tab Label")));
+    const tab = screen.getByRole('tab');
+    expect(tab).not.toHaveAttribute('tabindex');
+  });
+  it('should remove the tabindex attribute when disabled', async () => {
+    render(_Tab8 || (_Tab8 = /*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      isDisabled: true
+    }, "Tab Label")));
+    const tab = screen.getByRole('tab');
+    expect(tab).not.toHaveAttribute('tabindex');
+  });
+  it('should call onClick when clicked', async () => {
+    const onClick = vi.fn();
+    const index = 2;
+    render(/*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: index,
+      controls: "foo-panel",
+      onClick: onClick
+    }, "Tab Label"));
+    const tab = screen.getByRole('tab');
+    await userEvent.click(tab);
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalled();
+      const args = onClick.mock.calls[0][1];
+      expect(args).toHaveProperty('index', index);
+    });
+  });
+  it('should NOT call onClick when clicked and tab is disabled', async () => {
+    const onClick = vi.fn();
+    render(/*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      onClick: onClick,
+      isDisabled: true
+    }, "Tab Label"));
+    const tab = screen.getByRole('tab');
+    await userEvent.click(tab);
+    await waitFor(() => {
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+  it('should call onKeyDown when keys are pressed and tab is selected', async () => {
+    const onKeyDown = vi.fn();
+    const index = 2;
+    render(/*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      isSelected: true,
+      index: index,
+      controls: "foo-panel",
+      onKeyDown: onKeyDown
+    }, "Tab Label"));
+    const tab = screen.getByRole('tab');
+    await userEvent.type(tab, '{enter}');
+    await waitFor(() => {
+      expect(onKeyDown).toHaveBeenCalled();
+      const args = onKeyDown.mock.calls[0][1];
+      expect(args).toHaveProperty('index', index);
+    });
+  });
+  it('should NOT call onKeyDown when keys are pressed and tab is disabled', async () => {
+    const onKeyDown = vi.fn();
+    render(/*#__PURE__*/React.createElement(Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      onKeyDown: onKeyDown,
+      isDisabled: true
+    }, "Tab Label"));
+    const tab = screen.getByRole('tab');
+    await userEvent.type(tab, '{enter}');
+    await waitFor(() => {
+      expect(onKeyDown).not.toHaveBeenCalled();
+    });
+  });
+});

package/es/Tabs/__new-tests__/Tabs.test.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _p, _Tabs, _Tabs2, _Tabs3;
+var _p, _Tabs, _Tabs2, _Tabs3, _Tabs4, _Tabs5, _Tabs6, _Tabs9, _Tabs$Panel, _Tabs$Panel2, _Tabs$Panel3, _Tabs10, _Tabs$Panel4, _Tabs$Panel5, _Tabs$Panel6, _Tabs11, _Tabs12, _Tabs13, _Tabs14, _Tabs15;
 /*
  * The MIT License (MIT)
  *
@@ -25,10 +25,12 @@ var _p, _Tabs, _Tabs2, _Tabs3;
  */
 
 import React from 'react';
-import { Tabs } from '../index';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Tabs } from '../index';
 const TabExample = props => {
   const _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -59,13 +61,20 @@ const TabExample = props => {
   }));
 };
 describe('<Tabs />', () => {
+  var _Tabs7, _Tabs8;
+  const tab1Content = 'Tab 1 content';
+  const tab2Content = 'Tab 2 content';
+  const tab3Content = 'Tab 3 content';
   let consoleErrorMock;
+  let consoleWarningMock;
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
     consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
   });
   afterEach(() => {
     consoleErrorMock.mockRestore();
+    consoleWarningMock.mockRestore();
   });
   it('should render the correct number of panels', () => {
     const _render = render(_Tabs || (_Tabs = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
@@ -77,10 +86,40 @@ describe('<Tabs />', () => {
         isDisabled: true
       }, "Tab 3 content")))),
       container = _render.container;
-    expect(container.firstChild).toBeInTheDocument();
+    const panels = container.querySelectorAll('[role="tabpanel"]');
+    expect(panels.length).toBe(3);
   });
-  it('should render same content for other tabs as for the active one', () => {
+  it('should render with null children', async () => {
     const _render2 = render(_Tabs2 || (_Tabs2 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content"), null))),
+      container = _render2.container;
+    const panels = container.querySelectorAll('[role="tabpanel"]');
+    expect(panels.length).toBe(3);
+  });
+  it('should be okay with rendering without any children', async () => {
+    render(_Tabs3 || (_Tabs3 = /*#__PURE__*/React.createElement(Tabs, null)));
+    expect(consoleErrorMock).not.toHaveBeenCalled();
+  });
+  it('should render correct number of tabs', async () => {
+    render(_Tabs4 || (_Tabs4 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "First Tab"
+    }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "Second Tab"
+    }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "Third Tab",
+      isDisabled: true
+    }, "Tab 3 content"))));
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs.length).toBe(3);
+  });
+  it('should render same content for other tabs as for the active one', () => {
+    const _render3 = render(_Tabs5 || (_Tabs5 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
         renderTitle: "First Tab",
         active: true
       }, "CONTENT"), /*#__PURE__*/React.createElement(Tabs.Panel, {
@@ -90,28 +129,30 @@ describe('<Tabs />', () => {
       }, "Child"), /*#__PURE__*/React.createElement(Tabs.Panel, {
         renderTitle: "Third Tab"
       }, "Child")))),
-      container = _render2.container;
+      container = _render3.container;
     const tabContent = screen.getByText('CONTENT');
     expect(container).toBeInTheDocument();
     expect(tabContent).toBeInTheDocument();
     const childContent = screen.queryByText('Child');
     expect(childContent).toBeNull();
   });
-  it('should render the same content in second tab when selected', () => {
+  it('should render the same content in second tab when selected', async () => {
     const onIndexChange = vi.fn();
-    const _render3 = render(/*#__PURE__*/React.createElement(TabExample, {
+    const _render4 = render(/*#__PURE__*/React.createElement(TabExample, {
         onIndexChange: onIndexChange
       })),
-      container = _render3.container;
+      container = _render4.container;
     expect(container).toBeInTheDocument();
     const secondTab = screen.getAllByRole('tab')[1];
-    fireEvent.click(secondTab);
-    expect(onIndexChange).toHaveBeenCalledWith(1);
+    await userEvent.click(secondTab);
+    await waitFor(() => {
+      expect(onIndexChange).toHaveBeenCalledWith(1);
+    });
     const panelContent = screen.queryByText('CONTENT');
     expect(panelContent).toBeInTheDocument();
   });
   it('should warn if multiple active tabs exist', () => {
-    const _render4 = render(_Tabs3 || (_Tabs3 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+    const _render5 = render(_Tabs6 || (_Tabs6 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
         renderTitle: "First Tab",
         active: true
       }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
@@ -121,8 +162,200 @@ describe('<Tabs />', () => {
         renderTitle: "Third Tab",
         isDisabled: true
       }, "Tab 3 content")))),
-      container = _render4.container;
+      container = _render5.container;
     expect(container.firstChild).toBeInTheDocument();
     expect(consoleErrorMock.mock.calls[0][0]).toEqual('Warning: [Tabs] Only one Panel can be marked as active.');
   });
+  it('should default to selecting the first tab', async () => {
+    const _render6 = render(_Tabs7 || (_Tabs7 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, tab1Content), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, tab2Content), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, tab3Content)))),
+      container = _render6.container;
+    const panelsContainer = container.querySelector('[class$="panelsContainer"]');
+    expect(panelsContainer).toHaveTextContent(tab1Content);
+    expect(screen.getByText(tab1Content)).toBeVisible();
+    expect(panelsContainer).not.toHaveTextContent(tab2Content);
+    expect(panelsContainer).not.toHaveTextContent(tab3Content);
+  });
+  it('should honor the isSelected prop', async () => {
+    const _render7 = render(_Tabs8 || (_Tabs8 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, tab1Content), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab",
+        isSelected: true
+      }, tab2Content), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, tab3Content)))),
+      container = _render7.container;
+    const panelsContainer = container.querySelector('[class$="panelsContainer"]');
+    expect(panelsContainer).toHaveTextContent(tab2Content);
+    expect(screen.getByText(tab2Content)).toBeVisible();
+    expect(panelsContainer).not.toHaveTextContent(tab1Content);
+    expect(panelsContainer).not.toHaveTextContent(tab3Content);
+  });
+  it('should not allow selecting a disabled tab', async () => {
+    const _render8 = render(_Tabs9 || (_Tabs9 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true,
+        isSelected: true
+      }, "Tab 3 content")))),
+      container = _render8.container;
+    const panelsContainer = container.querySelector('[class$="panelsContainer"]');
+    const panels = container.querySelectorAll('[role="tabpanel"]');
+    expect(panelsContainer).toHaveTextContent(tab1Content);
+    expect(screen.getByText(tab1Content)).toBeVisible();
+    expect(panelsContainer).not.toHaveTextContent(tab2Content);
+    expect(panelsContainer).not.toHaveTextContent(tab3Content);
+    expect(panels.length).toBe(3);
+    expect(panels[0]).not.toHaveAttribute('aria-hidden', 'true');
+    expect(panels[1]).toHaveAttribute('aria-hidden', 'true');
+    expect(panels[2]).toHaveAttribute('aria-hidden', 'true');
+  });
+  it('should call onRequestTabChange when selection changes via click', async () => {
+    const onChange = vi.fn();
+    render(/*#__PURE__*/React.createElement(Tabs, {
+      onRequestTabChange: onChange
+    }, _Tabs$Panel || (_Tabs$Panel = /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "First Tab",
+      isSelected: true,
+      id: "one"
+    }, "Tab 1 content")), _Tabs$Panel2 || (_Tabs$Panel2 = /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "Second Tab",
+      id: "two"
+    }, "Tab 2 content")), _Tabs$Panel3 || (_Tabs$Panel3 = /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "Third Tab",
+      isDisabled: true,
+      id: "three"
+    }, "Tab 3 content"))));
+    const secondTab = screen.getByText('Second Tab');
+    await userEvent.click(secondTab);
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalled();
+      const args = onChange.mock.calls[0][1];
+      expect(args).toHaveProperty('index', 1);
+      expect(args).toHaveProperty('id', 'two');
+    });
+  });
+  it('should focus the selected tab when shouldFocusOnRender is set', async () => {
+    render(_Tabs10 || (_Tabs10 = /*#__PURE__*/React.createElement(Tabs, {
+      shouldFocusOnRender: true
+    }, /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "First Tab"
+    }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "Second Tab",
+      isSelected: true
+    }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "Third Tab",
+      isDisabled: true
+    }, "Tab 3 content"))));
+    const secondTab = screen.getByText('Second Tab');
+    await waitFor(() => {
+      expect(document.activeElement).toBe(secondTab);
+    });
+  });
+  it('should not call onRequestTabChange when clicking a disabled tab', async () => {
+    const onChange = vi.fn();
+    render(/*#__PURE__*/React.createElement(Tabs, {
+      onRequestTabChange: onChange
+    }, _Tabs$Panel4 || (_Tabs$Panel4 = /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "First Tab"
+    }, "Tab 1 content")), _Tabs$Panel5 || (_Tabs$Panel5 = /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "Second Tab"
+    }, "Tab 2 content")), _Tabs$Panel6 || (_Tabs$Panel6 = /*#__PURE__*/React.createElement(Tabs.Panel, {
+      renderTitle: "Third Tab",
+      isDisabled: true
+    }, "Tab 3 content"))));
+    const thirdTab = screen.getByText('Third Tab');
+    await userEvent.click(thirdTab);
+    await waitFor(() => {
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+  it('should meet a11y standards when set to the secondary variant', async () => {
+    const _render9 = render(_Tabs11 || (_Tabs11 = /*#__PURE__*/React.createElement(Tabs, {
+        variant: "secondary"
+      }, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render9.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should meet a11y standards when set to the default variant', async () => {
+    const _render10 = render(_Tabs12 || (_Tabs12 = /*#__PURE__*/React.createElement(Tabs, {
+        variant: "default"
+      }, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render10.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should link tabs with the corresponding panels via ids', async () => {
+    const _render11 = render(_Tabs13 || (_Tabs13 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render11.container;
+    const firstTab = screen.getByText('First Tab');
+    const firstPanel = container.querySelectorAll('[role="tabpanel"]')[0];
+    expect(firstTab).toHaveAttribute('aria-controls', firstPanel.id);
+    expect(firstPanel).toHaveAttribute('aria-labelledby', firstTab.id);
+  });
+  describe('with duplicate-named tabs', () => {
+    it('should still render the correct number of panels', async () => {
+      const _render12 = render(_Tabs14 || (_Tabs14 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+          renderTitle: "A Tab"
+        }, "Contents of first tab."), /*#__PURE__*/React.createElement(Tabs.Panel, {
+          renderTitle: "A Tab"
+        }, "Contents of second tab."), /*#__PURE__*/React.createElement(Tabs.Panel, {
+          renderTitle: "A Tab",
+          isDisabled: true
+        }, "Contents of third tab.")))),
+        container = _render12.container;
+      const tabPanels = container.querySelectorAll('[role="tabpanel"]');
+      expect(tabPanels.length).toBe(3);
+    });
+  });
+  describe('with nodes as tab titles', () => {
+    it('should still render the correct number of panels', async () => {
+      const _render13 = render(_Tabs15 || (_Tabs15 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+          renderTitle: /*#__PURE__*/React.createElement("div", null)
+        }, "Contents of first tab."), /*#__PURE__*/React.createElement(Tabs.Panel, {
+          renderTitle: /*#__PURE__*/React.createElement("span", null)
+        }, "Contents of second tab."), /*#__PURE__*/React.createElement(Tabs.Panel, {
+          renderTitle: /*#__PURE__*/React.createElement("img", {
+            alt: "example"
+          }),
+          isDisabled: true
+        }, "Contents of third tab.")))),
+        container = _render13.container;
+      const tabPanels = container.querySelectorAll('[role="tabpanel"]');
+      expect(tabPanels.length).toBe(3);
+    });
+  });
 });

package/lib/Tabs/{TabsLocator.js → Panel/__new-tests__/Panel.test.js}

@@ -1,11 +1,11 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TabsLocator = void 0;
-var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-var _index = require("./index");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _Panel, _Panel2;
 /*
  * The MIT License (MIT)
  *
@@ -29,26 +29,22 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-const TabLocator = (0, _locator.locator)('[role="tab"]');
-const PanelLocator = (0, _locator.locator)('[role="tabpanel"]');
-const SelectedTabLocator = (0, _locator.locator)('[role="tab"][aria-selected="true"]');
-
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-const TabsLocator = exports.TabsLocator = (0, _locator.locator)(_index.Tabs.selector, {
-  findTab: (...args) => {
-    return TabLocator.find(...args);
-  },
-  findAllTabs: (...args) => {
-    return TabLocator.findAll(...args);
-  },
-  findSelectedTab: (...args) => {
-    return SelectedTabLocator.find(...args);
-  },
-  findTabPanel: (...args) => {
-    return PanelLocator.find(...args);
-  },
-  findAllTabPanels: (...args) => {
-    return PanelLocator.findAll(...args);
-  }
+describe('<Tabs.Panel />', () => {
+  it('should render children', async () => {
+    (0, _react2.render)(_Panel || (_Panel = /*#__PURE__*/_react.default.createElement(_index.Panel, {
+      isSelected: true,
+      renderTitle: "Panel Title"
+    }, "Panel contents")));
+    const children = _react2.screen.getByText('Panel contents');
+    expect(children).toBeInTheDocument();
+  });
+  it('should have appropriate role attribute', async () => {
+    const _render = (0, _react2.render)(_Panel2 || (_Panel2 = /*#__PURE__*/_react.default.createElement(_index.Panel, {
+        isSelected: true,
+        renderTitle: "Panel Title"
+      }, "Panel contents"))),
+      container = _render.container;
+    const tabPanel = container.querySelector('[class$="-panel"]');
+    expect(tabPanel).toHaveAttribute('role', 'tabpanel');
+  });
 });