@sit-onyx/headless 1.0.0-beta.11 → 1.0.0-beta.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.12",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/composables/comboBox/SelectOnlyCombobox.vue

@@ -57,11 +57,11 @@ defineExpose({ comboBox });
       @keydown.arrow-down="isExpanded = true"
     />
 
-    <button v-bind="button">
+    <button v-bind="button" type="button">
       <template v-if="isExpanded">⬆️</template>
       <template v-else>⬇️</template>
     </button>
-    <ul v-bind="listbox" :class="{ hidden: !isExpanded }" style="width: 400px">
+    <ul class="listbox" v-bind="listbox" :class="{ hidden: !isExpanded }">
       <li
         v-for="e in options"
         :key="e"
@@ -84,4 +84,7 @@ defineExpose({ comboBox });
 [aria-selected="true"] {
   background-color: red;
 }
+.listbox {
+  width: 400px;
+}
 </style>

package/src/composables/comboBox/createComboBox.ts

@@ -209,13 +209,13 @@ export const createComboBox = createBuilder(
       return handleNavigation(event);
     };
 
-    const autocompleteInput =
-      autocomplete.value !== "none"
-        ? {
-            "aria-autocomplete": autocomplete.value,
-            type: "text",
-          }
-        : null;
+    const autocompleteInput = computed(() => {
+      if (autocomplete.value === "none") return null;
+      return {
+        "aria-autocomplete": autocomplete.value,
+        type: "text",
+      };
+    });
 
     const {
       elements: { option, group, listbox },
@@ -264,7 +264,7 @@ export const createComboBox = createBuilder(
             activeOption.value != undefined ? getOptionId(activeOption.value) : undefined,
           onInput: handleInput,
           onKeydown: handleKeydown,
-          ...autocompleteInput,
+          ...autocompleteInput.value,
         })),
         /**
          * An optional button to control the visibility of the popup.

package/src/composables/menuButton/TestMenuButton.vue

@@ -18,7 +18,7 @@ const {
 
 <template>
   <div v-bind="root">
-    <button v-bind="button">Toggle nav menu</button>
+    <button v-bind="button" type="button">Toggle nav menu</button>
     <ul v-show="isExpanded" v-bind="menu">
       <li v-for="item in items" v-bind="listItem" :key="item.value">
         <a v-bind="menuItem({ active: activeItem === item.value })" href="#">{{ item.label }}</a>

package/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();
 };
 
 /**

package/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;
         };
       }),