test(headless/tabs): handling enter key

Author: shairez

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

@@ -365,14 +365,19 @@ describe('Tabs', () => {
       });
     });
 
-    it.only(`GIVEN 3 tabs
-             WHEN clicking the first one and triggering the right arrow key
-             THEN render the middle panel`, () => {
-      cy.mount(<ThreeTabsComponent />);
+    describe.skip('Manual behavior', () => {
+      it(`GIVEN 3 tabs
+          WHEN clicking the first one and triggering the right arrow key and then "enter"
+          THEN the middle panel should be selected`, () => {
+        cy.mount(<ThreeTabsComponent />);
 
-      cy.findByRole('tab', { name: /Tab 1/i }).click();
+        cy.findByRole('tab', { name: /Tab 1/i })
+          .click()
+          .type('{rightarrow}')
+          .type('{enter}');
 
-      cy.findByRole('tabpanel').should('contain', 'Panel 2');
+        cy.findByRole('tabpanel').should('contain', 'Panel 2');
+      });
     });
   });
 

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

@@ -159,6 +159,9 @@ export const Tabs = component$((props: TabsProps) => {
       (tabPair) => tabPair.tabId === currentTabId
     );
 
+    if (key === KeyCode.Enter) {
+    }
+
     if (
       key === KeyCode.ArrowRight ||
       (props.vertical && key === KeyCode.ArrowDown)

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

@@ -7,4 +7,5 @@ export enum KeyCode {
   End = 'End',
   PageUp = 'PageUp',
   PageDown = 'PageDown',
+  Enter = 'Enter',
 }