fix(tabs): set tab panel id correctly (#3246)

.changeset/rich-shirts-turn.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/tabs": patch
+---
+
+Fixed set tab panel id correctly (#2809)

apps/docs/content/components/tabs/placement.ts

@@ -7,7 +7,6 @@ export default function App() {
       <RadioGroup
         className="mb-4"
         label="Placement"
-        orientation="top"
         value={placement}
         onValueChange={(value) => setPlacement(value)}
       >

packages/components/tabs/__tests__/tabs.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {act, render, fireEvent} from "@testing-library/react";
+import {act, render, fireEvent, within} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {focus} from "@nextui-org/test-utils";
 
@@ -11,7 +11,7 @@ type Item = {
   content?: React.ReactNode;
 };
 
-let tabs: Item[] = [
+let defaultItems: Item[] = [
   {
     id: "item1",
     label: "Item1 ",
@@ -76,7 +76,7 @@ describe("Tabs", () => {
 
   it("should render correctly (dynamic)", () => {
     const wrapper = render(
-      <Tabs aria-label="Tabs static test" items={tabs}>
+      <Tabs aria-label="Tabs static test" items={defaultItems}>
         {(item) => (
           <Tab key={item.id} title={item.label}>
             <div>{item.content}</div>
@@ -88,6 +88,40 @@ describe("Tabs", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
+  it("renders property", () => {
+    const wrapper = render(
+      <Tabs aria-label="Tabs property test">
+        {defaultItems.map((item) => (
+          <Tab key={item.id} title={item.label}>
+            <div>{item.content}</div>
+          </Tab>
+        ))}
+      </Tabs>,
+    );
+    const tablist = wrapper.getByRole("tablist");
+
+    expect(tablist).toBeTruthy();
+    const tabs = within(tablist).getAllByRole("tab");
+
+    expect(tabs.length).toBe(3);
+
+    for (let tab of tabs) {
+      expect(tab).toHaveAttribute("tabindex");
+      expect(tab).toHaveAttribute("aria-selected");
+      const isSelected = tab.getAttribute("aria-selected") === "true";
+
+      if (isSelected) {
+        expect(tab).toHaveAttribute("aria-controls");
+        const tabpanel = document.getElementById(tab.getAttribute("aria-controls")!);
+
+        expect(tabpanel).toBeTruthy();
+        expect(tabpanel).toHaveAttribute("aria-labelledby", tab.id);
+        expect(tabpanel).toHaveAttribute("role", "tabpanel");
+        expect(tabpanel).toHaveTextContent(defaultItems[0]?.content as string);
+      }
+    }
+  });
+
   it("ref should be forwarded", () => {
     const ref = React.createRef<HTMLDivElement>();
 

packages/components/tabs/src/tab-panel.tsx

@@ -47,7 +47,7 @@ const TabPanel = forwardRef<"div", TabPanelProps>((props, ref) => {
 
   const domRef = useDOMRef(ref);
 
-  const {tabPanelProps} = useTabPanel(props, state, domRef);
+  const {tabPanelProps} = useTabPanel({...props, id: String(tabKey)}, state, domRef);
 
   const {focusProps, isFocused, isFocusVisible} = useFocusRing();
 

packages/components/tabs/src/tab.tsx

@@ -61,6 +61,10 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
     isPressed,
   } = useTab({key, isDisabled: isDisabledProp, shouldSelectOnPressUp}, state, domRef);
 
+  if (props.children == null) {
+    delete tabProps["aria-controls"];
+  }
+
   const isDisabled = isDisabledProp || isDisabledItem;
 
   const {focusProps, isFocused, isFocusVisible} = useFocusRing();