{"_id":"@allystudio/focus-order-visualizer","name":"@allystudio/focus-order-visualizer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@allystudio/focus-order-visualizer","version":"1.0.0","description":"A lightweight library for visualizing focus order on web pages with numbered overlays and connecting lines","type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest","test:watch":"vitest --watch","test:coverage":"vitest --coverage","lint":"oxlint src","type-check":"tsc --noEmit"},"keywords":["accessibility","focus","focus-order","keyboard-navigation","a11y","visualization","web-accessibility","dom","testing"],"author":{"name":"Allyship.dev"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/allyship-dev/allyship.dev.git","directory":"packages/focus-order-visualizer"},"publishConfig":{"access":"public"},"dependencies":{"focusable-selectors":"^0.8.4"},"devDependencies":{"@types/node":"^20.0.0","@vitest/coverage-v8":"^2.0.0","jsdom":"^23.0.0","oxlint":"^1.2.0","tsup":"^8.0.0","typescript":"^5.0.0","vitest":"^2.0.0"},"engines":{"node":">=16"},"_id":"@allystudio/focus-order-visualizer@1.0.0","gitHead":"cd5a7134ba240f13dd14aff3ef5cde33c4eb1c83","bugs":{"url":"https://github.com/allyship-dev/allyship.dev/issues"},"homepage":"https://github.com/allyship-dev/allyship.dev#readme","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-DSHwey1adIIx+EPF55QvVFbS/eTDHWLiJbmRHRsFchbNoNcd29IKKq6ZF5XCodjNGGZfF1DSdGCphFlEdcfPlg==","shasum":"ce896356bbba6bb5f1bb364e6f5d09349c4c9df7","tarball":"https://registry.npmjs.org/@allystudio/focus-order-visualizer/-/focus-order-visualizer-1.0.0.tgz","fileCount":6,"unpackedSize":46197,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEOZNUS6Ulz0efkN2qAescprIWZRcvi0/hkTubHyj/yqAiAH3zLRkTSgzTX3rnoltQSvEp/6224lsx9IGB0dPpzBIg=="}]},"_npmUser":{"name":"allystudio","email":"privat@aleksejdix.com","actor":{"name":"allystudio","email":"privat@aleksejdix.com","type":"user"}},"directories":{},"maintainers":[{"name":"allystudio","email":"privat@aleksejdix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/focus-order-visualizer_1.0.0_1750414023063_0.14552499680345732"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-20T10:07:02.990Z","1.0.0":"2025-06-20T10:07:03.222Z","modified":"2025-06-20T10:07:03.457Z"},"maintainers":[{"name":"allystudio","email":"privat@aleksejdix.com"}],"description":"A lightweight library for visualizing focus order on web pages with numbered overlays and connecting lines","homepage":"https://github.com/allyship-dev/allyship.dev#readme","keywords":["accessibility","focus","focus-order","keyboard-navigation","a11y","visualization","web-accessibility","dom","testing"],"repository":{"type":"git","url":"git+https://github.com/allyship-dev/allyship.dev.git","directory":"packages/focus-order-visualizer"},"author":{"name":"Allyship.dev"},"bugs":{"url":"https://github.com/allyship-dev/allyship.dev/issues"},"license":"MIT","readme":"# @allystudio/focus-order-visualizer\n\nA lightweight, fast library for visualizing focus order on web pages with numbered overlays and connecting lines. Perfect for accessibility testing and development.\n\n## Features\n\n- 🎯 **Visual Focus Order**: Shows numbered circles on focusable elements\n- 🔗 **Connecting Lines**: Solid straight lines showing tab flow\n- ⚡ **Real-time Updates**: Responds to DOM changes and scrolling\n- 🎨 **Customizable**: Colors, sizes, and visibility options\n- ♿ **Accessibility Focused**: Follows HTML tabindex specification\n- 🪶 **Lightweight**: Zero dependencies except focusable-selectors\n- 📱 **Responsive**: Works with scrollable content and dynamic layouts\n\n## Installation\n\n```bash\nnpm install @allystudio/focus-order-visualizer\n```\n\n## Quick Start\n\n```javascript\nimport { createFocusOrderVisualizer } from '@allystudio/focus-order-visualizer';\n\n// Create visualizer\nconst visualizer = createFocusOrderVisualizer();\n\n// Start visualization\nvisualizer.start();\n\n// Stop visualization\nvisualizer.stop();\n\n// Toggle visualization\nvisualizer.toggle();\n```\n\n## Configuration\n\n```javascript\nconst visualizer = createFocusOrderVisualizer({\n  includeHidden: false,\n  showConnectingLines: true,\n  colors: {\n    overlay: '#2563eb',\n    overlayText: '#ffffff',\n    connectingLine: 'rgba(37, 99, 235, 0.3)',\n    focusOutline: '#2563eb',\n  },\n  zIndex: 2147483646,\n  overlaySize: 24,\n});\n```\n\n### Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `includeHidden` | `boolean` | `false` | Include hidden focusable elements |\n| `showConnectingLines` | `boolean` | `true` | Show lines between elements |\n| `colors.overlay` | `string` | `'#2563eb'` | Circle background color |\n| `colors.overlayText` | `string` | `'#ffffff'` | Circle text color |\n| `colors.connectingLine` | `string` | `'rgba(37, 99, 235, 0.3)'` | Line color |\n| `zIndex` | `number` | `2147483646` | Z-index for overlays |\n| `overlaySize` | `number` | `24` | Circle size in pixels |\n\n## API Reference\n\n### Methods\n\n#### `start()`\nStart the focus order visualization.\n\n#### `stop()`\nStop the visualization and clean up all elements.\n\n#### `toggle()`\nToggle visualization on/off. Returns current state.\n\n#### `isActive()`\nCheck if visualization is currently active.\n\n#### `getStats()`\nGet statistics about focusable elements:\n\n```javascript\nconst stats = visualizer.getStats();\n// {\n//   total: 15,\n//   positiveTabIndex: 3,\n//   actuallyFocusable: 12\n// }\n```\n\n#### `updateConfig(options)`\nUpdate configuration options:\n\n```javascript\nvisualizer.updateConfig({\n  colors: { overlay: '#10b981' },\n  overlaySize: 32\n});\n```\n\n#### `destroy()`\nCompletely destroy the visualizer instance.\n\n## Focus Order Rules\n\nThe visualizer follows the HTML specification for focus order:\n\n1. **Positive tabindex** (1, 2, 3...) - focused first, in ascending order\n2. **Zero tabindex** (0) and naturally focusable elements - focused after positive tabindex\n3. **Negative tabindex** (-1) - excluded from tab order\n\n## Browser Support\n\n- Chrome/Edge 88+\n- Firefox 87+\n- Safari 14+\n\n## Use Cases\n\n- **Accessibility Testing**: Verify focus order matches visual layout\n- **Development**: Debug keyboard navigation issues\n- **QA**: Validate tabindex implementation\n- **Education**: Demonstrate focus flow to designers/stakeholders\n\n## Demo\n\nCheck out the [interactive demo](./demo/index.html) for examples of:\n- Form elements\n- Navigation links\n- Custom tabindex values\n- Scrollable content\n- Dynamic content changes\n\n## License\n\nMIT License - see [LICENSE](./LICENSE) file for details.\n\n## Contributing\n\nPart of the [Allyship.dev](https://github.com/allyship-dev/allyship.dev) accessibility toolkit.\n\nJoin us in building the next generation of accessibility testing tools that will make the web accessible for everyone.\n","readmeFilename":"README.md","_rev":"1-97e1480702208cf3b0114c34ba048804"}