@a11ypros/a11y-ui-components 1.0.1 → 1.0.2

package/dist/utils/focus.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Focus management utilities
+ * Helpers for programmatic focus control
+ */
+/**
+ * Get all focusable elements within a container
+ */
+export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+/**
+ * Get the first focusable element in a container
+ */
+export declare function getFirstFocusable(container: HTMLElement): HTMLElement | null;
+/**
+ * Get the last focusable element in a container
+ */
+export declare function getLastFocusable(container: HTMLElement): HTMLElement | null;
+/**
+ * Check if an element is focusable
+ */
+export declare function isFocusable(element: HTMLElement): boolean;
+export declare function saveFocus(): void;
+/**
+ * Restore focus to the previously saved element
+ */
+export declare function restoreFocus(): void;
+/**
+ * Focus an element safely (with error handling)
+ */
+export declare function safeFocus(element: HTMLElement | null): void;
+//# sourceMappingURL=focus.d.ts.map

package/dist/utils/focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../src/utils/focus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,WAAW,GACrB,WAAW,EAAE,CAWf;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAG5E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAG3E;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAQzD;AAOD,wBAAgB,SAAS,IAAI,IAAI,CAIhC;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAKnC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAS3D"}

package/dist/utils/focus.js

@@ -0,0 +1,80 @@
+/**
+ * Focus management utilities
+ * Helpers for programmatic focus control
+ */
+/**
+ * Get all focusable elements within a container
+ */
+export function getFocusableElements(container) {
+    const focusableSelectors = [
+        'a[href]',
+        'button:not([disabled])',
+        'textarea:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(', ');
+    return Array.from(container.querySelectorAll(focusableSelectors));
+}
+/**
+ * Get the first focusable element in a container
+ */
+export function getFirstFocusable(container) {
+    const focusable = getFocusableElements(container);
+    return focusable[0] || null;
+}
+/**
+ * Get the last focusable element in a container
+ */
+export function getLastFocusable(container) {
+    const focusable = getFocusableElements(container);
+    return focusable[focusable.length - 1] || null;
+}
+/**
+ * Check if an element is focusable
+ */
+export function isFocusable(element) {
+    if (element.tabIndex < 0)
+        return false;
+    if (element.hasAttribute('disabled'))
+        return false;
+    if (element.hasAttribute('hidden'))
+        return false;
+    if (element.style.display === 'none')
+        return false;
+    if (element.style.visibility === 'hidden')
+        return false;
+    return true;
+}
+/**
+ * Save the currently focused element
+ */
+let savedFocusElement = null;
+export function saveFocus() {
+    if (document.activeElement instanceof HTMLElement) {
+        savedFocusElement = document.activeElement;
+    }
+}
+/**
+ * Restore focus to the previously saved element
+ */
+export function restoreFocus() {
+    if (savedFocusElement) {
+        savedFocusElement.focus();
+        savedFocusElement = null;
+    }
+}
+/**
+ * Focus an element safely (with error handling)
+ */
+export function safeFocus(element) {
+    if (element && typeof element.focus === 'function') {
+        try {
+            element.focus();
+        }
+        catch (error) {
+            // Silently fail if focus fails
+            console.warn('Failed to focus element:', error);
+        }
+    }
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './aria';
+export * from './keyboard';
+export * from './focus';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from './aria';
+export * from './keyboard';
+export * from './focus';

package/dist/utils/keyboard.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Keyboard event utilities
+ * Helpers for handling keyboard interactions
+ */
+export type KeyboardHandler = (event: React.KeyboardEvent) => void;
+/**
+ * Check if a key is an activation key (Enter or Space)
+ */
+export declare function isActivationKey(key: string): boolean;
+/**
+ * Check if a key is an arrow key
+ */
+export declare function isArrowKey(key: string): boolean;
+/**
+ * Check if a key is a navigation key (Home, End, PageUp, PageDown)
+ */
+export declare function isNavigationKey(key: string): boolean;
+/**
+ * Check if a key is an escape key
+ */
+export declare function isEscapeKey(key: string): boolean;
+/**
+ * Check if modifier keys are pressed
+ */
+export declare function hasModifierKey(event: React.KeyboardEvent): boolean;
+/**
+ * Create a keyboard handler that only fires on specific keys
+ */
+export declare function createKeyHandler(keys: string[], handler: KeyboardHandler): KeyboardHandler;
+/**
+ * Create a keyboard handler for activation keys (Enter/Space)
+ */
+export declare function createActivationHandler(handler: KeyboardHandler): KeyboardHandler;
+/**
+ * Create a keyboard handler for arrow keys
+ */
+export declare function createArrowKeyHandler(handler: KeyboardHandler): KeyboardHandler;
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/utils/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/utils/keyboard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAA;AAElE;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAE/C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEhD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,OAAO,CAElE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,eAAe,GACvB,eAAe,CAMjB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,eAAe,GACvB,eAAe,CAKjB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,eAAe,GACvB,eAAe,CAEjB"}

package/dist/utils/keyboard.js

@@ -0,0 +1,59 @@
+/**
+ * Keyboard event utilities
+ * Helpers for handling keyboard interactions
+ */
+/**
+ * Check if a key is an activation key (Enter or Space)
+ */
+export function isActivationKey(key) {
+    return key === 'Enter' || key === ' ';
+}
+/**
+ * Check if a key is an arrow key
+ */
+export function isArrowKey(key) {
+    return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key);
+}
+/**
+ * Check if a key is a navigation key (Home, End, PageUp, PageDown)
+ */
+export function isNavigationKey(key) {
+    return ['Home', 'End', 'PageUp', 'PageDown'].includes(key);
+}
+/**
+ * Check if a key is an escape key
+ */
+export function isEscapeKey(key) {
+    return key === 'Escape';
+}
+/**
+ * Check if modifier keys are pressed
+ */
+export function hasModifierKey(event) {
+    return event.ctrlKey || event.metaKey || event.altKey || event.shiftKey;
+}
+/**
+ * Create a keyboard handler that only fires on specific keys
+ */
+export function createKeyHandler(keys, handler) {
+    return (event) => {
+        if (keys.includes(event.key)) {
+            handler(event);
+        }
+    };
+}
+/**
+ * Create a keyboard handler for activation keys (Enter/Space)
+ */
+export function createActivationHandler(handler) {
+    return createKeyHandler(['Enter', ' '], (event) => {
+        event.preventDefault();
+        handler(event);
+    });
+}
+/**
+ * Create a keyboard handler for arrow keys
+ */
+export function createArrowKeyHandler(handler) {
+    return createKeyHandler(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'], handler);
+}

package/package.json

@@ -1,40 +1,67 @@
 {
   "name": "@a11ypros/a11y-ui-components",
-  "version": "1.0.1",
-  "private": false,
-  "workspaces": [
-    "packages/*",
-    "apps/*"
+  "version": "1.0.2",
+  "description": "An accessibility-first React UI component library built with WCAG 2.1/2.2 compliance",
+  "keywords": [
+    "react",
+    "accessibility",
+    "a11y",
+    "wcag",
+    "design-system",
+    "components",
+    "typescript"
   ],
+  "author": "Ryan Mack <ryan@a11ypros.com>",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles": {
+      "import": "./dist/styles/global.css"
+    },
+    "./styles/components": {
+      "import": "./dist/styles/components.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ryan0122/a11ypros-components.git",
+    "directory": "packages/design-system"
+  },
   "scripts": {
-    "dev": "yarn workspace @apps/web dev",
-    "build": "yarn workspace @apps/web build",
-    "build:netlify": "netlify build --offline",
-    "build:netlify:debug": "netlify build --debug --offline",
-    "build:local": "mv apps/web/app/api apps/web/app/api.disabled 2>/dev/null || true && yarn install && yarn build-storybook && yarn workspace @apps/web build && mv apps/web/app/api.disabled apps/web/app/api 2>/dev/null || true",
-    "build:local:clean": "rm -rf apps/web/.next apps/web/out apps/web/public/storybook-static node_modules/.cache && yarn build:local",
-    "build:simulate": "netlify build --offline",
-    "storybook": "storybook dev -p 6006 --config-dir .storybook",
-    "build-storybook": "storybook build --config-dir .storybook --output-dir apps/web/public/storybook-static && node scripts/fix-storybook-paths.js"
+    "build": "tsc && node scripts/copy-css.js",
+    "prepublishOnly": "npm run build",
+    "storybook": "cd ../.. && npm run storybook",
+    "build-storybook": "cd ../.. && npm run build-storybook"
   },
-  "dependencies": {
-    "@anthropic-ai/sdk": "^0.20.0",
-    "@netlify/functions": "^2.4.1"
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "9.1.17",
-    "@storybook/addon-docs": "9.1.17",
-    "@storybook/addon-links": "9.1.17",
-    "@storybook/react": "9.1.17",
-    "@storybook/react-vite": "9.1.17",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "9.1.17",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.0"
-  },
-  "engines": {
-    "node": ">=18.0.0"
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-docs": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
   }
 }
-

package/.storybook/custom.css

@@ -1,69 +0,0 @@
-/* Custom Storybook styles */
-
-/* Override Storybook's default bright blue link color */
-.sbdocs a,
-.sbdocs a:link,
-.docs-story a,
-.docs-story a:link {
-  color: #0e8168 !important;
-}
-
-.sbdocs a:hover,
-.docs-story a:hover {
-  color: #075985 !important;
-}
-
-.sbdocs a:visited,
-.docs-story a:visited {
-  color: #0369a1 !important;
-}
-
-/* Fix controls pane button hover states - ensure text is visible */
-.sb-controls button:hover,
-.sb-controls button:focus,
-[data-testid="control-buttons-container"] button:hover,
-[data-testid="control-buttons-container"] button:focus,
-button[aria-label*="Set"]:hover,
-button[aria-label*="Set"]:focus,
-button[aria-label*="Reset"]:hover,
-button[aria-label*="Reset"]:focus,
-[id*="storybook-panel"] button:hover,
-[id*="storybook-panel"] button:focus {
-  color: #171717 !important;
-  background-color: #f5f5f5 !important;
-}
-
-/* Ensure button text is visible in all states */
-.sb-controls button,
-[data-testid="control-buttons-container"] button,
-button[aria-label*="Set"],
-button[aria-label*="Reset"],
-[id*="storybook-panel"] button {
-  color: #171717 !important;
-}
-
-/* Override left sidebar navigation hover colors to match color scheme */
-.sidebar-container [role="menuitem"]:hover,
-.sidebar-container [role="menuitem"]:focus,
-.sidebar-container a:hover,
-.sidebar-container a:focus,
-[data-nodetype="story"]:hover,
-[data-nodetype="story"]:focus,
-[data-nodetype="component"]:hover,
-[data-nodetype="component"]:focus,
-[data-nodetype="group"]:hover,
-[data-nodetype="group"]:focus {
-  background-color: #f5f5f5 !important;
-  color: #0e8168 !important;
-}
-
-/* Override selected state to use primary color */
-.sidebar-container [role="menuitem"][aria-selected="true"],
-.sidebar-container [role="menuitem"][aria-current="true"],
-[data-nodetype="story"][aria-selected="true"],
-[data-nodetype="component"][aria-selected="true"] {
-  background-color: #f0f9ff !important;
-  color: #0e8168 !important;
-  border-left-color: #0e8168 !important;
-}
-

package/.storybook/main.ts

@@ -1,46 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite'
-
-const config: StorybookConfig = {
-  stories: [
-    '../.storybook/welcome.mdx',
-    '../packages/design-system/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-a11y',
-    '@storybook/addon-docs',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {
-      viteConfigPath: '.storybook/vite.config.ts',
-    },
-  },
-  viteFinal: async (config) => {
-    config.define = {
-      ...config.define,
-      'process.env': {},
-      'process': { env: {} },
-    }
-    return config
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-  typescript: {
-    check: false,
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
-    },
-  },
-  core: {
-    disableTelemetry: true,
-  },
-  staticDirs: ['../public'],
-  // Base path is configured in vite.config.ts to use /storybook-static/
-  // This ensures assets use absolute paths that match where files are located
-}
-
-export default config
-

package/.storybook/manager.ts

@@ -1,26 +0,0 @@
-import { addons } from '@storybook/manager-api'
-import { create } from '@storybook/theming'
-import './custom.css'
-
-const theme = create({
-  base: 'light',
-  brandTitle: 'A11y Pros Design System',
-  brandUrl: '/storybook',
-  brandImage: '/storybook-static/logo.png', // Path to your logo file (served from staticDirs)
-  brandTarget: '_self',
-  
-  colorPrimary: '#0e8168',
-  colorSecondary: '#001d2f',
-  
-  // Toolbar colors
-  barTextColor: '#171717',
-  barSelectedColor: '#0e8168', // Selected nav item color (matches colorPrimary)
-  barHoverColor: '#f5f5f5', // Hover color for nav items in left sidebar
-  barBg: '#ffffff',
- 
-})
-
-addons.setConfig({
-  theme,
-})
-

package/.storybook/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "storybook-config",
-  "version": "1.0.0",
-  "private": true
-}
-

package/.storybook/preview.tsx

@@ -1,31 +0,0 @@
-import type { Preview } from '@storybook/react'
-import '../packages/design-system/src/styles/global.css'
-import './custom.css'
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    a11y: {
-      config: {
-        rules: [
-          {
-            id: 'color-contrast',
-            enabled: true,
-          },
-        ],
-      },
-    },
-    docs: {
-      toc: false,
-    },
-  },
-}
-
-export default preview
-

package/.storybook/vite.config.ts

@@ -1,24 +0,0 @@
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  base: '/storybook-static/',
-  define: {
-    'process.env': {},
-    'process': {
-      env: {},
-    },
-  },
-  build: {
-    // Ensure assets use absolute paths
-    assetsDir: 'assets',
-    // Disable source maps in production to avoid eval issues
-    sourcemap: false,
-    // Ensure proper minification
-    minify: 'esbuild',
-  },
-  // Ensure proper module resolution
-  resolve: {
-    preserveSymlinks: false,
-  },
-})
-

package/.storybook/welcome.mdx

@@ -1,97 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Welcome" />
-
-# Welcome to the A11y Pros Accessible Design System
-
-Welcome to our **accessibility-first React UI component library**. This design system provides a comprehensive collection of fully accessible components built with React, TypeScript, and modern web standards.
-
-[View on GitHub](https://github.com/ryan0122/a11ypros-components) • [Live Documentation](https://ui.a11ypros.com)
-
-## About This Design System
-
-This design system is **authored with accessibility in mind by a certified WAS (Web Accessibility Specialist)**. Every component has been carefully crafted to meet WCAG 2.1/2.2 Level AA standards, ensuring that your applications are usable by everyone, regardless of their abilities or the assistive technologies they use.
-
-**Note**: Currently, English is the only supported language for screen reader text and ARIA labels. Internationalization (i18n) support is coming soon.
-
-### Key Features
-
-- **Fully Accessible Components**: All React UI components are fully accessible, featuring proper ARIA attributes, keyboard navigation, and screen reader support
-- **WCAG 2.1/2.2 Compliant**: Components follow accessibility best practices and meet WCAG Level AA standards
-- **Keyboard Navigation**: Complete keyboard support for all interactive elements
-- **Focus Management**: Proper focus trapping and return focus patterns for modals and dialogs
-- **Semantic HTML**: Components use semantic HTML with ARIA enhancements where needed
-- **Reduced Motion Support**: Respects `prefers-reduced-motion` media query
-- **High Contrast Support**: Supports `prefers-contrast` for better visibility
-- **Design Token System**: Consistent spacing, colors, typography, and motion tokens
-
-## Available Components
-
-Our component library includes:
-
-- **Button**: Accessible button with variants, sizes, and loading states
-- **Link**: Semantic link component with external link detection
-- **Modal**: Focus-trapped modal dialog with ARIA support
-- **DataTable**: Accessible table with keyboard navigation and sorting
-- **Toast**: Notification system with ARIA live regions
-- **Tabs**: Tab component with arrow key navigation
-- **Form Components**: Input, Textarea, Select, Checkbox, Radio, Fieldset, Label
-
-## Coming Soon
-
-The following components are currently in development and will be available soon:
-
-- **DatePicker**: Accessible date selection component with keyboard navigation
-- **Banner**: Alert banner component with ARIA live region support
-- **Phone Text Field**: Specialized input field for phone numbers with formatting
-- **Combobox**: Accessible autocomplete/combobox component with ARIA 1.2 patterns
-
-## Getting Started
-
-Browse the component stories in the sidebar to explore each component's:
-- Usage examples
-- Accessibility features
-- Keyboard interaction patterns
-- WCAG compliance information
-- Props and API documentation
-
-## Accessibility First
-
-As a **certified WAS web accessibility specialist**, I've ensured that every component in this library:
-
-- Uses semantic HTML elements
-- Implements proper ARIA attributes
-- Supports full keyboard navigation
-- Provides visible focus indicators
-- Meets WCAG contrast requirements
-- Works seamlessly with screen readers
-- Handles focus management appropriately
-
-Each component story includes detailed accessibility documentation, so you can understand how to use these components in an accessible way.
-
-## Important Note on Accessibility
-
-> **Note**: While these components are built with accessibility in mind and meet WCAG 2.1/2.2 Level AA standards, **simply using these components does not guarantee an accessible application**. These components are foundational building blocks that must be used properly within the larger consuming application with accessibility in mind.
-
-To ensure your application is truly accessible, consider:
-
-- **Proper Implementation**: Use components according to their documented patterns and accessibility guidelines
-- **Application-Level Considerations**: Ensure proper page structure, heading hierarchy, and landmark regions
-- **Content Accessibility**: Write clear, descriptive text and provide alternative text for images
-- **Testing**: Regularly test your application with keyboard navigation and screen readers
-- **User Experience**: Consider the full user journey and how components work together
-
-These components provide a solid foundation, but accessibility is achieved through thoughtful implementation across your entire application.
-
-## Design Tokens
-
-The design system uses CSS custom properties for theming, ensuring consistency across your application while maintaining accessibility standards for color contrast and spacing.
-
-## Need Help?
-
-Explore the component stories to see examples, accessibility notes, and implementation details. Each component is documented with its WCAG compliance information and keyboard interaction patterns.
-
----
-
-**Built with accessibility in mind by a certified WAS web accessibility specialist.**
-