{"_id":"@allystudio/accessibility-utils","name":"@allystudio/accessibility-utils","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@allystudio/accessibility-utils","version":"0.1.0","description":"Shared accessibility utilities for AllyStudio projects","type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./accessibility":{"types":"./dist/accessibility.d.ts","import":"./dist/accessibility.js"},"./selectors":{"types":"./dist/selectors.d.ts","import":"./dist/selectors.js"},"./visibility":{"types":"./dist/visibility.d.ts","import":"./dist/visibility.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","type-check":"tsc --noEmit","test":"vitest","test:watch":"vitest --watch"},"dependencies":{"focusable-selectors":"^0.8.4"},"devDependencies":{"@types/node":"^20.0.0","@vitest/browser":"^2.0.0","playwright":"^1.40.0","tsup":"^8.0.0","typescript":"^5.0.0","vitest":"^2.0.0"},"keywords":["accessibility","a11y","dom","selectors","focus","aria"],"license":"MIT","author":{"name":"Allyship.dev"},"repository":{"type":"git","url":"git+https://github.com/allyship-dev/allyship.dev.git","directory":"packages/accessibility-utils"},"publishConfig":{"access":"public"},"_id":"@allystudio/accessibility-utils@0.1.0","gitHead":"51a0130ca44790bcfd274dc137c332afe9dde5c1","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-pdL5V94eB28qxL5+DOqM9r9CQVzDDnfHCgrX9JdZ42dtAOeOa9eKGJyAv1PAyB3yvz9hZf7RayCnmhJg8t3dzQ==","shasum":"41998e5878f92bd6e641164ca694dc07d5090edf","tarball":"https://registry.npmjs.org/@allystudio/accessibility-utils/-/accessibility-utils-0.1.0.tgz","fileCount":14,"unpackedSize":66936,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEpX3QWYw7mYl/yxrPWenKIPjiWB8shOAk3ZJ2zcJLmPAiEA0AIBfyjDHmI7/gYT3agXXruArHFMddoikrn3xkgvi+U="}]},"_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/accessibility-utils_0.1.0_1750390607237_0.6890649564773443"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-20T03:36:47.150Z","0.1.0":"2025-06-20T03:36:47.425Z","modified":"2025-06-20T03:36:47.760Z"},"maintainers":[{"name":"allystudio","email":"privat@aleksejdix.com"}],"description":"Shared accessibility utilities for AllyStudio projects","homepage":"https://github.com/allyship-dev/allyship.dev#readme","keywords":["accessibility","a11y","dom","selectors","focus","aria"],"repository":{"type":"git","url":"git+https://github.com/allyship-dev/allyship.dev.git","directory":"packages/accessibility-utils"},"author":{"name":"Allyship.dev"},"bugs":{"url":"https://github.com/allyship-dev/allyship.dev/issues"},"license":"MIT","readme":"# @allystudio/accessibility-utils\n\nShared accessibility utilities for AllyStudio projects. This package consolidates accessibility logic that was previously scattered across multiple packages and applications.\n\n## Why This Package Exists\n\nThis package was created to solve the problem of duplicated accessibility code across the AllyStudio ecosystem. Previously, we had:\n\n- Focusable element detection duplicated in 5+ places\n- Custom implementations of accessibility name calculations\n- Inconsistent selector generation logic\n- No shared source of truth for accessibility utilities\n\n## Features\n\n### 🎯 Accessibility Analysis\n- `getAccessibilityInfo()` - Comprehensive accessibility properties\n- `getImplicitRole()` - Determines implicit ARIA roles\n- `getAccessibleName()` - Calculates accessible names per WCAG\n- `getAccessibleDescription()` - Gets accessible descriptions\n- `isFocusable()` - Reliable focus detection\n\n### 🔍 Element Selection & Identification\n- `generateSelector()` - Robust CSS selector generation\n- `generateXPath()` - XPath generation for elements\n- `getFocusableElements()` - Uses [`focusable-selectors`](https://www.npmjs.com/package/focusable-selectors) library\n- `getVisibleFocusableElements()` - Only visible focusable elements\n\n### 👁️ Element Visibility\n- `isElementVisible()` - CSS visibility detection\n- `isInViewport()` - Viewport intersection\n- `getVisibilityRatio()` - Percentage of element visible\n\n## Installation\n\n```bash\nnpm install @allystudio/accessibility-utils\n```\n\n## Usage\n\n### Basic Accessibility Analysis\n\n```typescript\nimport { getAccessibilityInfo, getAccessibleName } from '@allystudio/accessibility-utils'\n\nconst button = document.querySelector('button')\nconst a11yInfo = getAccessibilityInfo(button)\n\nconsole.log(a11yInfo)\n// {\n//   role: 'button',\n//   ariaLabel: null,\n//   accessibleName: 'Click me',\n//   focusable: true,\n//   // ...\n// }\n```\n\n### Finding Focusable Elements\n\n```typescript\nimport { getFocusableElements, getVisibleFocusableElements } from '@allystudio/accessibility-utils'\n\n// Get all focusable elements (uses focusable-selectors library)\nconst allFocusable = getFocusableElements()\n\n// Get only visible focusable elements\nconst visibleFocusable = getVisibleFocusableElements()\n```\n\n### Element Selection\n\n```typescript\nimport { generateSelector, generateXPath } from '@allystudio/accessibility-utils'\n\nconst element = document.querySelector('.my-element')\n\nconst cssSelector = generateSelector(element)\n// \"div.container > .my-element:nth-child(2)\"\n\nconst xpath = generateXPath(element)\n// \"/html/body/div[1]/div[2]\"\n```\n\n### Visibility Checking\n\n```typescript\nimport { isElementVisible, getVisibilityRatio } from '@allystudio/accessibility-utils'\n\nconst element = document.querySelector('.content')\n\nif (isElementVisible(element)) {\n  const visibilityRatio = getVisibilityRatio(element)\n  console.log(`Element is ${Math.round(visibilityRatio * 100)}% visible`)\n}\n```\n\n## Dependencies\n\nThis package leverages proven open-source libraries:\n\n- [`focusable-selectors`](https://www.npmjs.com/package/focusable-selectors) - Reliable focusable element detection\n- Zero other runtime dependencies\n\n## Replacing Duplicated Code\n\nThis package replaces scattered implementations in:\n\n- `packages/element-inspector/src/utils.ts`\n- `apps/allystudio/src/lib/focusable-selectors.ts`\n- `apps/allystudio/src/lib/testing/focusable-selectors.ts`\n- `apps/allystudio/src/lib/testing/utils/accessibility-utils.ts`\n- `apps/allyship/components/tools/tools/keyboard-accessibility.ts`\n\n## Benefits\n\n✅ **Single source of truth** for accessibility logic\n✅ **Leverages proven libraries** like `focusable-selectors`\n✅ **Consistent behavior** across all AllyStudio projects\n✅ **Better testing** with shared, well-tested utilities\n✅ **Smaller bundle sizes** by eliminating duplication\n✅ **Easier maintenance** with centralized updates\n\n## TypeScript Support\n\nFully typed with comprehensive TypeScript definitions.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-f8ceacd0861b33fe524e474e538f8573"}