aura-glass/dist/utils/a11y.d.ts

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

/**
 * AuraGlass Accessibility Utilities
 * WCAG 2.1 AA compliance and accessibility helpers
 */
/**
 * ARIA role mappings for interactive elements
 */
export declare const ARIA_ROLES: {
    readonly button: "button";
    readonly link: "link";
    readonly menu: "menu";
    readonly menuitem: "menuitem";
    readonly menubar: "menubar";
    readonly menuitemcheckbox: "menuitemcheckbox";
    readonly menuitemradio: "menuitemradio";
    readonly dialog: "dialog";
    readonly alert: "alert";
    readonly alertdialog: "alertdialog";
    readonly tab: "tab";
    readonly tablist: "tablist";
    readonly tabpanel: "tabpanel";
    readonly navigation: "navigation";
    readonly complementary: "complementary";
    readonly main: "main";
    readonly search: "search";
    readonly form: "form";
    readonly region: "region";
    readonly combobox: "combobox";
    readonly listbox: "listbox";
    readonly option: "option";
    readonly group: "group";
    readonly radiogroup: "radiogroup";
    readonly checkbox: "checkbox";
    readonly radio: "radio";
    readonly switch: "switch";
    readonly slider: "slider";
    readonly spinbutton: "spinbutton";
    readonly progressbar: "progressbar";
    readonly status: "status";
    readonly log: "log";
    readonly marquee: "marquee";
    readonly timer: "timer";
};
/**
 * Generate unique IDs for ARIA relationships
 */
export declare function generateAriaId(prefix?: string): string;
/**
 * Comprehensive ARIA attributes interface
 */
export interface AriaProps {
    id?: string;
    role?: string;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
    'aria-expanded'?: boolean;
    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
    'aria-pressed'?: boolean;
    'aria-checked'?: boolean | 'mixed';
    'aria-selected'?: boolean;
    'aria-disabled'?: boolean;
    'aria-hidden'?: boolean;
    'aria-live'?: 'polite' | 'assertive' | 'off';
    'aria-atomic'?: boolean;
    'aria-busy'?: boolean;
    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
    'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling';
    'aria-required'?: boolean;
    'aria-controls'?: string;
    'aria-owns'?: string;
    'aria-activedescendant'?: string;
    'aria-modal'?: boolean;
    'aria-multiline'?: boolean;
    'aria-multiselectable'?: boolean;
    'aria-readonly'?: boolean;
    'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
    'aria-orientation'?: 'horizontal' | 'vertical';
    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
    'aria-valuemin'?: number;
    'aria-valuemax'?: number;
    'aria-valuenow'?: number;
    'aria-valuetext'?: string;
    'aria-posinset'?: number;
    'aria-setsize'?: number;
    'aria-level'?: number;
    'aria-rowcount'?: number;
    'aria-colcount'?: number;
    'aria-rowindex'?: number;
    'aria-colindex'?: number;
    'aria-colspan'?: number;
    'aria-rowspan'?: number;
    'aria-errormessage'?: string;
}
export declare function buildAriaProps(options: {
    role?: string;
    label?: string;
    labelledBy?: string;
    describedBy?: string;
    expanded?: boolean;
    disabled?: boolean;
    pressed?: boolean;
    checked?: boolean;
    invalid?: boolean;
    required?: boolean;
}): AriaProps;
/**
 * Check if an element is visible to screen readers
 */
export declare function isAriaVisible(element: HTMLElement): boolean;
/**
 * Manage live regions for dynamic content
 */
export declare class LiveRegion {
    private element;
    private queue;
    private isProcessing;
    constructor(priority?: 'polite' | 'assertive');
    announce(message: string): void;
    private processQueue;
    destroy(): void;
}
/**
 * Keyboard navigation helpers
 */
export declare const KEYS: {
    readonly ENTER: "Enter";
    readonly SPACE: " ";
    readonly ESCAPE: "Escape";
    readonly TAB: "Tab";
    readonly ARROW_UP: "ArrowUp";
    readonly ARROW_DOWN: "ArrowDown";
    readonly ARROW_LEFT: "ArrowLeft";
    readonly ARROW_RIGHT: "ArrowRight";
    readonly HOME: "Home";
    readonly END: "End";
    readonly PAGE_UP: "PageUp";
    readonly PAGE_DOWN: "PageDown";
};
/**
 * Check if keyboard event is a navigation key
 */
export declare function isNavigationKey(key: string): boolean;
/**
 * Check if keyboard event is an activation key
 */
export declare function isActivationKey(key: string): boolean;
/**
 * Ensure minimum touch target size (WCAG 2.5.5)
 */
export declare function ensureMinimumTouchTarget(element: HTMLElement, minSize?: number): void;
/**
 * Make element screen reader only
 */
export declare function srOnly(element: HTMLElement): void;
/**
 * Check if user prefers reduced motion
 */
export declare function prefersReducedMotion(): boolean;
/**
 * Check if user prefers high contrast
 */
export declare function prefersHighContrast(): boolean;
/**
 * Create skip link for keyboard navigation
 */
export declare function createSkipLink(targetId: string, text?: string): HTMLAnchorElement;
/**
 * Debounce function for reducing announcement frequency
 */
export declare function debounceAnnouncement(func: Function, delay?: number): (...args: any[]) => void;
/**
 * Format number for screen reader announcement
 */
export declare function formatNumberForAnnouncement(num: number): string;
/**
 * Build descriptive text for complex UI elements
 */
export declare function buildDescription(parts: (string | undefined)[]): string;
/**
 * React hook for generating consistent accessibility IDs
 */
export declare const useA11yId: (prefix?: string) => string;
/**
 * Form field accessibility helpers
 */
export interface FormFieldA11yProps extends AriaProps {
    id?: string;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
    'aria-required'?: boolean;
    'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling';
    'aria-errormessage'?: string;
}
export declare function createFormFieldA11y(options: {
    id?: string;
    label?: string;
    description?: string;
    error?: string;
    required?: boolean;
    invalid?: boolean;
    disabled?: boolean;
    labelId?: string;
    descriptionId?: string;
    errorId?: string;
}): FormFieldA11yProps;
/**
 * Button accessibility helpers
 */
export interface ButtonA11yProps extends AriaProps {
    id?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-pressed'?: boolean;
    'aria-expanded'?: boolean;
    'aria-controls'?: string;
    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
}
export declare function createButtonA11y(options: {
    id?: string;
    label?: string;
    description?: string;
    pressed?: boolean;
    expanded?: boolean;
    controls?: string;
    haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
    disabled?: boolean;
    descriptionId?: string;
}): ButtonA11yProps;
/**
 * Navigation accessibility helpers
 */
export interface NavigationA11yProps extends AriaProps {
    id?: string;
    'aria-label'?: string;
    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
    'aria-expanded'?: boolean;
    'aria-controls'?: string;
    'aria-owns'?: string;
    'aria-level'?: number;
    'aria-posinset'?: number;
    'aria-setsize'?: number;
}
export declare function createNavigationA11y(options: {
    id?: string;
    label?: string;
    current?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
    expanded?: boolean;
    controls?: string;
    owns?: string;
    level?: number;
    posinset?: number;
    setsize?: number;
}): NavigationA11yProps;
/**
 * Modal accessibility helpers
 */
export interface ModalA11yProps extends AriaProps {
    id?: string;
    role: 'dialog';
    'aria-modal'?: boolean;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
}
export declare function createModalA11y(options: {
    id?: string;
    titleId?: string;
    descriptionId?: string;
    modal?: boolean;
}): ModalA11yProps;
/**
 * Combobox/Select accessibility helpers
 */
export declare function createComboboxA11y(options: {
    id?: string;
    label?: string;
    expanded?: boolean;
    controls?: string;
    activedescendant?: string;
    hasPopup?: 'listbox' | 'menu' | 'tree' | 'grid' | 'dialog';
    autocomplete?: 'none' | 'inline' | 'list' | 'both';
    required?: boolean;
    invalid?: boolean;
    disabled?: boolean;
    labelId?: string;
    descriptionId?: string;
}): AriaProps;
/**
 * Listbox option accessibility helpers
 */
export declare function createListboxOptionA11y(options: {
    id?: string;
    selected?: boolean;
    disabled?: boolean;
    posinset?: number;
    setsize?: number;
}): AriaProps;
/**
 * Pagination accessibility helpers
 */
export declare function createPaginationA11y(options: {
    id?: string;
    label?: string;
    current?: boolean;
    disabled?: boolean;
    page?: number;
}): AriaProps;
/**
 * Focus management utilities
 */
export declare const focusUtils: {
    /**
     * Set focus to element by ID with optional delay
     */
    focusById: (id: string, delay?: number) => void;
    /**
     * Focus first focusable element within container
     */
    focusFirst: (container: HTMLElement) => void;
    /**
     * Focus last focusable element within container
     */
    focusLast: (container: HTMLElement) => void;
    /**
     * Get all focusable elements within container
     */
    getFocusableElements: (container: HTMLElement) => HTMLElement[];
};
/**
 * Keyboard event handlers for common accessibility patterns
 */
export declare const keyboardHandlers: {
    /**
     * Handle escape key
     */
    onEscape: (callback: () => void) => (event: KeyboardEvent | React.KeyboardEvent) => void;
    /**
     * Handle enter or space key for button-like elements
     */
    onActivate: (callback: () => void) => (event: KeyboardEvent | React.KeyboardEvent) => void;
    /**
     * Handle arrow navigation
     */
    onArrowNavigation: (options: {
        onArrowUp?: () => void;
        onArrowDown?: () => void;
        onArrowLeft?: () => void;
        onArrowRight?: () => void;
        onHome?: () => void;
        onEnd?: () => void;
    }) => (event: KeyboardEvent | React.KeyboardEvent) => void;
};
/**
 * Announce messages to screen readers
 */
export declare const announceToScreenReader: (message: string, priority?: "polite" | "assertive") => void;
/**
 * Generate loading state accessibility attributes
 */
export declare const createLoadingA11y: (loading: boolean, loadingText?: string) => AriaProps;
/**
 * WCAG 2.1 AA compliance standards for consciousness features
 */
export declare const CONSCIOUSNESS_A11Y_STANDARDS: {
    readonly EYE_TRACKING: {
        readonly KEYBOARD_ALTERNATIVE: true;
        readonly FOCUS_INDICATORS: true;
        readonly ESCAPE_MECHANISM: true;
        readonly TIMEOUT_WARNINGS: true;
    };
    readonly BIOMETRIC_ADAPTATION: {
        readonly MANUAL_OVERRIDE: true;
        readonly STATUS_ANNOUNCEMENT: true;
        readonly PRIVACY_CONTROLS: true;
        readonly OPT_OUT: true;
    };
    readonly SPATIAL_AUDIO: {
        readonly VISUAL_ALTERNATIVES: true;
        readonly VOLUME_CONTROLS: true;
        readonly DISABLE_OPTION: true;
        readonly SUBTITLE_EQUIVALENT: true;
    };
    readonly PREDICTIVE_FEATURES: {
        readonly TRANSPARENCY: true;
        readonly USER_CONTROL: true;
        readonly EXPLANATION_AVAILABLE: true;
        readonly CONFIDENCE_LEVELS: true;
    };
};
/**
 * Consciousness accessibility context
 */
export interface ConsciousnessA11yContext {
    prefersReducedMotion: boolean;
    prefersHighContrast: boolean;
    prefersReducedData: boolean;
    screenReaderActive: boolean;
    keyboardNavigation: boolean;
    consciousnessFeatures: {
        eyeTracking: boolean;
        biometricAdaptation: boolean;
        spatialAudio: boolean;
        predictiveFeatures: boolean;
    };
}
/**
 * Hook for consciousness accessibility context
 */
export declare const useConsciousnessA11y: () => ConsciousnessA11yContext;
/**
 * Consciousness accessibility validator
 */
export declare class ConsciousnessA11yValidator {
    private violations;
    validateEyeTracking(element: Element, features: any): void;
    validateBiometricAdaptation(element: Element, features: any): void;
    validateSpatialAudio(element: Element, features: any): void;
    validate(element: Element, consciousnessFeatures: any): {
        isValid: boolean;
        violations: {
            rule: string;
            severity: "error" | "warning";
            element?: Element;
            description: string;
            remediation: string;
        }[];
    };
}
/**
 * Hook for consciousness accessibility validation
 */
export declare const useConsciousnessA11yValidation: (elementRef: React.RefObject<Element>, consciousnessFeatures: any, options?: {
    autoValidate?: boolean;
    onViolation?: (violations: any[]) => void;
}) => {
    validate: () => {
        isValid: boolean;
        violations: {
            rule: string;
            severity: "error" | "warning";
            element?: Element;
            description: string;
            remediation: string;
        }[];
    } | null;
    validationResult: any;
    isValid: any;
    violations: any;
};
/**
 * Accessibility announcement utility for consciousness features
 */
export declare const useConsciousnessAnnouncements: () => {
    announce: (message: string, priority?: "polite" | "assertive") => void;
    announceConsciousnessChange: (feature: string, status: string) => void;
    announcePrivacyChange: (change: string) => void;
};
/**
 * Create accessibility attributes for consciousness features
 */
export declare const createConsciousnessA11y: (features: any) => AriaProps;
export declare const consciousnessA11yValidator: ConsciousnessA11yValidator;
//# sourceMappingURL=a11y.d.ts.map