feat(headless/tabs): add right arrow support

Author: naorpeled

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/kit-headless/src/components/tabs/tab.tsx

@@ -22,10 +22,10 @@ export const Tab = component$((props: TabProps) => {
   const uniqueId = useId();
 
   useTask$(({ cleanup }) => {
-    contextService.tabsChanged$();
+    contextService.onTabsChanged$();
 
     cleanup(() => {
-      contextService.tabsChanged$();
+      contextService.onTabsChanged$();
     });
   });
 
@@ -50,6 +50,7 @@ export const Tab = component$((props: TabProps) => {
   });
 
   const selectTab$ = $(() => {
+    // TODO: try to move this to the Tabs component
     contextService.selectedIndex.value =
       contextService.tabsMap[uniqueId]?.index || 0;
 

packages/kit-headless/src/components/tabs/tabs-context.type.ts

@@ -1,14 +1,16 @@
 import { Signal, QRL } from '@builder.io/qwik';
 import { Behavior } from './behavior.type';
 import { TabInfo } from './tabs';
+import { KeyCode } from '../../utils/key-code.type';
 
 export interface TabsContext {
   selectedIndex: Signal<number>;
   selectedTabId: Signal<string>;
   selectTab$: QRL<(tabId: string) => void>;
   showTabs$: QRL<() => void>;
-  tabsChanged$: QRL<() => void>;
+  onTabsChanged$: QRL<() => void>;
   tabsMap: { [key: string]: TabInfo };
   tabPanelsMap: { [key: string]: TabInfo };
   behavior: Behavior;
+  onTabKeyDown$: QRL<(key: KeyCode, tabId: string) => void>;
 }

packages/kit-headless/src/components/tabs/tabs-panel.tsx

@@ -21,10 +21,10 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
   );
 
   useTask$(({ cleanup }) => {
-    contextService.tabsChanged$();
+    contextService.onTabsChanged$();
 
     cleanup(() => {
-      contextService.tabsChanged$();
+      contextService.onTabsChanged$();
     });
   });
 

packages/kit-headless/src/components/tabs/tabs.spec.tsx

@@ -1,4 +1,4 @@
-import { component$, useSignal, useStore, useTask$ } from '@builder.io/qwik';
+import { component$, useSignal, useStore } from '@builder.io/qwik';
 import { Tab } from './tab';
 import { Tabs } from './tabs';
 import { TabList } from './tabs-list';
@@ -110,7 +110,7 @@ describe('Tabs', () => {
 
     cy.checkA11yForComponent();
   });
-  it(`GIVEN 3 tabs 
+  it(`GIVEN 3 tabs
       WHEN clicking the middle one
       THEN render the middle panel`, () => {
     cy.mount(<ThreeTabsComponent />);
@@ -120,7 +120,7 @@ describe('Tabs', () => {
     cy.findByRole('tabpanel').should('contain', 'Panel 2');
   });
 
-  it(`GIVEN 3 tabs 
+  it(`GIVEN 3 tabs
       WHEN changing the selected index programmatically to the middle
       THEN render the middle panel`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={3} changeIndexTo={1} />);
@@ -132,7 +132,7 @@ describe('Tabs', () => {
     cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 2 Panel');
   });
 
-  it(`GIVEN 3 tabs, 
+  it(`GIVEN 3 tabs,
       WHEN removing the last one dynamically
       THEN only 2 should remain`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={3} tabIndexToDelete={2} />);
@@ -142,7 +142,7 @@ describe('Tabs', () => {
     cy.findAllByRole('tab').should('have.length', 2);
   });
 
-  it(`GIVEN 3 tabs 
+  it(`GIVEN 3 tabs
       WHEN clicking on the last one and then removing it
       THEN tab 2 should be shown`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={3} tabIndexToDelete={2} />);
@@ -155,7 +155,7 @@ describe('Tabs', () => {
     cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 2 Panel');
   });
 
-  it(`GIVEN 4 tabs 
+  it(`GIVEN 4 tabs
       WHEN clicking on the last one and then removing the 3rd
       THEN tab 4 should be shown`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={4} tabIndexToDelete={2} />);
@@ -165,7 +165,7 @@ describe('Tabs', () => {
     cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 4 Panel');
   });
 
-  it(`GIVEN 4 tabs 
+  it(`GIVEN 4 tabs
       WHEN selecting the 3rd one and adding a tab at the start
       THEN the correct tab should be displayed`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={4} tabIndexToAdd={1} />);
@@ -196,4 +196,14 @@ describe('Tabs', () => {
 
     cy.findAllByRole('tabpanel').eq(1).should('contain', 'Child Panel 2');
   });
+
+  it(`GIVEN 3 tabs and the focus is on the first,
+      WHEN triggering the right arrow key
+      THEN the focus should be on the next tab`, () => {
+    cy.mount(<ThreeTabsComponent />);
+
+    cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}');
+
+    cy.findByRole('tab', { name: /Tab 2/i }).should('have.focus');
+  });
 });

packages/kit-headless/src/components/tabs/tabs.tsx

@@ -11,25 +11,26 @@ import {
 import { tabsContextId } from './tabs-context-id';
 import { TabsContext } from './tabs-context.type';
 import { Behavior } from './behavior.type';
+import { KeyCode } from '../../utils/key-code.type';
 
 /**
  * TABS TODOs
- * 
- * onSelectedIndexChange
-* - Orientation
+ *
+ * - onSelectedIndexChange
+ * - Orientation
  * - keyboard interactions (arrowDown, ARrowRight, ArrowUp, ArrowLeft, Home, End, PageUp, PageDown)
  *    Support Loop
- * - onValueChange
  * POST V1:
  * - RTL
+ *  NOTE: scrolling support? or multiple lines? (probably not for headless but for tailwind / material )
+ * Add ability to close tabs with an ❌ icon (and keyboard support)
 
  *
  * TAB
  *  Disable
- *  NOTE: radix / headlessui: expose data-state data-disable data-orientation
  *  NOTE: Headless UI: explorer the render props
- *  NOTE: remove tab, switch position
- *  NOTE: scrolling support? or multiple lines? (probably not for headless but for tailwind / material )
+ *  NOTE: switch position
+
  *
  * PANEL
  *
@@ -58,6 +59,7 @@ export interface TabInfo {
 export const Tabs = component$((props: TabsProps) => {
   const behavior = props.behavior ?? 'manual';
 
+  const ref = useSignal<HTMLElement | undefined>();
   const selectedIndex = useSignal(0);
 
   useTask$(({ track }) => {
@@ -74,7 +76,7 @@ export const Tabs = component$((props: TabsProps) => {
 
   const tabPanelsMap = useStore<{ [key: string]: TabInfo }>({});
 
-  const tabsChanged$ = $(() => {
+  const onTabsChanged$ = $(() => {
     reIndexTabs.value = true;
   });
 
@@ -86,20 +88,39 @@ export const Tabs = component$((props: TabsProps) => {
     showTabsSignal.value = true;
   });
 
+  const onTabKeyDown$ = $((key: KeyCode, tabId: string) => {
+    const tabsRootElement = ref.value;
+    if (key === KeyCode.ArrowRight) {
+      const currentFocusedTabIndex = tabsMap[tabId].index!;
+
+      // TODO: add disabled support
+      if (currentFocusedTabIndex < tabPairs.length - 1) {
+        const nextTabId = tabPairs[currentFocusedTabIndex + 1].tabId;
+        tabsRootElement
+          ?.querySelector<HTMLElement>(`[data-tab-id='${nextTabId}']`)
+          ?.focus();
+      } else {
+        tabsRootElement
+          ?.querySelector<HTMLElement>(`[data-tab-id='${tabPairs[0].tabId}']`)
+          ?.focus();
+      }
+    }
+  });
+
   const contextService: TabsContext = {
     tabsMap,
     tabPanelsMap,
     selectedIndex,
     selectTab$,
     showTabs$,
-    tabsChanged$,
+    onTabsChanged$,
     behavior,
     selectedTabId,
+    onTabKeyDown$,
   };
 
   useContextProvider(tabsContextId, contextService);
 
-  const ref = useSignal<HTMLElement | undefined>();
   // useVisibleTask$(({ track }) => {
   //   track(() => selectedIndex.value);
   //   if (tabsIdsByIndex[selectedIndex.value]) {
@@ -201,6 +222,12 @@ export const Tabs = component$((props: TabsProps) => {
     <div
       ref={ref}
       {...props}
+      onKeyDown$={(e) => {
+        onTabKeyDown$(
+          e.key as KeyCode,
+          (e.target as any).getAttribute('data-tab-id')
+        );
+      }}
       style={'visibility:' + (showTabsSignal.value ? 'visible' : 'hidden')}
     >
       <Slot />

packages/kit-headless/src/utils/key-code.type.ts

@@ -0,0 +1,8 @@
+export enum KeyCode {
+  ArrowLeft = 'ArrowLeft',
+  ArrowRight = 'ArrowRight',
+  ArrowUp = 'ArrowUp',
+  ArrowDown = 'ArrowDown',
+  Home = 'Home',
+  End = 'End',
+}