test(headless/tabs): vertical right/left disabled

Author: shairez

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

@@ -297,6 +297,20 @@ describe('Tabs', () => {
 
         cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus');
       });
+
+      it(`GIVEN 3 vertical tabs and the focus is on the first,
+          WHEN triggering the right arrow key or left arrow key
+          THEN the focus should stay on the first tab`, () => {
+        cy.mount(<ThreeTabsComponent isVertical={true} />);
+
+        cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}');
+
+        cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus');
+
+        cy.findByRole('tab', { name: /Tab 1/i }).type('{leftarrow}');
+
+        cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus');
+      });
     });
 
     describe('UP key handling', () => {

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

@@ -18,13 +18,7 @@ import { KeyCode } from '../../utils/key-code.type';
 /**
  * TABS TODOs
  *
- * Missing 'code' section implementation:
- *  - Vertical
- *  - disabled
- *  - dynamic
- *  - behavior
- *  - onSelectedIndexChange$
- *  - onClick$
+ * Create a test for arrow right and left and make sure it works only in horizontal mode
 
  *
 * aria Tabs Pattern https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
@@ -162,7 +156,7 @@ export const Tabs = component$((props: TabsProps) => {
     );
 
     if (
-      key === KeyCode.ArrowRight ||
+      (!props.vertical && key === KeyCode.ArrowRight) ||
       (props.vertical && key === KeyCode.ArrowDown)
     ) {
       let nextTabId = enabledTabs[0].tabId;
@@ -174,7 +168,7 @@ export const Tabs = component$((props: TabsProps) => {
     }
 
     if (
-      key === KeyCode.ArrowLeft ||
+      (!props.vertical && key === KeyCode.ArrowLeft) ||
       (props.vertical && key === KeyCode.ArrowUp)
     ) {
       let previousTabId = enabledTabs[enabledTabs.length - 1].tabId;
@@ -215,7 +209,7 @@ export const Tabs = component$((props: TabsProps) => {
     reIndexTabs$,
     onTabKeyDown$,
     selectIfAutomatic$,
-    selectedClassName: props.selectedClassName
+    selectedClassName: props.selectedClassName,
   };
 
   useContextProvider(tabsContextId, contextService);