update keyboard support to skip disabled tabs

SchwarzIT · Nov 12, 2024 · 0118884 · 0118884
1 parent aa06fac
commit 0118884
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 18 deletions.
diff --git a/packages/headless/src/composables/tabs/createTabs.testing.ts b/packages/headless/src/composables/tabs/createTabs.testing.ts
@@ -71,6 +71,24 @@ 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();
 };
 
 /**

diff --git a/packages/headless/src/composables/tabs/createTabs.ts b/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);
+    if (currentTabIndex === -1) return;
+
+    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") => {
+      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,6 +107,7 @@ 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,
           } as const;

diff --git a/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue b/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue
@@ -26,11 +26,16 @@ const { densityClass } = useDensity(props);
 const tabsContext = inject(TABS_INJECTION_KEY);
 const skeleton = useSkeletonContext(props);
 
-const tab = computed(() => tabsContext?.headless.elements.tab.value({ value: props.value }));
+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]" />
+  <OnyxSkeleton v-if="skeleton" :class="['onyx-tab-skeleton', densityClass]" v-bind="tab" />
   <button
     v-else
     :class="[

diff --git a/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.stories.ts b/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.stories.ts
@@ -57,6 +57,22 @@ export const Default = {
           tab: () => [h(OnyxIcon, { icon: placeholder }), "Tab 4"],
         },
       ),
+      h(
+        OnyxTab,
+        { value: "tab-5", skeleton: true },
+        {
+          default: "Panel content 5...",
+          tab: () => [h(OnyxIcon, { icon: placeholder }), "Tab 5"],
+        },
+      ),
+      h(
+        OnyxTab,
+        { value: "tab-6" },
+        {
+          default: "Panel content 6...",
+          tab: () => [h(OnyxIcon, { icon: placeholder }), "Tab 6"],
+        },
+      ),
     ],
   },
 } satisfies Story;