@sit-onyx/headless 1.0.0-beta.10 → 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.10",
+  "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/TestTabs.vue

@@ -18,9 +18,11 @@ const {
     <div v-bind="tablist">
       <button v-bind="tab({ value: 'tab-1' })" type="button">Tab 1</button>
       <button v-bind="tab({ value: 'tab-2' })" type="button">Tab 2</button>
+      <button v-bind="tab({ value: 'tab-3' })" type="button">Tab 3</button>
     </div>
 
     <div v-if="selectedTab === 'tab-1'" v-bind="tabpanel({ value: 'tab-1' })">Tab content 1</div>
     <div v-if="selectedTab === 'tab-2'" v-bind="tabpanel({ value: 'tab-2' })">Tab content 2</div>
+    <div v-if="selectedTab === 'tab-3'" v-bind="tabpanel({ value: 'tab-3' })">Tab content 3</div>
   </div>
 </template>

package/src/composables/tabs/createTabs.testing.ts

@@ -4,7 +4,7 @@ import type { Locator, Page } from "@playwright/test";
 export type TabsTestingOptions = {
   page: Page;
   /**
-   * Locator of the tabs component.
+   * Locator of the tabs component. Must have at least 3 tabs where the first one is initially selected.
    */
   tablist: Locator;
 };
@@ -19,21 +19,93 @@ export const tabsTesting = async (options: TabsTestingOptions) => {
     "aria-label",
   );
 
-  const activeTab = options.tablist.locator('[aria-selected="true"]');
-  await expect(activeTab, "must have an initially active tab").toBeVisible();
+  const firstTab = options.tablist.getByRole("tab").first();
+  const secondTab = options.tablist.getByRole("tab").nth(1);
+  const lastTab = options.tablist.getByRole("tab").last();
 
-  const { tabId, panelId } = await expectTabAttributes(activeTab, true);
+  const { tabId, panelId } = await expectTabAttributes(firstTab, true);
   await expectPanelAttributes(options.page.locator(`#${panelId}`), tabId);
 
   // ACT (switch tab)
-  let tab2 = options.tablist.locator('[aria-selected="false"]').first();
-  tab2 = options.tablist.locator(`#${await tab2.getAttribute("id")}`);
-  await tab2.click();
+  await secondTab.click();
 
-  const { tabId: tabId2, panelId: panelId2 } = await expectTabAttributes(tab2, true);
+  const { tabId: tabId2, panelId: panelId2 } = await expectTabAttributes(secondTab, true);
   await expectPanelAttributes(options.page.locator(`#${panelId2}`), tabId2);
+  await expect(secondTab, "second tab should be focused").toBeFocused();
 
   await expect(options.page.getByRole("tabpanel"), "should hide previous panel").toHaveCount(1);
+
+  // keyboard support
+  await options.page.keyboard.press("ArrowLeft");
+  await expect(firstTab, "should focus previous tab when pressing arrow left").toBeFocused();
+
+  await options.page.keyboard.press("End");
+  await expect(lastTab, "should focus last tab when pressing End").toBeFocused();
+
+  await options.page.keyboard.press("ArrowRight");
+  await expect(
+    firstTab,
+    "should focus first tab when last tab is focused and pressing arrow right",
+  ).toBeFocused();
+
+  await options.page.keyboard.press("ArrowRight");
+  await expect(secondTab, "should focus next tab when pressing arrow right").toBeFocused();
+
+  await options.page.keyboard.press("Home");
+  await expect(firstTab, "should focus first tab when pressing Home").toBeFocused();
+
+  await options.page.keyboard.press("ArrowLeft");
+
+  await expect(
+    lastTab,
+    "should focus last tab when first tab is focused and pressing arrow left",
+  ).toBeFocused();
+
+  // should select when pressing Enter
+  await options.page.keyboard.press("Enter");
+  const { tabId: tabIdLast, panelId: panelIdLast } = await expectTabAttributes(lastTab, true);
+  await expectPanelAttributes(options.page.locator(`#${panelIdLast}`), tabIdLast);
+
+  // should select when pressing Space
+  await firstTab.focus();
+  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

@@ -34,14 +34,70 @@ export const createTabs = createBuilder(<T extends PropertyKey>(options: CreateT
     return idMap.get(value)!;
   };
 
+  const handleKeydown = (event: KeyboardEvent) => {
+    const tab = event.target as Element;
+
+    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 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":
+        focusTab("next");
+        break;
+      case "ArrowLeft":
+        focusTab("previous");
+        break;
+      case "Home":
+        focusFirstTab();
+        break;
+      case "End":
+        focusLastTab();
+        break;
+      case "Enter":
+      case " ":
+        {
+          const tabEntry = Array.from(idMap.entries()).find(([, { tabId }]) => tabId === tab.id);
+          if (tabEntry) options.onSelect?.(tabEntry[0]);
+        }
+        break;
+    }
+  };
+
   return {
     elements: {
       tablist: computed(() => ({
         role: "tablist",
         "aria-label": unref(options.label),
+        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;
@@ -51,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;
         };
       }),