@multiplatform.one/components 7.7.4 → 7.8.0

package/src/Tabs/Tabs.native.spec.tsx

@@ -0,0 +1,35 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { Tabs } from "./index";
+
+// Exercise the native accessibility branch while retaining the test host renderer.
+// Geometry still requires a native runtime; this test asserts role/name/state only.
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+describe("native Tabs accessibility contract", () => {
+  it("names each button and exposes selected and disabled states", () => {
+    const result = renderWithProviders(
+      <Tabs
+        variant="band"
+        value="one"
+        items={[
+          { value: "one", label: "One" },
+          { value: "two", label: "Two", disabled: true },
+          { value: "three", label: "Three", accessibilityLabel: "Third destination" },
+        ]}
+      />,
+    );
+    const selected = result.getByRole("button", { name: "One" });
+    expect(selected).toHaveAttribute("aria-selected", "true");
+    const disabled = result.getByRole("button", { name: "Two" });
+    expect(disabled).toHaveAttribute("aria-disabled", "true");
+    const third = result.getByRole("button", { name: "Three" });
+    expect(third).toHaveAttribute("accessibilitylabel", "Third destination");
+    expect(third).toHaveAttribute("aria-selected", "false");
+    expect(selected).toHaveAttribute("accessibilityrole", "button");
+    expect(selected).toHaveAttribute("accessibilitylabel", "One");
+  });
+});

package/src/Tabs/Tabs.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { Text } from "tamagui";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, describe, expect, it, vitest } from "vitest";
@@ -220,6 +220,96 @@ describe("Tabs", () => {
     expect(screen.getByRole("tab", { name: "Three" }).tabIndex).toBe(-1);
   });
 
+  it("navigates the band by keyboard while skipping disabled tabs", async () => {
+    renderWithProviders(
+      <Tabs items={[...items, { value: "four", label: "Four" }]} variant="band" />,
+    );
+    const one = screen.getByRole("tab", { name: "One" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "End" });
+    await waitFor(() => expect(screen.getByRole("tab", { name: "Four" })).toHaveFocus());
+    fireEvent.keyDown(document.activeElement!, { key: "ArrowLeft" });
+    await waitFor(() => expect(screen.getByRole("tab", { name: "Two" })).toHaveFocus());
+    fireEvent.keyDown(document.activeElement!, { key: "Home" });
+    await waitFor(() => expect(one).toHaveFocus());
+  });
+
+  it("keeps manual activation distinct from keyboard focus in a band", async () => {
+    renderWithProviders(<Tabs items={items} variant="band" activationMode="manual" />);
+    const one = screen.getByRole("tab", { name: "One" });
+    const two = screen.getByRole("tab", { name: "Two" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "ArrowRight" });
+    await waitFor(() => expect(two).toHaveFocus());
+    expect(two).toHaveAttribute("aria-selected", "false");
+    fireEvent.keyDown(two, { key: "Enter" });
+    expect(two).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("selects the focused tab automatically when navigating with arrows", async () => {
+    renderWithProviders(<Tabs items={items} variant="band" />);
+    const one = screen.getByRole("tab", { name: "One" });
+    const two = screen.getByRole("tab", { name: "Two" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "ArrowRight" });
+    await waitFor(() => expect(two).toHaveFocus());
+    expect(two).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Panel two")).toBeVisible();
+  });
+
+  it("reverses horizontal arrow navigation in RTL", async () => {
+    document.documentElement.dir = "rtl";
+    renderWithProviders(<Tabs items={items} defaultValue="two" />);
+    const two = screen.getByRole("tab", { name: "Two" });
+    const one = screen.getByRole("tab", { name: "One" });
+    two.focus();
+    fireEvent.keyDown(two, { key: "ArrowRight" });
+    await waitFor(() => expect(one).toHaveFocus());
+    expect(one).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("stops at the last enabled tab when looping is disabled", async () => {
+    renderWithProviders(<Tabs items={items} loop={false} />);
+    const one = screen.getByRole("tab", { name: "One" });
+    const two = screen.getByRole("tab", { name: "Two" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "End" });
+    await waitFor(() => expect(two).toHaveFocus());
+    fireEvent.keyDown(two, { key: "ArrowRight" });
+    expect(two).toHaveFocus();
+    expect(two).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("removes every tab from the page tab order when the strip is disabled", () => {
+    renderWithProviders(<Tabs items={items} disabled />);
+    for (const tab of screen.getAllByRole("tab")) {
+      expect(tab.tabIndex).toBe(-1);
+      expect(tab).toHaveAttribute("aria-disabled", "true");
+    }
+  });
+
+  it("keeps an enabled entry point when the selected tab is disabled", () => {
+    renderWithProviders(<Tabs items={items} value="three" />);
+    const stops = screen.getAllByRole("tab").filter((tab) => tab.tabIndex === 0);
+    expect(stops).toHaveLength(1);
+    expect(stops[0]).toHaveAccessibleName("One");
+  });
+
+  it("renders a flat equal band with named tabs and no scrolling viewport", () => {
+    const { container } = renderWithProviders(<Tabs items={items} variant="band" />);
+    expect(container.querySelector('[data-tabs-distribution="equal"]')).not.toBeNull();
+    expect(container.querySelector('[data-tabs-scroll="true"]')).toBeNull();
+    expect(screen.getAllByRole("tab")).toHaveLength(3);
+    expect(container.querySelector("[data-tabs-indicator]")).toBeNull();
+  });
+
+  it("lets equal-band chrome shrink inside each allocated tab", () => {
+    renderWithProviders(<Tabs items={items} variant="band" />);
+    const chrome = screen.getByRole("tab", { name: "One" }).firstElementChild!;
+    expect(chrome.className).toContain("_fs-1");
+    expect(chrome.className).toContain("_fb-0px");
+  });
+
   it("ariaLabel overrides the default tablist name", () => {
     renderWithProviders(<Tabs items={items} ariaLabel="Document sections" />);
     expect(screen.getByRole("tablist")).toHaveAttribute("aria-label", "Document sections");

package/src/Tabs/Tabs.stories.tsx

@@ -26,7 +26,8 @@ const meta: Meta<typeof Tabs> = {
     },
   },
   argTypes: {
-    variant: { control: "select", options: ["underline", "contained"] },
+    variant: { control: "select", options: ["underline", "contained", "band"] },
+    distribution: { control: "select", options: ["content", "equal"] },
     size: { control: "select", options: ["$2", "$3", "$4", "$5"] },
     accent: { control: "boolean" },
     error: { control: "boolean" },
@@ -327,3 +328,37 @@ export const CompactAndSize: Story = {
     </YStack>
   ),
 };
+
+export const EqualBand: Story = {
+  render: () => (
+    <YStack width={390} maxWidth="100%">
+      <Tabs
+        variant="band"
+        ariaLabel="Sections"
+        items={[
+          { value: "overview", label: "Overview" },
+          { value: "activity", label: "Activity" },
+          { value: "resources", label: "Resources" },
+          { value: "reports", label: "Reports" },
+          { value: "settings", label: "Settings" },
+        ]}
+      />
+    </YStack>
+  ),
+};
+
+export const IntrinsicHorizontalHost: Story = {
+  render: () => (
+    <ScrollView horizontal width={390} maxWidth="100%">
+      <Tabs items={baseItems} ariaLabel="Intrinsic tabs" />
+    </ScrollView>
+  ),
+};
+
+export const EqualSmall: Story = {
+  render: () => (
+    <YStack width={390} maxWidth="100%">
+      <Tabs items={baseItems} distribution="equal" size="$2" ariaLabel="Compact equal sections" />
+    </YStack>
+  ),
+};