feat: build tweaks to support legacy TS setups (#80)

examples/README.md

@@ -4,11 +4,15 @@ This directory contains a series of self-contained examples that you can use as
 starting points for your setup, or as snippets to pull into your existing
 projects:
 
-| Example | Description |
-| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
-| [Cypress](./cypress) | A basic example combining [Cypress](https://www.cypress.io/) and Virtual Screen Reader. |
-| [Puppeteer](./puppeteer) | A basic example combining [Puppeteer](https://pptr.dev/) and Virtual Screen Reader. |
-| [Playwright](./playwright) | A basic example combining [Playwright](https://playwright.dev) and Virtual Screen Reader. |
-| [Storybook](./storybook) | A basic example combining [Storybook](https://storybook.js.org/) and Virtual Screen Reader. |
-| [Vue](./vue) | A basic example combining Vue, Vitest, Vue Testing Library, and Virtual Screen Reader. |
-| [Web Test Runner](./web-test-runner) | A basic example combining [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and Virtual Screen Reader. |
+| Example | Description |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| [CommonJS](./commonjs) | A basic example using the Virtual Screen Reader in a CommonJS application. |
+| [Cypress](./cypress) | A basic example combining [Cypress](https://www.cypress.io/) and Virtual Screen Reader. |
+| [Puppeteer](./puppeteer) | A basic example combining [Puppeteer](https://pptr.dev/) and Virtual Screen Reader. |
+| [Playwright](./playwright) | A basic example combining [Playwright](https://playwright.dev) and Virtual Screen Reader. |
+| [Storybook](./storybook) | A basic example combining [Storybook](https://storybook.js.org/) and Virtual Screen Reader. |
+| [TypeScript Bundler](./typescript-bundler) | A basic example where Virtual Screen Reader is used for an application using a bundler. |
+| [TypeScript Legacy](./typescript-legacy) | A basic example where Virtual Screen Reader is used for a legacy TypeScript CommonJS application. |
+| [TypeScript NodeNext](./typescript-nodenext) | A basic example where Virtual Screen Reader is used for a Node.js application or library. |
+| [Vue](./vue) | A basic example combining Vue, Vitest, Vue Testing Library, and Virtual Screen Reader. |
+| [Web Test Runner](./web-test-runner) | A basic example combining [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and Virtual Screen Reader. |

examples/commonjs/README.md

@@ -0,0 +1,20 @@
+# CommonJS Example
+
+A basic example using the Virtual Screen Reader in a CommonJS application.
+
+Run this example with:
+
+```bash
+# Install and build core package
+yarn install --frozen-lockfile
+
+# Navigate to example, install, and test
+cd examples/commonjs
+yarn install --frozen-lockfile
+yarn test
+```
+
+> [!IMPORTANT]
+> This example serves to demonstrate how you can use the Virtual Screen Reader. The components themselves may not be using best accessibility practices.
+>
+> Always evaluate your own components for accessibility and test with real users.

examples/commonjs/jest.config.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+ testEnvironment: "jsdom",
+ roots: ["src"],
+ collectCoverageFrom: ["**/*.js"],
+ coveragePathIgnorePatterns: [],
+ coverageThreshold: {
+ global: {
+ branches: 100,
+ functions: 100,
+ lines: 100,
+ statements: 100,
+ },
+ },
+ setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+};

examples/commonjs/jest.setup.js

@@ -0,0 +1 @@
+jest.setTimeout(10000);

examples/commonjs/package.json

@@ -0,0 +1,15 @@
+{
+ "name": "@guidepup/virtual-screen-reader-commonjs-example",
+ "version": "1.0.0",
+ "author": "Craig Morten <craig.morten@hotmail.co.uk>",
+ "license": "MIT",
+ "private": true,
+ "scripts": {
+ "preinstall": "yarn --cwd=../.. build",
+ "test": "jest"
+ },
+ "devDependencies": {
+ "jest": "^29.7.0",
+ "jest-environment-jsdom": "^29.7.0"
+ }
+}

examples/commonjs/src/__snapshots__/vsr.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matchers virtual screen reader tests navigating headings 1`] = `
+[
+ "document",
+ "heading, First Section Heading, level 1",
+ "heading, Article Header Heading, level 1",
+ "heading, Second Section Heading, level 1",
+ "heading, First Section Heading, level 1",
+]
+`;

examples/commonjs/src/vsr.test.js

@@ -0,0 +1,56 @@
+const { virtual } = require("../../../lib/cjs/index.js");
+// In your code, replace with:
+// const { virtual } = require("@guidepup/virtual-screen-reader");
+
+function setupBasicPage() {
+ document.body.innerHTML = `
+ <nav>Nav Text</nav>
+ <section>
+ <h1>First Section Heading</h1>
+ <p>First Section Text</p>
+ <article>
+ <header>
+ <h1>Article Header Heading</h1>
+ <p>Article Header Text</p>
+ </header>
+ <p>Article Text</p>
+ </article> 
+ </section>
+ <section>
+ <h1>Second Section Heading</h1>
+ <p>Second Section Text</p>
+ </section>
+ <section aria-hidden="true">
+ <h1>Hidden Section Heading</h1>
+ <p>Hidden Section Text</p>
+ </section>
+ <footer>Footer</footer>
+ `;
+}
+
+describe("matchers", () => {
+ beforeEach(() => {
+ setupBasicPage();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = ``;
+ });
+
+ describe("virtual screen reader tests", () => {
+ test("navigating headings", async () => {
+ await virtual.start({ container: document.body });
+
+ await virtual.perform(virtual.commands.moveToNextHeading);
+ const firstHeadingPhrase = await virtual.lastSpokenPhrase();
+
+ do {
+ await virtual.perform(virtual.commands.moveToNextHeading);
+ } while ((await virtual.lastSpokenPhrase()) !== firstHeadingPhrase);
+
+ expect(await virtual.spokenPhraseLog()).toMatchSnapshot();
+
+ await virtual.stop();
+ });
+ });
+});