Cypress 10+ support (#65)

Long-awaited Cypress 10+ Support for cy.tab()


- remove Ally.js dependency (abandoned) 
  - closes #59 
  - closes #37  
- fix focus randomly being lost due (due to ally.js) 
  - closes #46  
- upgrade to Cypress 10+, with new compatible type definitions 
  - closes #6 
  - closes #40 
- fix tabbing from focusable elements 
  - fixes #18 
  - subsumes #24  
- follow subject changes in Cypress command chain / events sent in proper order before focus change 
  - closes #47
- fix hanging tests when used with cy.clock 
  - closes #42

Author: kuceb

.eslintignore

@@ -4,38 +4,25 @@ on: [push]
 
 jobs:
   test-e2e:
-    runs-on: ubuntu-16.04
-    container:
-      image: cypress/browsers:node12.16.1-chrome80-ff73
-      options: --user 1001
-
+    runs-on: ubuntu-latest
     strategy:
       matrix:
-        cypress-version: ["current", "current-firefox", 3.8.3, 3.4.1]
+        cypress-version: ['10.11.0', '15.1.0']
 
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: "12.x"
+          node-version: '20'
+          cache: yarn
 
       - name: install
-        run: |
-          yarn install --frozen-lockfile
-
-      - name: print-info
-        run: |
-          firefox --version
+        run: yarn install --frozen-lockfile
 
-      - name: maybe-install
-        run: |
-          firefox --version
-          [[ current-firefox =~ current ]] || yarn add -D cypress@current-firefox
-        shell: bash
+      - name: install Cypress ${{ matrix.cypress-version }}
+        run: yarn add -D cypress@${{ matrix.cypress-version }}
 
-      - name: test
-        run: |
-          yarn test-e2e $([[ ${{ matrix.cypress-version }} =~ 'firefox' ]] && echo '--browser firefox')
+      - name: test against Cypress ${{ matrix.cypress-version }}
+        run: yarn test-e2e
         env:
           CI: true
-        shell: bash

.eslintrc.json

@@ -0,0 +1,45 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22.14.0'
+          registry-url: 'https://registry.npmjs.org'
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Verify tag matches package version
+        shell: bash
+        run: |
+          PACKAGE_VERSION="$(node -p "require('./package.json').version")"
+          TAG_VERSION="${GITHUB_REF_NAME#v}"
+
+          if [[ "${PACKAGE_VERSION}" != "${TAG_VERSION}" ]]; then
+            echo "Tag ${GITHUB_REF_NAME} does not match package.json version ${PACKAGE_VERSION}" >&2
+            exit 1
+          fi
+
+      - name: Check package contents
+        run: npm pack --dry-run
+
+      - name: Publish to npm
+        run: npm publish --provenance --access public

.github/workflows/nodejs.yml

@@ -0,0 +1,10 @@
+node_modules
+coverage
+dist
+cypress/videos
+cypress/screenshots
+cypress/fixtures
+docs/*.gif
+docs/*.png
+yarn.lock
+package-lock.json

.github/workflows/release.yml

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

.prettierignore

@@ -21,9 +21,9 @@
     {
       "language": "json",
       "autoFix": true
-    },
+    }
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
+    "source.fixAll.eslint": "explicit"
+  }
 }

.prettierrc.json

@@ -1,33 +1,58 @@
-
 <div align="center">
-    <!-- <img src="docs/readme-logo.png"> -->
-    <h1>cypress-plugin-tab <kbd>beta</kbd></h1>
+    <h1>cypress-plugin-tab</h1>
     <a href="https://www.npmjs.com/package/cypress-plugin-tab"><img src="https://img.shields.io/npm/v/cypress-plugin-tab.svg?style=flat"></a>
     <a href="https://www.npmjs.com/package/cypress-plugin-tab"><img src="https://img.shields.io/npm/dt/cypress-plugin-tab.svg"></a>
-    <a href="https://github.com/bkucera/cypress-plugin-tab/blob/master/LICENSE"><img src="https://img.shields.io/github/license/bkucera/cypress-plugin-tab.svg"></a>
+    <a href="https://github.com/kuceb/cypress-plugin-tab/blob/master/LICENSE"><img src="https://img.shields.io/github/license/kuceb/cypress-plugin-tab.svg"></a>
 <p>A Cypress plugin to add a tab command</p>
 
 </div>
 
-> :warning: this module is in beta, and might cause some strange failures. Please report bugs in the issues of this repo.
-
-> Note: [please refer to this issue for updates about official cypress tab support](https://github.com/cypress-io/cypress/issues/299)
-
 ![](docs/readme-screenshot.png)
 ![](docs/readme-demo.gif)
 
 ### Installation
 
-Add the plugin to `devDependencies`
+This package supports Cypress 10+.
+
+1. Install the plugin:
+
 ```bash
 npm install -D cypress-plugin-tab
 ```
 
-At the top of **`cypress/support/index.js`**:
+2. Load it from your Cypress support file at **`cypress/support/e2e.js`**:
+
 ```js
 require('cypress-plugin-tab')
 ```
 
+If your support file is TypeScript, use:
+
+```ts
+import 'cypress-plugin-tab'
+```
+
+3. Make sure your Cypress config points at that support file. Example **`cypress.config.js`**:
+
+```js
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    supportFile: 'cypress/support/e2e.js',
+  },
+})
+```
+
+4. If you use TypeScript and want the custom command typed in editors, add the package to your Cypress tsconfig:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["cypress", "cypress-plugin-tab"]
+  }
+}
+```
 
 ### Usage
 
@@ -36,19 +61,22 @@ require('cypress-plugin-tab')
 - `.tab({ shift: true })` sends a shift-tab to the element
 
 ```js
-  cy.get('input').type('foo').tab().type('bar') // type foo, then press tab, then type bar
-  cy.get('body').tab() // tab into the first tabbable element on the page
-  cy.focused().tab() // tab into the currently focused element
+cy.get('input').type('hello').tab().type('world') // type foo, then press tab, then type bar
+cy.get('body').tab() // tab into the first tabbable element on the page
+cy.focused().tab() // tab into the currently focused element
 ```
 
 shift+tab:
 
 ```js
 cy.get('input')
-  .type('foop').tab()
-  .type('bar').tab({ shift: true })
-  .type('foo') // correct your mistake
+  .type('hwllo')
+  .tab()
+  .type('world')
+  .tab({ shift: true })
+  .type('hello') // correct your mistake
 ```
 
 ### License
+
 [MIT](LICENSE)

.vscode/settings.json

@@ -0,0 +1,54 @@
+# Release Notes
+
+## 2.0.0
+
+This release updates `cypress-plugin-tab` for Cypress 10+ and drops support for older Cypress project layouts.
+
+### Breaking Changes
+
+- Dropped support for Cypress versions earlier than 10.
+- Consumers should use the Cypress 10+ project structure with `cypress.config.js` or `cypress.config.ts`.
+- Consumers should load the plugin from `cypress/support/e2e.js` instead of the legacy `cypress/support/index.js`.
+- The package now declares Cypress 10+ compatibility via `peerDependencies`.
+
+### Added
+
+- Cypress 10+ project configuration for this repo.
+- CI coverage for Cypress 10 and Cypress 15.
+- TypeScript compile-time tests for the custom `cy.tab()` command.
+- Regression coverage for tabbing out of programmatically focused `tabindex="-1"` elements.
+
+### Fixed
+
+- TypeScript declaration merging for `cy.tab()` in module-based TypeScript setups.
+- Tabbing behavior when focus starts on a focusable but non-tabbable element such as `tabindex="-1"`.
+
+### Migration
+
+Install the package:
+
+```bash
+npm install -D cypress-plugin-tab
+```
+
+Load it from `cypress/support/e2e.js`:
+
+```js
+require('cypress-plugin-tab')
+```
+
+If your Cypress support file is TypeScript:
+
+```ts
+import 'cypress-plugin-tab'
+```
+
+If you use TypeScript and want editor support for `cy.tab()`, include the package in your Cypress tsconfig:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["cypress", "cypress-plugin-tab"]
+  }
+}
+```