claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
90 lines • 4.24 kB
TypeScript
/**
* ADHD-Specific Focus Management Utilities
*
* Provides specialized focus management, attention support, and interaction tracking
* optimized for ADHD and neurodivergent users in therapeutic components.
*/
export interface FocusSession {
startTime: number;
element: HTMLElement;
componentType: string;
interactionType: 'keyboard' | 'mouse' | 'touch';
adhdPatterns: {
rapidSwitching: boolean;
hesitation: boolean;
repeatInteractions: number;
};
}
export interface AttentionMetrics {
focusTime: number;
switchCount: number;
hesitationTime: number;
repeatCount: number;
lastActiveTime: number;
}
export interface ADHDFocusConfig {
enableFocusTracking: boolean;
enableAnnouncementDebouncing: boolean;
enableHyperfocusWarning: boolean;
enableInteractionPattern: boolean;
debounceDelay: number;
hyperfocusThreshold: number;
hesitationThreshold: number;
}
/**
* Initialize ADHD focus management system
*/
export declare function initADHDFocusManagement(userConfig?: Partial<ADHDFocusConfig>): void;
/**
* Enhanced focus handler for ADHD users
*/
export declare function handleADHDFocus(element: HTMLElement, componentType: string, interactionType?: 'keyboard' | 'mouse' | 'touch'): FocusSession;
/**
* Handle focus loss with ADHD considerations
*/
export declare function handleADHDBlur(componentType?: string): AttentionMetrics | null;
/**
* Smart announcement system with ADHD-friendly debouncing
*/
export declare function announceForADHD(componentId: string, message: string, priority?: 'low' | 'medium' | 'high', force?: boolean): boolean;
/**
* Keyboard navigation with ADHD-specific enhancements
*/
export declare function handleADHDKeyNavigation(event: KeyboardEvent, handlers: {
onEscape?: () => void;
onHelp?: () => void;
onFocusNext?: () => void;
onFocusPrevious?: () => void;
onActivate?: () => void;
}): boolean;
/**
* Create accessible focus indicators optimized for ADHD
*/
export declare function createADHDFocusRing(element: HTMLElement, options?: {
color?: string;
thickness?: number;
offset?: number;
animated?: boolean;
}): void;
/**
* Remove ADHD focus indicators
*/
export declare function removeADHDFocusRing(element: HTMLElement): void;
/**
* Check if user might be experiencing hyperfocus
*/
export declare function isInHyperfocus(componentType?: string): boolean;
/**
* Get attention metrics for component
*/
export declare function getAttentionMetrics(componentType: string): AttentionMetrics | null;
/**
* Get ADHD-specific interaction recommendations
*/
export declare function getADHDRecommendations(componentType: string): string[];
/**
* CSS classes for ADHD focus management
* These should be added to global styles
*/
export declare const adhdFocusCSS = "\n .ck-adhd-focus {\n outline: var(--adhd-focus-thickness, 3px) solid var(--adhd-focus-color, #0066cc) !important;\n outline-offset: var(--adhd-focus-offset, 3px) !important;\n box-shadow: 0 0 0 1px white, 0 0 0 calc(var(--adhd-focus-thickness, 3px) + 1px) var(--adhd-focus-color, #0066cc) !important;\n }\n \n .ck-adhd-focus--animated {\n animation: ck-adhd-focus-pulse 2s ease-in-out infinite;\n }\n \n @keyframes ck-adhd-focus-pulse {\n 0%, 100% { \n box-shadow: 0 0 0 1px white, 0 0 0 calc(var(--adhd-focus-thickness, 3px) + 1px) var(--adhd-focus-color, #0066cc);\n }\n 50% { \n box-shadow: 0 0 0 1px white, 0 0 0 calc(var(--adhd-focus-thickness, 3px) + 3px) var(--adhd-focus-color, #0066cc);\n }\n }\n \n .sr-only,\n .ck-adhd-announcement {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n \n @media (prefers-reduced-motion: reduce) {\n .ck-adhd-focus--animated {\n animation: none;\n }\n }\n \n @media (prefers-contrast: high) {\n .ck-adhd-focus {\n outline-color: currentColor !important;\n box-shadow: 0 0 0 1px white, 0 0 0 calc(var(--adhd-focus-thickness, 3px) + 1px) currentColor !important;\n }\n }\n";
//# sourceMappingURL=adhd-focus-management.d.ts.map