@navikt/ds-react 6.4.1 → 6.5.0

package/src/tabs/Tabs.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { DishwasherIcon, FreezerIcon, MugIcon } from "@navikt/aksel-icons";
 import { Tabs } from ".";
+import { VStack } from "../layout/stack";
 
 export default {
   title: "ds-react/Tabs",
@@ -20,41 +21,44 @@ export default {
       },
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof Tabs>;
 
-const Panel = () => {
-  return (
-    <>
-      <Tabs.Panel
-        value="test1"
-        className="panel"
-        style={{ background: "var(--a-gray-50)", height: 100 }}
-      >
-        Innholdspanel for Skap-tab
-      </Tabs.Panel>
-      <Tabs.Panel
-        value="test2"
-        className="panel"
-        style={{
-          background: "var(--a-green-50)",
-          height: 100,
-        }}
-      >
-        Innholdspanel for Oppvaskmaskin-tab
-      </Tabs.Panel>
-      <Tabs.Panel
-        value="test3"
-        className="panel"
-        style={{ background: "var(--a-red-50)", height: 100 }}
-      >
-        Innholdspanel for Fryser-tab
-      </Tabs.Panel>
-      <style>{`.panel[data-state="active"] { display:grid; place-content: center;}`}</style>
-    </>
-  );
-};
+type Story = StoryObj<typeof Tabs>;
+
+const Panel = () => (
+  <>
+    <Tabs.Panel
+      value="test1"
+      className="panel"
+      style={{ background: "var(--a-gray-50)", height: 100 }}
+    >
+      Innholdspanel for Skap-tab
+    </Tabs.Panel>
+    <Tabs.Panel
+      value="test2"
+      className="panel"
+      style={{
+        background: "var(--a-green-50)",
+        height: 100,
+      }}
+    >
+      Innholdspanel for Oppvaskmaskin-tab
+    </Tabs.Panel>
+    <Tabs.Panel
+      value="test3"
+      className="panel"
+      style={{ background: "var(--a-red-50)", height: 100 }}
+    >
+      Innholdspanel for Fryser-tab
+    </Tabs.Panel>
+    <style>{`.panel[data-state="active"] { display:grid; place-content: center;}`}</style>
+  </>
+);
 
-export const Default = {
+export const Default: Story = {
   render: (props) => {
     return (
       <Tabs
@@ -65,13 +69,17 @@ export const Default = {
         iconPosition={props?.iconPosition}
       >
         <Tabs.List>
-          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+          <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
           <Tabs.Tab
             value="test2"
             label="Oppvaskmaskin"
-            icon={<DishwasherIcon />}
+            icon={<DishwasherIcon aria-hidden />}
+          />
+          <Tabs.Tab
+            value="test3"
+            icon={<FreezerIcon aria-hidden />}
+            label="Fryser"
           />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
         </Tabs.List>
         <Panel />
       </Tabs>
@@ -84,108 +92,220 @@ export const Default = {
   },
 };
 
-export const Small = () => {
+export const Small = () => (
+  <Tabs defaultValue="test2" size="small">
+    <Tabs.List>
+      <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
+      <Tabs.Tab
+        value="test2"
+        label="Oppvaskmaskin"
+        icon={<DishwasherIcon aria-hidden />}
+      />
+      <Tabs.Tab
+        value="test3"
+        icon={<FreezerIcon aria-hidden />}
+        label="Fryser"
+      />
+    </Tabs.List>
+    <Panel />
+  </Tabs>
+);
+
+export const Controlled = () => {
+  const [activeValue, setActiveValue] = useState("test1");
   return (
-    <Tabs defaultValue="test2" size="small">
+    <Tabs value={activeValue} onChange={setActiveValue}>
       <Tabs.List>
-        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+        <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
         <Tabs.Tab
           value="test2"
           label="Oppvaskmaskin"
-          icon={<DishwasherIcon />}
+          icon={<DishwasherIcon aria-hidden />}
+        />
+        <Tabs.Tab
+          value="test3"
+          icon={<FreezerIcon aria-hidden />}
+          label="Fryser"
         />
-        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>
   );
 };
 
-export const Controlled = () => {
-  const [activeValue, setActiveValue] = useState("test1");
-  return (
-    <Tabs value={activeValue} onChange={setActiveValue}>
+export const IconPosition = () => (
+  <VStack gap="4">
+    <Tabs defaultValue="test2" size="small">
       <Tabs.List>
-        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+        <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
         <Tabs.Tab
           value="test2"
           label="Oppvaskmaskin"
-          icon={<DishwasherIcon />}
+          icon={<DishwasherIcon aria-hidden />}
+        />
+        <Tabs.Tab
+          value="test3"
+          icon={<FreezerIcon aria-hidden />}
+          label="Fryser"
         />
-        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>
-  );
-};
-
-export const IconPosition = () => {
-  return (
-    <div className="colgap">
-      <Tabs defaultValue="test2" size="small">
-        <Tabs.List>
-          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
-          <Tabs.Tab
-            value="test2"
-            label="Oppvaskmaskin"
-            icon={<DishwasherIcon />}
-          />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-      <Tabs defaultValue="test2" size="small" iconPosition="top">
-        <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
-          <Tabs.Tab
-            value="test2"
-            label="Oppvaskmaskin"
-            icon={<DishwasherIcon />}
-          />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-    </div>
-  );
-};
-
-export const Icon = () => {
-  return (
-    <div className="colgap">
-      <Tabs defaultValue="test2">
-        <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<MugIcon />} />
-          <Tabs.Tab value="test2" icon={<DishwasherIcon />} />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-      <Tabs defaultValue="test2" size="small" iconPosition="top">
-        <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<MugIcon />} />
-          <Tabs.Tab value="test2" icon={<DishwasherIcon />} />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-    </div>
-  );
-};
-
-export const Overflow = () => {
-  return (
-    <Tabs defaultValue="test2" style={{ maxWidth: 300 }}>
-      <Tabs.List>
-        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+    <Tabs defaultValue="test2" size="small" iconPosition="top">
+      <Tabs.List style={{ margin: "0 auto" }}>
+        <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
         <Tabs.Tab
           value="test2"
           label="Oppvaskmaskin"
-          icon={<DishwasherIcon />}
+          icon={<DishwasherIcon aria-hidden />}
+        />
+        <Tabs.Tab
+          value="test3"
+          icon={<FreezerIcon aria-hidden />}
+          label="Fryser"
         />
-        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>
-  );
+  </VStack>
+);
+
+export const Icon = () => (
+  <VStack gap="4">
+    <Tabs defaultValue="test2">
+      <Tabs.List style={{ margin: "0 auto" }}>
+        <Tabs.Tab value="test1" icon={<MugIcon title="Skap" />} />
+        <Tabs.Tab
+          value="test2"
+          icon={<DishwasherIcon title="Oppvaskmaskin" />}
+        />
+        <Tabs.Tab value="test3" icon={<FreezerIcon title="Fryser" />} />
+      </Tabs.List>
+      <Panel />
+    </Tabs>
+    <Tabs defaultValue="test2" size="small" iconPosition="top">
+      <Tabs.List style={{ margin: "0 auto" }}>
+        <Tabs.Tab value="test1" icon={<MugIcon title="Skap" />} />
+        <Tabs.Tab
+          value="test2"
+          icon={<DishwasherIcon title="Oppvaskmaskin" />}
+        />
+        <Tabs.Tab value="test3" icon={<FreezerIcon title="Fryser" />} />
+      </Tabs.List>
+      <Panel />
+    </Tabs>
+  </VStack>
+);
+
+export const Overflow = () => (
+  <Tabs defaultValue="test2" style={{ maxWidth: 300 }}>
+    <Tabs.List>
+      <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
+      <Tabs.Tab
+        value="test2"
+        label="Oppvaskmaskin"
+        icon={<DishwasherIcon aria-hidden />}
+      />
+      <Tabs.Tab
+        value="test3"
+        icon={<FreezerIcon aria-hidden />}
+        label="Fryser"
+      />
+    </Tabs.List>
+    <Panel />
+  </Tabs>
+);
+
+export const Fill = () => (
+  <Tabs defaultValue="test2" fill>
+    <Tabs.List>
+      <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
+      <Tabs.Tab
+        value="test2"
+        icon={<DishwasherIcon aria-hidden />}
+        label="Oppvaskmaskin"
+      />
+      <Tabs.Tab
+        value="test3"
+        icon={<FreezerIcon aria-hidden />}
+        label="Fryser"
+      />
+    </Tabs.List>
+    <Panel />
+  </Tabs>
+);
+
+Fill.parameters = {
+  layout: "fullscreen",
+};
+
+export const CustomIds = () => (
+  <Tabs defaultValue="test2">
+    <Tabs.List>
+      <Tabs.Tab
+        value="test1"
+        label="Skap"
+        id="custom-tabid-1"
+        aria-controls="custom-tabpanelid-1"
+      />
+      <Tabs.Tab
+        value="test2"
+        label="Oppvaskmaskin"
+        id="custom-tabid-2"
+        aria-controls="custom-tabpanelid-2"
+      />
+    </Tabs.List>
+    <Tabs.Panel
+      value="test1"
+      className="panel"
+      id="custom-tabpanelid-1"
+      aria-labelledby="custom-tabid-1"
+    >
+      Innholdspanel for Skap-tab
+    </Tabs.Panel>
+    <Tabs.Panel
+      value="test2"
+      className="panel"
+      id="custom-tabpanelid-2"
+      aria-labelledby="custom-tabid-2"
+    >
+      Innholdspanel for Oppvaskmaskin-tab
+    </Tabs.Panel>
+  </Tabs>
+);
+
+export const Chromatic = {
+  render: () => (
+    <VStack gap="6" align="center">
+      <div>
+        <h2>Small</h2>
+        <Small />
+      </div>
+      <div>
+        <h2>Controlled</h2>
+        <Controlled />
+      </div>
+      <div>
+        <h2>IconPosition</h2>
+        <IconPosition />
+      </div>
+      <div>
+        <h2>Icon</h2>
+        <Icon />
+      </div>
+      <div>
+        <h2>Overflow</h2>
+        <Overflow />
+      </div>
+      <div>
+        <h2>Fill</h2>
+        <div style={{ minWidth: 600 }}>
+          <Fill />
+        </div>
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false, delay: 300 },
+  },
 };

package/src/tabs/Tabs.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
 import { Tabs } from "./Tabs";
@@ -39,72 +40,133 @@ const TestTabs = ({
 describe("Tabs", () => {
   test("sets default value correctly", () => {
     render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab2");
-    const panel = screen.getByTestId("tabpanel2");
+    const tab2 = screen.getByTestId("tab2");
+    const panel2 = screen.getByTestId("tabpanel2");
 
-    expect(tab).toHaveAttribute("aria-selected", "true");
-    expect(panel).toHaveTextContent("Tabpanel 2");
+    expect(tab2).toHaveAttribute("aria-selected", "true");
+    expect(panel2).toHaveTextContent("Tabpanel 2");
   });
 
   test("label-connection between tab and tabpanel is correct", async () => {
     render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab2");
-    const panel = screen.getByTestId("tabpanel2");
+    const tab2 = screen.getByTestId("tab2");
+    const panel2 = screen.getByTestId("tabpanel2");
 
-    const controlsId = tab.getAttribute("aria-controls");
-    const panelLabelledBy = panel.getAttribute("aria-labelledby");
+    const controlsId = tab2.getAttribute("aria-controls");
+    const panelLabelledBy = panel2.getAttribute("aria-labelledby");
 
-    expect(controlsId).toEqual(panel.id);
-    expect(tab.id).toEqual(panelLabelledBy);
+    expect(controlsId).toEqual(panel2.id);
+    expect(tab2.id).toEqual(panelLabelledBy);
   });
 
   test("sets correct attributes on active tab", () => {
     render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab2");
+    const tab2 = screen.getByTestId("tab2");
 
-    expect(tab).toHaveAttribute("aria-selected", "true");
-    expect(tab).toHaveAttribute("role", "tab");
-    expect(tab).toHaveAttribute("aria-controls");
-    expect(tab).toHaveAttribute("tabindex", "-1");
+    expect(tab2).toHaveAttribute("aria-selected", "true");
+    expect(tab2).toHaveAttribute("role", "tab");
+    expect(tab2).toHaveAttribute("aria-controls");
+    expect(tab2).toHaveAttribute("tabindex", "0");
   });
 
   test("sets correct attributes on idle tab", () => {
     render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab1");
+    const tab1 = screen.getByTestId("tab1");
 
-    expect(tab).toHaveAttribute("aria-selected", "false");
-    expect(tab).toHaveAttribute("role", "tab");
-    expect(tab).toHaveAttribute("aria-controls");
-    expect(tab).toHaveAttribute("tabindex", "-1");
+    expect(tab1).toHaveAttribute("aria-selected", "false");
+    expect(tab1).toHaveAttribute("role", "tab");
+    expect(tab1).toHaveAttribute("aria-controls");
+    expect(tab1).toHaveAttribute("tabindex", "-1");
   });
 
   test("sets correct attributes on active tabpanel", () => {
     render(<TestTabs defaultValue="tab2" />);
-    const panel = screen.getByTestId("tabpanel2");
+    const panel2 = screen.getByTestId("tabpanel2");
 
-    expect(panel).toHaveAttribute("aria-labelledby");
-    expect(panel).toHaveAttribute("role", "tabpanel");
-    expect(panel).toHaveAttribute("tabindex", "0");
-    expect(panel).toHaveTextContent("Tabpanel 2");
-    expect(panel).toHaveStyle({ display: "block" });
+    expect(panel2).toHaveAttribute("aria-labelledby");
+    expect(panel2).toHaveAttribute("role", "tabpanel");
+    expect(panel2).toHaveAttribute("tabindex", "0");
+    expect(panel2).toHaveTextContent("Tabpanel 2");
+    expect(panel2).toHaveStyle({ display: "block" });
   });
 
   test("sets correct attributes on idle tabpanel", () => {
     render(<TestTabs defaultValue="tab1" />);
-    const panel = screen.getByTestId("tabpanel2");
+    const panel2 = screen.getByTestId("tabpanel2");
 
-    expect(panel).toHaveAttribute("aria-labelledby");
-    expect(panel).toHaveAttribute("role", "tabpanel");
-    expect(panel).toHaveAttribute("tabindex", "0");
-    expect(panel).toBeEmptyDOMElement();
-    expect(panel).toHaveStyle({ display: "none" });
+    expect(panel2).toHaveAttribute("aria-labelledby");
+    expect(panel2).toHaveAttribute("role", "tabpanel");
+    expect(panel2).toHaveAttribute("tabindex", "0");
+    expect(panel2).toBeEmptyDOMElement();
+    expect(panel2).toHaveStyle({ display: "none" });
   });
 
   test("sets tabindex to 0 when focused", () => {
-    render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab2");
+    render(<TestTabs defaultValue="tab1" />);
+    const tab2 = screen.getByTestId("tab2");
+
+    fireEvent.focus(tab2);
+    expect(tab2).toHaveAttribute("tabindex", "0");
+  });
+
+  test("rowing tabindex keydown moves focus", () => {
+    render(<TestTabs defaultValue="tab1" />);
+    const tab1 = screen.getByTestId("tab1");
+
+    expect(tab1).toHaveAttribute("tabindex", "0");
+    fireEvent.keyDown(tab1, { key: "ArrowRight" });
+
+    expect(tab1).toHaveAttribute("tabindex", "-1");
+    expect(screen.getByTestId("tab2")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByTestId("tab2")).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+  });
+
+  test("selectionFollowsFocus moves active tabs", () => {
+    render(<TestTabs defaultValue="tab1" selectionFollowsFocus />);
+    const tab1 = screen.getByTestId("tab1");
 
-    fireEvent.focus(tab);
-    expect(tab).toHaveAttribute("tabindex", "0");
+    expect(tab1).toHaveAttribute("tabindex", "0");
+    fireEvent.keyDown(tab1, { key: "ArrowRight" });
+
+    expect(screen.getByTestId("tab2")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByTestId("tab2")).toHaveAttribute("tabindex", "0");
+  });
+
+  test("tabbing from tabs moves focus to tabPanel", async () => {
+    render(<TestTabs defaultValue="tab1" />);
+    const tab1 = screen.getByTestId("tab1");
+
+    tab1.focus();
+    await userEvent.tab();
+
+    expect(screen.getByTestId("tabpanel1")).toHaveFocus();
+  });
+
+  test("shift+tab back to tablist should focus selected tab", async () => {
+    render(<TestTabs defaultValue="tab1" />);
+    const tab1 = screen.getByTestId("tab1");
+
+    /* Move focus to tab2 */
+    fireEvent.keyDown(tab1, { key: "ArrowRight" });
+    expect(screen.getByTestId("tab2")).toHaveFocus();
+
+    /* Move focus to tabPanel */
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      /* Tablist handles tabbing with setTimeout, so we need to use act */
+      await userEvent.tab();
+    });
+
+    expect(screen.getByTestId("tabpanel1")).toHaveFocus();
+    /* Move focus back to tablist, now tab1 should have focus */
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      await userEvent.tab({ shift: true });
+    });
+    expect(screen.getByTestId("tab1")).toHaveFocus();
   });
 });