feat(ui): add appearance="buttons" to TabBar

.changeset/secondary-tabs-component.md

@@ -0,0 +1,9 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Add SecondaryTabs component family (SecondaryTabs, SecondaryTab, SecondaryTabPanel)
+
+A segmented-control tab strip for hierarchical navigation below primary TabNavigation. Uses native ARIA (`role="tablist"`, `role="tab"`, `role="tabpanel"`, `aria-selected`, `aria-controls`, `aria-labelledby`, `aria-orientation="horizontal"`) without external library dependencies. Supports controlled/uncontrolled mode, per-tab and global disabled state, optional icons left/right, and full keyboard navigation (ArrowRight/Left with wrap-around, Home, End — skips disabled tabs) per the ARIA APG Tabs pattern. Uses `useId()` for unique per-instance tab/panel IDs, enabling multiple SecondaryTabs on the same page without ID collisions. Added 14 CSS design tokens for Light and Dark themes (background, text, border, disabled).
+
+**Accessibility:** Uses `aria-disabled="true"` instead of native `disabled` so disabled tabs remain in the accessibility tree and are announced by screen readers (NVDA/JAWS remove natively-disabled elements from the AT tree). Roving tabindex ensures only one tab is in the tab sequence at a time while disabled tabs stay reachable via ArrowLeft/Right for AT users who rely on directional navigation. `SecondaryTabs` and `SecondaryTab` both expose a `ref` via `forwardRef`.

packages/ui-components/src/components/SecondaryTabs/SecondaryTab.component.tsx

@@ -0,0 +1,159 @@
+/*
+ * SPDX-FileCopyrightText: 2026 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { forwardRef, ButtonHTMLAttributes, ReactNode } from "react"
+import { Icon } from "../Icon/Icon.component"
+import { KnownIcons } from "../Icon/Icon.component.js"
+import { useSecondaryTabsContext } from "./SecondaryTabs.component"
+
+export interface SecondaryTabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Must match the `value` of the corresponding `SecondaryTabPanel`. */
+  value: string
+  /** Icon rendered to the left of the label. */
+  iconLeft?: KnownIcons
+  /** Icon rendered to the right of the label. */
+  iconRight?: KnownIcons
+  children?: ReactNode
+  /** @default false */
+  disabled?: boolean
+  /** @default "" */
+  className?: string
+  /** Managed by roving tabindex; consumer value is ignored. */
+  tabIndex?: number
+}
+
+const tabBaseStyles = `
+  jn:relative
+  jn:flex
+  jn:items-center
+  jn:gap-[0.375rem]
+  jn:rounded-[0.1875rem]
+  jn:px-[0.625rem]
+  jn:py-[0.4375rem]
+  jn:text-sm
+  jn:font-bold
+  jn:leading-[1.4]
+  jn:select-none
+  jn:transition-colors
+  jn:duration-150
+  jn:border
+  jn:focus-visible:outline-hidden
+  jn:focus-visible:ring-2
+  jn:focus-visible:ring-theme-focus
+  jn:focus-visible:ring-offset-1
+  jn:focus-visible:ring-offset-theme-focus
+`
+
+const tabDefaultStyles = `
+  jn:cursor-pointer
+  jn:bg-transparent
+  jn:border-transparent
+  jn:text-theme-secondary-tab
+`
+
+const tabHoverStyles = `jn:hover:text-theme-secondary-tab-hover`
+
+const tabActiveStyles = `
+  jn:cursor-default
+  jn:bg-theme-secondary-tab-active
+  jn:border-theme-secondary-tab-active
+  jn:text-theme-secondary-tab-active
+`
+
+const tabDisabledStyles = `
+  jn:cursor-not-allowed
+  jn:opacity-50
+  jn:text-theme-secondary-tab-disabled
+`
+
+/**
+ * A single selectable tab inside `SecondaryTabs`.
+ * @see {@link SecondaryTabProps}
+ */
+export const SecondaryTab = forwardRef<HTMLButtonElement, SecondaryTabProps>(
+  (
+    {
+      value,
+      iconLeft,
+      iconRight,
+      disabled: disabledProp,
+      onClick,
+      onKeyDown: onKeyDownProp,
+      tabIndex: _tabIndex,
+      children,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => {
+    const { activeTab, setActiveTab, disabled: contextDisabled, tabsId } = useSecondaryTabsContext()
+
+    const isActive = activeTab === value
+    const isDisabled = disabledProp ?? contextDisabled
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (isDisabled) return
+      setActiveTab(value)
+      onClick?.(e)
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      const tablist = e.currentTarget.closest('[role="tablist"]')
+      if (tablist) {
+        const enabledTabs = Array.from(
+          tablist.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([aria-disabled="true"])')
+        )
+        const currentIndex = enabledTabs.indexOf(e.currentTarget)
+        let nextTab: HTMLButtonElement | null = null
+
+        if (e.key === "ArrowRight") {
+          e.preventDefault()
+          nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length]
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault()
+          nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length]
+        } else if (e.key === "Home") {
+          e.preventDefault()
+          nextTab = enabledTabs[0]
+        } else if (e.key === "End") {
+          e.preventDefault()
+          nextTab = enabledTabs[enabledTabs.length - 1]
+        }
+
+        if (nextTab) {
+          const nextValue = nextTab.dataset.value
+          if (nextValue) {
+            setActiveTab(nextValue)
+            nextTab.focus()
+          }
+        }
+      }
+      onKeyDownProp?.(e)
+    }
+
+    return (
+      <button
+        ref={ref}
+        {...rest}
+        role="tab"
+        aria-selected={isActive}
+        aria-disabled={isDisabled ? true : undefined}
+        aria-controls={`${tabsId}-tabpanel-${value}`}
+        id={`${tabsId}-tab-${value}`}
+        data-value={value}
+        tabIndex={isActive && !isDisabled ? 0 : -1}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        className={`juno-secondary-tab ${isActive ? "juno-secondary-tab-active" : ""} ${isDisabled ? "juno-secondary-tab-disabled" : ""} ${tabBaseStyles} ${isActive ? tabActiveStyles : `${tabDefaultStyles} ${!isDisabled ? tabHoverStyles : ""}`} ${isDisabled ? tabDisabledStyles : ""} ${className}`}
+      >
+        {iconLeft && <Icon icon={iconLeft} size="1rem" />}
+        {children}
+        {iconRight && <Icon icon={iconRight} size="1rem" />}
+      </button>
+    )
+  }
+)
+
+SecondaryTab.displayName = "SecondaryTab"

packages/ui-components/src/components/SecondaryTabs/SecondaryTab.stories.tsx

@@ -0,0 +1,128 @@
+/*
+ * SPDX-FileCopyrightText: 2026 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite"
+import { KnownIconsEnum } from "../Icon/Icon.component"
+import { SecondaryTabs } from "./SecondaryTabs.component"
+import { SecondaryTab } from "./SecondaryTab.component"
+
+const iconOptions = [undefined, ...Object.values(KnownIconsEnum)] as const
+
+const meta: Meta<typeof SecondaryTab> = {
+  title: "WIP/SecondaryTabs/SecondaryTab",
+  component: SecondaryTab,
+  decorators: [
+    (Story) => (
+      <SecondaryTabs defaultTab="demo">
+        <Story />
+      </SecondaryTabs>
+    ),
+  ],
+  argTypes: {
+    value: { control: "text" },
+    disabled: { control: "boolean" },
+    iconLeft: {
+      options: iconOptions,
+      control: { type: "select" },
+    },
+    iconRight: {
+      options: iconOptions,
+      control: { type: "select" },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Default inactive tab. Becomes active when selected.",
+      },
+    },
+  },
+  args: {
+    value: "demo",
+    children: "Tab Label",
+  },
+}
+
+export const Inactive: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "A tab that is not the currently active tab.",
+      },
+    },
+  },
+  args: {
+    value: "other",
+    children: "Inactive Tab",
+  },
+}
+
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "A tab that cannot be selected. Uses `aria-disabled` to remain in the accessibility tree.",
+      },
+    },
+  },
+  args: {
+    value: "demo",
+    disabled: true,
+    children: "Disabled Tab",
+  },
+}
+
+export const WithIconLeft: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Tab with an icon rendered to the left of the label.",
+      },
+    },
+  },
+  args: {
+    value: "demo",
+    iconLeft: "openInNew",
+    children: "With Icon Left",
+  },
+}
+
+export const WithIconRight: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Tab with an icon rendered to the right of the label.",
+      },
+    },
+  },
+  args: {
+    value: "demo",
+    iconRight: "info",
+    children: "With Icon Right",
+  },
+}
+
+export const WithBothIcons: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Tab with icons on both sides.",
+      },
+    },
+  },
+  args: {
+    value: "demo",
+    iconLeft: "openInNew",
+    iconRight: "info",
+    children: "Both Icons",
+  },
+}

packages/ui-components/src/components/SecondaryTabs/SecondaryTab.test.tsx

@@ -0,0 +1,95 @@
+/*
+ * SPDX-FileCopyrightText: 2026 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as React from "react"
+import { render, screen } from "@testing-library/react"
+import { describe, expect, test } from "vitest"
+import { SecondaryTabs } from "./SecondaryTabs.component"
+import { SecondaryTab } from "./SecondaryTab.component"
+import { SecondaryTabPanel } from "./SecondaryTabPanel.component"
+
+const wrap = (props = {}) =>
+  render(
+    <SecondaryTabs defaultTab="x">
+      <SecondaryTab value="x" {...props}>
+        Label
+      </SecondaryTab>
+    </SecondaryTabs>
+  )
+
+describe("SecondaryTab", () => {
+  describe("Basic Rendering", () => {
+    test("renders a tab button", () => {
+      wrap()
+      expect(screen.getByRole("tab")).toBeInTheDocument()
+    })
+
+    test("has juno-secondary-tab class", () => {
+      wrap()
+      expect(screen.getByRole("tab")).toHaveClass("juno-secondary-tab")
+    })
+
+    test("has juno-secondary-tab-active class when active", () => {
+      wrap()
+      expect(screen.getByRole("tab")).toHaveClass("juno-secondary-tab-active")
+    })
+
+    test("has aria-selected true when active", () => {
+      wrap()
+      expect(screen.getByRole("tab")).toHaveAttribute("aria-selected", "true")
+    })
+
+    test("has aria-controls linking to its panel", () => {
+      render(
+        <SecondaryTabs defaultTab="x">
+          <SecondaryTab value="x">Label</SecondaryTab>
+          <SecondaryTabPanel value="x">Content</SecondaryTabPanel>
+        </SecondaryTabs>
+      )
+      const tab = screen.getByRole("tab")
+      const panel = screen.getByRole("tabpanel")
+      expect(tab.getAttribute("aria-controls")).toBe(panel.id)
+    })
+
+    test("has id matching tab id convention", () => {
+      wrap()
+      expect(screen.getByRole("tab").id).toMatch(/-tab-x$/)
+    })
+
+    test("applies custom className", () => {
+      wrap({ className: "my-class" })
+      expect(screen.getByRole("tab")).toHaveClass("my-class")
+    })
+
+    test("forwards additional props", () => {
+      wrap({ "data-custom": "val" })
+      expect(screen.getByRole("tab")).toHaveAttribute("data-custom", "val")
+    })
+
+    test("forwards ref to button element", () => {
+      const ref = React.createRef<HTMLButtonElement>()
+      render(
+        <SecondaryTabs defaultTab="x">
+          <SecondaryTab value="x" ref={ref}>
+            Label
+          </SecondaryTab>
+        </SecondaryTabs>
+      )
+      expect(ref.current).toBe(screen.getByRole("tab"))
+    })
+  })
+
+  describe("Disabled state", () => {
+    test("has aria-disabled when disabled prop is passed", () => {
+      wrap({ disabled: true })
+      expect(screen.getByRole("tab")).toHaveAttribute("aria-disabled", "true")
+    })
+
+    test("has tabIndex -1 when disabled", () => {
+      wrap({ disabled: true })
+      expect(screen.getByRole("tab")).toHaveAttribute("tabindex", "-1")
+    })
+  })
+})