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

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

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+var _index = require("../index");
+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.
+ */
+describe('<Tabs.Tab />', () => {
+  it('should render children', async () => {
+    (0, _react2.render)(_Tab || (_Tab = /*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel"
+    }, "Tab Label")));
+    const children = _react2.screen.getByText('Tab Label');
+    expect(children).toBeInTheDocument();
+  });
+  it('should have appropriate role attribute', async () => {
+    (0, _react2.render)(_Tab2 || (_Tab2 = /*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel"
+    }, "Tab Label")));
+    const tab = _react2.screen.getByRole('tab');
+    expect(tab).toBeInTheDocument();
+  });
+  it('should have appropriate aria attributes', async () => {
+    (0, _react2.render)(_Tab3 || (_Tab3 = /*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel"
+    }, "Tab Label")));
+    const tab = _react2.screen.getByRole('tab');
+    expect(tab).not.toHaveAttribute('aria-selected');
+    expect(tab).not.toHaveAttribute('aria-disabled');
+  });
+  it('should set the aria-selected attribute', async () => {
+    (0, _react2.render)(_Tab4 || (_Tab4 = /*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      isSelected: true
+    }, "Tab Label")));
+    const tab = _react2.screen.getByRole('tab');
+    expect(tab).toHaveAttribute('aria-selected', 'true');
+  });
+  it('should set the aria-disabled attribute', async () => {
+    (0, _react2.render)(_Tab5 || (_Tab5 = /*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      isDisabled: true
+    }, "Tab Label")));
+    const tab = _react2.screen.getByRole('tab');
+    expect(tab).toHaveAttribute('aria-disabled', 'true');
+  });
+  it('should set the tabindex to 0 when selected', async () => {
+    (0, _react2.render)(_Tab6 || (_Tab6 = /*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      isSelected: true
+    }, "Tab Label")));
+    const tab = _react2.screen.getByRole('tab');
+    expect(tab).toHaveAttribute('tabindex', '0');
+  });
+  it('should not set the tabindex when not selected', async () => {
+    (0, _react2.render)(_Tab7 || (_Tab7 = /*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel"
+    }, "Tab Label")));
+    const tab = _react2.screen.getByRole('tab');
+    expect(tab).not.toHaveAttribute('tabindex');
+  });
+  it('should remove the tabindex attribute when disabled', async () => {
+    (0, _react2.render)(_Tab8 || (_Tab8 = /*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      isDisabled: true
+    }, "Tab Label")));
+    const tab = _react2.screen.getByRole('tab');
+    expect(tab).not.toHaveAttribute('tabindex');
+  });
+  it('should call onClick when clicked', async () => {
+    const onClick = _vitest.vi.fn();
+    const index = 2;
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: index,
+      controls: "foo-panel",
+      onClick: onClick
+    }, "Tab Label"));
+    const tab = _react2.screen.getByRole('tab');
+    await _userEvent.default.click(tab);
+    await (0, _react2.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 = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      onClick: onClick,
+      isDisabled: true
+    }, "Tab Label"));
+    const tab = _react2.screen.getByRole('tab');
+    await _userEvent.default.click(tab);
+    await (0, _react2.waitFor)(() => {
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+  it('should call onKeyDown when keys are pressed and tab is selected', async () => {
+    const onKeyDown = _vitest.vi.fn();
+    const index = 2;
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      isSelected: true,
+      index: index,
+      controls: "foo-panel",
+      onKeyDown: onKeyDown
+    }, "Tab Label"));
+    const tab = _react2.screen.getByRole('tab');
+    await _userEvent.default.type(tab, '{enter}');
+    await (0, _react2.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 = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tab, {
+      id: "foo",
+      index: 0,
+      controls: "foo-panel",
+      onKeyDown: onKeyDown,
+      isDisabled: true
+    }, "Tab Label"));
+    const tab = _react2.screen.getByRole('tab');
+    await _userEvent.default.type(tab, '{enter}');
+    await (0, _react2.waitFor)(() => {
+      expect(onKeyDown).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -3,11 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _index = require("../index");
 var _react2 = require("@testing-library/react");
 var _vitest = require("vitest");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
-var _p, _Tabs, _Tabs2, _Tabs3;
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+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)
  *
@@ -61,13 +63,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 = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
   });
   afterEach(() => {
     consoleErrorMock.mockRestore();
+    consoleWarningMock.mockRestore();
   });
   it('should render the correct number of panels', () => {
     const _render = (0, _react2.render)(_Tabs || (_Tabs = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
@@ -79,10 +88,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 = (0, _react2.render)(_Tabs2 || (_Tabs2 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.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 () => {
+    (0, _react2.render)(_Tabs3 || (_Tabs3 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null)));
+    expect(consoleErrorMock).not.toHaveBeenCalled();
+  });
+  it('should render correct number of tabs', async () => {
+    (0, _react2.render)(_Tabs4 || (_Tabs4 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "First Tab"
+    }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "Second Tab"
+    }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "Third Tab",
+      isDisabled: true
+    }, "Tab 3 content"))));
+    const tabs = _react2.screen.getAllByRole('tab');
+    expect(tabs.length).toBe(3);
+  });
+  it('should render same content for other tabs as for the active one', () => {
+    const _render3 = (0, _react2.render)(_Tabs5 || (_Tabs5 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
         renderTitle: "First Tab",
         active: true
       }, "CONTENT"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
@@ -92,28 +131,30 @@ describe('<Tabs />', () => {
       }, "Child"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
         renderTitle: "Third Tab"
       }, "Child")))),
-      container = _render2.container;
+      container = _render3.container;
     const tabContent = _react2.screen.getByText('CONTENT');
     expect(container).toBeInTheDocument();
     expect(tabContent).toBeInTheDocument();
     const childContent = _react2.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 = _vitest.vi.fn();
-    const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(TabExample, {
+    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(TabExample, {
         onIndexChange: onIndexChange
       })),
-      container = _render3.container;
+      container = _render4.container;
     expect(container).toBeInTheDocument();
     const secondTab = _react2.screen.getAllByRole('tab')[1];
-    _react2.fireEvent.click(secondTab);
-    expect(onIndexChange).toHaveBeenCalledWith(1);
+    await _userEvent.default.click(secondTab);
+    await (0, _react2.waitFor)(() => {
+      expect(onIndexChange).toHaveBeenCalledWith(1);
+    });
     const panelContent = _react2.screen.queryByText('CONTENT');
     expect(panelContent).toBeInTheDocument();
   });
   it('should warn if multiple active tabs exist', () => {
-    const _render4 = (0, _react2.render)(_Tabs3 || (_Tabs3 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+    const _render5 = (0, _react2.render)(_Tabs6 || (_Tabs6 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
         renderTitle: "First Tab",
         active: true
       }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
@@ -123,8 +164,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 = (0, _react2.render)(_Tabs7 || (_Tabs7 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, tab1Content), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, tab2Content), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, tab3Content)))),
+      container = _render6.container;
+    const panelsContainer = container.querySelector('[class$="panelsContainer"]');
+    expect(panelsContainer).toHaveTextContent(tab1Content);
+    expect(_react2.screen.getByText(tab1Content)).toBeVisible();
+    expect(panelsContainer).not.toHaveTextContent(tab2Content);
+    expect(panelsContainer).not.toHaveTextContent(tab3Content);
+  });
+  it('should honor the isSelected prop', async () => {
+    const _render7 = (0, _react2.render)(_Tabs8 || (_Tabs8 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, tab1Content), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab",
+        isSelected: true
+      }, tab2Content), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, tab3Content)))),
+      container = _render7.container;
+    const panelsContainer = container.querySelector('[class$="panelsContainer"]');
+    expect(panelsContainer).toHaveTextContent(tab2Content);
+    expect(_react2.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 = (0, _react2.render)(_Tabs9 || (_Tabs9 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.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(_react2.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 = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tabs, {
+      onRequestTabChange: onChange
+    }, _Tabs$Panel || (_Tabs$Panel = /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "First Tab",
+      isSelected: true,
+      id: "one"
+    }, "Tab 1 content")), _Tabs$Panel2 || (_Tabs$Panel2 = /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "Second Tab",
+      id: "two"
+    }, "Tab 2 content")), _Tabs$Panel3 || (_Tabs$Panel3 = /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "Third Tab",
+      isDisabled: true,
+      id: "three"
+    }, "Tab 3 content"))));
+    const secondTab = _react2.screen.getByText('Second Tab');
+    await _userEvent.default.click(secondTab);
+    await (0, _react2.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 () => {
+    (0, _react2.render)(_Tabs10 || (_Tabs10 = /*#__PURE__*/_react.default.createElement(_index.Tabs, {
+      shouldFocusOnRender: true
+    }, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "First Tab"
+    }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "Second Tab",
+      isSelected: true
+    }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "Third Tab",
+      isDisabled: true
+    }, "Tab 3 content"))));
+    const secondTab = _react2.screen.getByText('Second Tab');
+    await (0, _react2.waitFor)(() => {
+      expect(document.activeElement).toBe(secondTab);
+    });
+  });
+  it('should not call onRequestTabChange when clicking a disabled tab', async () => {
+    const onChange = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tabs, {
+      onRequestTabChange: onChange
+    }, _Tabs$Panel4 || (_Tabs$Panel4 = /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "First Tab"
+    }, "Tab 1 content")), _Tabs$Panel5 || (_Tabs$Panel5 = /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "Second Tab"
+    }, "Tab 2 content")), _Tabs$Panel6 || (_Tabs$Panel6 = /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+      renderTitle: "Third Tab",
+      isDisabled: true
+    }, "Tab 3 content"))));
+    const thirdTab = _react2.screen.getByText('Third Tab');
+    await _userEvent.default.click(thirdTab);
+    await (0, _react2.waitFor)(() => {
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+  it('should meet a11y standards when set to the secondary variant', async () => {
+    const _render9 = (0, _react2.render)(_Tabs11 || (_Tabs11 = /*#__PURE__*/_react.default.createElement(_index.Tabs, {
+        variant: "secondary"
+      }, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render9.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should meet a11y standards when set to the default variant', async () => {
+    const _render10 = (0, _react2.render)(_Tabs12 || (_Tabs12 = /*#__PURE__*/_react.default.createElement(_index.Tabs, {
+        variant: "default"
+      }, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render10.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should link tabs with the corresponding panels via ids', async () => {
+    const _render11 = (0, _react2.render)(_Tabs13 || (_Tabs13 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render11.container;
+    const firstTab = _react2.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 = (0, _react2.render)(_Tabs14 || (_Tabs14 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+          renderTitle: "A Tab"
+        }, "Contents of first tab."), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+          renderTitle: "A Tab"
+        }, "Contents of second tab."), /*#__PURE__*/_react.default.createElement(_index.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 = (0, _react2.render)(_Tabs15 || (_Tabs15 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+          renderTitle: /*#__PURE__*/_react.default.createElement("div", null)
+        }, "Contents of first tab."), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+          renderTitle: /*#__PURE__*/_react.default.createElement("span", null)
+        }, "Contents of second tab."), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+          renderTitle: /*#__PURE__*/_react.default.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "10.14.0",
+  "version": "10.14.1-snapshot-1",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,31 +23,32 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.14.0",
-    "@instructure/ui-color-utils": "10.14.0",
-    "@instructure/ui-test-locator": "10.14.0",
-    "@instructure/ui-test-utils": "10.14.0",
-    "@instructure/ui-themes": "10.14.0",
+    "@instructure/ui-axe-check": "10.14.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.14.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.14.1-snapshot-1",
+    "@instructure/ui-test-utils": "10.14.1-snapshot-1",
+    "@instructure/ui-themes": "10.14.1-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "vitest": "^2.1.8"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.14.0",
-    "@instructure/debounce": "10.14.0",
-    "@instructure/emotion": "10.14.0",
-    "@instructure/shared-types": "10.14.0",
-    "@instructure/ui-dom-utils": "10.14.0",
-    "@instructure/ui-focusable": "10.14.0",
-    "@instructure/ui-i18n": "10.14.0",
-    "@instructure/ui-motion": "10.14.0",
-    "@instructure/ui-prop-types": "10.14.0",
-    "@instructure/ui-react-utils": "10.14.0",
-    "@instructure/ui-testable": "10.14.0",
-    "@instructure/ui-utils": "10.14.0",
-    "@instructure/ui-view": "10.14.0",
-    "@instructure/uid": "10.14.0",
+    "@instructure/console": "10.14.1-snapshot-1",
+    "@instructure/debounce": "10.14.1-snapshot-1",
+    "@instructure/emotion": "10.14.1-snapshot-1",
+    "@instructure/shared-types": "10.14.1-snapshot-1",
+    "@instructure/ui-dom-utils": "10.14.1-snapshot-1",
+    "@instructure/ui-focusable": "10.14.1-snapshot-1",
+    "@instructure/ui-i18n": "10.14.1-snapshot-1",
+    "@instructure/ui-motion": "10.14.1-snapshot-1",
+    "@instructure/ui-prop-types": "10.14.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.14.1-snapshot-1",
+    "@instructure/ui-testable": "10.14.1-snapshot-1",
+    "@instructure/ui-utils": "10.14.1-snapshot-1",
+    "@instructure/ui-view": "10.14.1-snapshot-1",
+    "@instructure/uid": "10.14.1-snapshot-1",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/Tabs/{locator.ts → Panel/__new-tests__/Panel.test.tsx}

@@ -21,7 +21,33 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { TabsLocator } from './TabsLocator'
 
-export { TabsLocator }
-export default TabsLocator
+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 isSelected renderTitle="Panel Title">
+        Panel contents
+      </Panel>
+    )
+    const children = screen.getByText('Panel contents')
+
+    expect(children).toBeInTheDocument()
+  })
+
+  it('should have appropriate role attribute', async () => {
+    const {container} = render(
+      <Panel isSelected renderTitle="Panel Title">
+        Panel contents
+      </Panel>
+    )
+    const tabPanel = container.querySelector('[class$="-panel"]')
+
+    expect(tabPanel).toHaveAttribute('role', 'tabpanel')
+  })
+})