feat(OnyxTab): support disabled and skeleton property

.changeset/dull-kids-drum.md

@@ -0,0 +1,7 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxTab): support `disabled` and `skeleton` property
+
+Also support `skeleton` prop for `OnyxTabs` component which will put all child tab components into skeleton mode.

.changeset/tall-shirts-learn.md

@@ -0,0 +1,12 @@
+---
+"@sit-onyx/headless": minor
+---
+
+feat(createTabs): support skipping disabled tabs for keyboard navigation
+
+Disabled tabs will now be skipped/ignored when navigating via keyboard.
+You need to provide the disabled state when calling the `tabs()` element, e.g.:
+
+```vue
+<button v-bind="tab({ value: 'tab-1', disabled: true })" />
+```

apps/docs/src/index.data.ts

@@ -99,6 +99,7 @@ export default defineLoader({
         name: "DataGrid",
         dueDate: "12/2024",
         status: "in-progress",
+        href: "https://storybook.onyx.schwarz/?path=/docs/data-datagrid--docs",
       },
       {
         name: "Headline",
@@ -222,7 +223,11 @@ export default defineLoader({
       { name: "Breadcrumb", status: getImplementedStatus("OnyxBreadcrumb") },
       { name: "Table of Content", status: getImplementedStatus("OnyxTableOfContent") },
       { name: "Wizard", status: getImplementedStatus("OnyxWizard") },
-      { name: "Tabs", status: getImplementedStatus("OnyxTabs") },
+      {
+        name: "Tabs",
+        status: getImplementedStatus("OnyxTabs"),
+        href: "https://storybook.onyx.schwarz/?path=/docs/navigation-tabs--docs",
+      },
       { name: "Search", status: "in-progress", dueDate: "11/2024" },
       { name: "Filters", status: "in-progress", dueDate: "11/2024" },
     ];

packages/headless/src/composables/tabs/createTabs.testing.ts

@@ -71,6 +71,41 @@ export const tabsTesting = async (options: TabsTestingOptions) => {
   await options.page.keyboard.press("Space");
   const { tabId: tabIdFirst, panelId: panelIdFirst } = await expectTabAttributes(firstTab, true);
   await expectPanelAttributes(options.page.locator(`#${panelIdFirst}`), tabIdFirst);
+
+  // should skip disabled tabs when using the keyboard
+  await firstTab.click();
+  await secondTab.evaluate((element) => (element.ariaDisabled = "true"));
+  await expect(secondTab, "should disable second tab when setting aria-disabled").toBeDisabled();
+
+  await options.page.keyboard.press("ArrowRight");
+  await expect(secondTab, "should not focus second tab if its aria-disabled").not.toBeFocused();
+  await expect(
+    options.tablist.getByRole("tab").nth(2),
+    "should focus next tab after disabled one when pressing arrow right",
+  ).toBeFocused();
+
+  await options.page.keyboard.press("ArrowLeft");
+  await expect(
+    firstTab,
+    "should focus tab before disabled one when pressing arrow left",
+  ).toBeFocused();
+
+  await secondTab.evaluate((element) => (element.ariaDisabled = null));
+  await firstTab.evaluate((element) => (element.ariaDisabled = "true"));
+  await options.page.keyboard.press("Home");
+  await expect(
+    secondTab,
+    "should focus second tab when pressing Home if first tab is disabled",
+  ).toBeFocused();
+
+  await firstTab.evaluate((element) => (element.ariaDisabled = null));
+  await lastTab.evaluate((element) => (element.ariaDisabled = "true"));
+  await firstTab.focus();
+  await options.page.keyboard.press("End");
+  await expect(
+    options.tablist.getByRole("tab").nth(-2),
+    "should focus second last tab when pressing End if last tab is disabled",
+  ).toBeFocused();
 };
 
 /**

packages/headless/src/composables/tabs/createTabs.ts

@@ -37,30 +37,41 @@ export const createTabs = createBuilder(<T extends PropertyKey>(options: CreateT
   const handleKeydown = (event: KeyboardEvent) => {
     const tab = event.target as Element;
 
-    const focusFirstTab = () => {
-      const element = tab.parentElement?.querySelector('[role="tab"]');
+    const enabledTabs = Array.from(
+      tab.parentElement?.querySelectorAll('[role="tab"]') ?? [],
+    ).filter((tab) => tab.ariaDisabled !== "true");
+
+    const currentTabIndex = enabledTabs.indexOf(tab);
+
+    const focusElement = (element?: Element | null) => {
       if (element instanceof HTMLElement) element.focus();
     };
 
-    const focusLastTab = () => {
-      const element = Array.from(tab.parentElement?.querySelectorAll('[role="tab"]') ?? []).at(-1);
-      if (element instanceof HTMLElement) element.focus();
+    const focusFirstTab = () => focusElement(enabledTabs.at(0));
+    const focusLastTab = () => focusElement(enabledTabs.at(-1));
+
+    /**
+     * Focuses the next/previous tab. Will ignore/skip disabled ones.
+     */
+    const focusTab = (direction: "next" | "previous") => {
+      if (currentTabIndex === -1) return;
+      const newIndex = direction === "next" ? currentTabIndex + 1 : currentTabIndex - 1;
+
+      if (newIndex < 0) {
+        return focusLastTab();
+      } else if (newIndex >= enabledTabs.length) {
+        return focusFirstTab();
+      }
+
+      return focusElement(enabledTabs.at(newIndex));
     };
 
     switch (event.key) {
       case "ArrowRight":
-        if (tab.nextElementSibling && tab.nextElementSibling instanceof HTMLElement) {
-          tab.nextElementSibling.focus();
-        } else {
-          focusFirstTab();
-        }
+        focusTab("next");
         break;
       case "ArrowLeft":
-        if (tab.previousElementSibling && tab.previousElementSibling instanceof HTMLElement) {
-          tab.previousElementSibling.focus();
-        } else {
-          focusLastTab();
-        }
+        focusTab("previous");
         break;
       case "Home":
         focusFirstTab();
@@ -86,7 +97,7 @@ export const createTabs = createBuilder(<T extends PropertyKey>(options: CreateT
         onKeydown: handleKeydown,
       })),
       tab: computed(() => {
-        return (data: { value: T }) => {
+        return (data: { value: T; disabled?: boolean }) => {
           const { tabId: selectedTabId } = getId(unref(options.selectedTab));
           const { tabId, panelId } = getId(data.value);
           const isSelected = tabId === selectedTabId;
@@ -96,8 +107,9 @@ export const createTabs = createBuilder(<T extends PropertyKey>(options: CreateT
             role: "tab",
             "aria-selected": isSelected,
             "aria-controls": panelId,
+            "aria-disabled": data.disabled ? true : undefined,
             onClick: () => options.onSelect?.(data.value),
-            tabindex: isSelected ? 0 : -1,
+            tabindex: isSelected && !data.disabled ? 0 : -1,
           } as const;
         };
       }),

packages/sit-onyx/src/components/OnyxTab/OnyxTab.stories.ts

@@ -22,3 +22,17 @@ export const Default = {
     default: "Panel content 1...",
   },
 } satisfies Story;
+
+export const Disabled = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+} satisfies Story;
+
+export const Skeleton = {
+  args: {
+    ...Default.args,
+    skeleton: true,
+  },
+} satisfies Story;

packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue

@@ -1,10 +1,15 @@
 <script lang="ts" setup>
 import { computed, inject } from "vue";
 import { useDensity } from "../../composables/density";
+import { SKELETON_INJECTED_SYMBOL, useSkeletonContext } from "../../composables/useSkeletonState";
+import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import { TABS_INJECTION_KEY } from "../OnyxTabs/types";
 import type { OnyxTabProps } from "./types";
 
-const props = defineProps<OnyxTabProps>();
+const props = withDefaults(defineProps<OnyxTabProps>(), {
+  disabled: false,
+  skeleton: SKELETON_INJECTED_SYMBOL,
+});
 
 defineSlots<{
   /**
@@ -19,12 +24,20 @@ defineSlots<{
 
 const { densityClass } = useDensity(props);
 const tabsContext = inject(TABS_INJECTION_KEY);
-
-const tab = computed(() => tabsContext?.headless.elements.tab.value({ value: props.value }));
+const skeleton = useSkeletonContext(props);
+
+const tab = computed(() =>
+  tabsContext?.headless.elements.tab.value({
+    value: props.value,
+    disabled: props.disabled || !!skeleton.value,
+  }),
+);
 </script>
 
 <template>
+  <OnyxSkeleton v-if="skeleton" :class="['onyx-tab-skeleton', densityClass]" v-bind="tab" />
   <button
+    v-else
     :class="[
       'onyx-tab',
       'onyx-text--large',
@@ -33,6 +46,7 @@ const tab = computed(() => tabsContext?.headless.elements.tab.value({ value: pro
     ]"
     v-bind="tab"
     type="button"
+    :disabled="props.disabled"
   >
     <div class="onyx-tab__label">
       <slot name="tab">{{ props.label }}</slot>
@@ -59,13 +73,19 @@ const tab = computed(() => tabsContext?.headless.elements.tab.value({ value: pro
 <style lang="scss">
 @use "../../styles/mixins/layers.scss";
 
+.onyx-tab,
+.onyx-tab-skeleton {
+  --onyx-tab-padding-vertical: var(--onyx-density-xs);
+  --onyx-tab-line-height: 1.75rem;
+  --onyx-tab-highlight-gap: var(--onyx-density-3xs);
+}
+
 .onyx-tab {
   @include layers.component() {
     font-family: var(--onyx-font-family);
     color: var(--onyx-color-text-icons-neutral-medium);
     border-radius: var(--onyx-radius-sm);
-    padding: var(--onyx-density-xs) var(--onyx-density-md);
-    cursor: pointer;
+    padding: var(--onyx-tab-padding-vertical) var(--onyx-density-md);
     font-weight: 600;
 
     // reset button styles
@@ -91,17 +111,25 @@ const tab = computed(() => tabsContext?.headless.elements.tab.value({ value: pro
       }
     }
 
-    &:hover,
-    &:focus-visible {
-      background-color: var(--onyx-color-base-neutral-200);
-    }
+    &:enabled {
+      cursor: pointer;
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--onyx-color-base-neutral-200);
+      }
 
-    &:focus-visible {
-      outline: 0.25rem solid var(--onyx-color-base-primary-200);
+      &:focus-visible {
+        outline: 0.25rem solid var(--onyx-color-base-primary-200);
+      }
+
+      &:active {
+        color: var(--onyx-color-text-icons-primary-bold);
+      }
     }
 
-    &:active {
-      color: var(--onyx-color-text-icons-primary-bold);
+    &:disabled {
+      color: var(--onyx-color-text-icons-neutral-soft);
     }
 
     &__label {
@@ -110,13 +138,24 @@ const tab = computed(() => tabsContext?.headless.elements.tab.value({ value: pro
       justify-content: center;
       gap: var(--onyx-density-xs);
       position: relative;
-      padding-bottom: var(--onyx-density-3xs);
+      padding-bottom: var(--onyx-tab-highlight-gap);
+      line-height: var(--onyx-tab-line-height);
     }
 
     &__panel {
       font-family: var(--onyx-font-family);
       color: var(--onyx-color-text-icons-neutral-intense);
     }
+
+    &-skeleton {
+      width: var(--onyx-density-4xl);
+      height: calc(
+        var(--onyx-tab-line-height) + 2 * var(--onyx-tab-padding-vertical) +
+          var(--onyx-tab-highlight-gap)
+      );
+      display: inline-block;
+      vertical-align: middle;
+    }
   }
 }
 </style>

packages/sit-onyx/src/components/OnyxTab/types.ts

@@ -1,4 +1,5 @@
 import type { DensityProp } from "../../composables/density";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 
 export type OnyxTabProps = DensityProp & {
   /**
@@ -9,4 +10,12 @@ export type OnyxTabProps = DensityProp & {
    * Tab label to display. Alternatively, the `tab` slot can be used.
    */
   label?: string;
+  /**
+   * Whether the input should be disabled and prevent the user from interacting with it.
+   */
+  disabled?: boolean;
+  /**
+   * Whether to show a skeleton tab.
+   */
+  skeleton?: SkeletonInjected;
 };

packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.ct.tsx

@@ -13,24 +13,28 @@ for (const type of ["default", "stretched"] as const) {
     executeMatrixScreenshotTest({
       name: `Tabs (${type})`,
       columns: DENSITIES,
-      rows: ["default", "hover", "active", "focus-visible"],
+      rows: ["default", "hover", "active", "focus-visible", "skeleton"],
       // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
       disabledAccessibilityRules: ["color-contrast"],
-      component: (column) => {
+      component: (column, row) => {
         return (
           <OnyxTabs
             label="Example tabs"
             modelValue="tab-1"
             density={column}
             stretched={type === "stretched"}
-            style={{ width: type === "stretched" ? "24rem" : undefined }}
+            style={{ width: type === "stretched" ? "40rem" : undefined }}
+            skeleton={row === "skeleton"}
           >
             <OnyxTab label="Tab 1" value="tab-1">
               Panel content 1...
             </OnyxTab>
             <OnyxTab label="Tab 2" value="tab-2">
               Panel content 2...
             </OnyxTab>
+            <OnyxTab label="Tab 3 (disabled)" value="tab-3" disabled>
+              Panel content 3...
+            </OnyxTab>
           </OnyxTabs>
         );
       },

packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.stories.ts

@@ -43,12 +43,14 @@ export const Default = {
       ),
       h(
         OnyxTab,
-        { value: "tab-3" },
+        { value: "tab-3", disabled: true },
         {
           default: "Panel content 3...",
-          tab: () => [h(OnyxIcon, { icon: placeholder }), "Tab 3"],
+          tab: () => [h(OnyxIcon, { icon: placeholder }), "Tab 3 (disabled)"],
         },
       ),
+      h(OnyxTab, { value: "tab-4", label: "Tab 4" }, "Panel content 4..."),
+      h(OnyxTab, { value: "tab-5", skeleton: true, label: "Tab 5" }, "Panel content 5..."),
     ],
   },
 } satisfies Story;
@@ -59,3 +61,10 @@ export const Stretched = {
     stretched: true,
   },
 } satisfies Story;
+
+export const Skeleton = {
+  args: {
+    ...Default.args,
+    skeleton: true,
+  },
+} satisfies Story;