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

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.11",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

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,58 @@ 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);
 };
 
 /**

package/src/composables/tabs/createTabs.ts

@@ -34,11 +34,56 @@ export const createTabs = createBuilder(<T extends PropertyKey>(options: CreateT
     return idMap.get(value)!;
   };
 
+  const handleKeydown = (event: KeyboardEvent) => {
+    const tab = event.target as Element;
+
+    const focusFirstTab = () => {
+      const element = tab.parentElement?.querySelector('[role="tab"]');
+      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();
+    };
+
+    switch (event.key) {
+      case "ArrowRight":
+        if (tab.nextElementSibling && tab.nextElementSibling instanceof HTMLElement) {
+          tab.nextElementSibling.focus();
+        } else {
+          focusFirstTab();
+        }
+        break;
+      case "ArrowLeft":
+        if (tab.previousElementSibling && tab.previousElementSibling instanceof HTMLElement) {
+          tab.previousElementSibling.focus();
+        } else {
+          focusLastTab();
+        }
+        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 }) => {