chore: fix vs code types collisions

Author: shairez

packages/kit-headless/.storybook/tsconfig.json

@@ -4,12 +4,12 @@
     "emitDecoratorMetadata": true,
     "types": ["node", "jest", "@testing-library/jest-dom"]
   },
-
   "exclude": [
     "../**/*.spec.ts",
     "../**/*.test.ts",
     "../**/*.spec.tsx",
-    "../**/*.test.tsx"
+    "../**/*.test.tsx",
+    "../cypress.config.ts"
   ],
   "include": [
     "../src/**/*.stories.ts",

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

@@ -65,6 +65,7 @@ export const Tab = component$((props: TabProps) => {
       onFocus$={selectIfAutomatic$}
       onMouseEnter$={selectIfAutomatic$}
       aria-selected={isSelectedSignal.value}
+      tabIndex={isSelectedSignal.value ? 0 : -1}
       aria-controls={'tabpanel-' + contextService.tabsMap[uniqueId]?.tabPanelId}
       class={`${
         isSelectedSignal.value ? `selected ${props.selectedClassName}` : ''

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

@@ -41,6 +41,7 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
       id={'tabpanel-' + panelUID}
       role="tabpanel"
       tabIndex={0}
+      hidden={isSelectedSignal.value ? undefined : true}
       aria-labelledby={`tab-${matchedTabId}`}
       class={`${isSelectedSignal.value ? 'is-hidden' : ''}${
         props.class ? ` ${props.class}` : ''

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

@@ -33,7 +33,6 @@ export const Primary: Story = {
 
     const tabPanel = await canvas.findByRole('tabpanel');
 
-    // await expect(tabPanel).toBeInTheDocument();
-    // await expect(tabPanel).toContain('Panel 2');
+    await expect(tabPanel).toHaveTextContent('Panel 2');
   },
 };

packages/kit-headless/tsconfig.editor.json

@@ -2,6 +2,6 @@
   "extends": "./tsconfig.json",
   "include": ["**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "types": ["cypress", "node"]
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   }
 }

packages/kit-headless/tsconfig.lib.json

@@ -8,6 +8,7 @@
   "exclude": [
     "**/*.stories.ts",
     "**/*.stories.js",
+    "**/*.stories.tsx",
     "cypress/**/*",
     "cypress.config.ts",
     "**/*.cy.ts",