/** * WCAG 2.2 Accessibility Utilities for MaskDial * * These utilities help ensure phone input components are accessible * to users with disabilities, including screen reader users and * keyboard-only users. */ /** * ARIA attribute configuration for phone input */ interface PhoneInputAriaConfig { /** Unique ID for the input */ inputId: string; /** Label text (visible or screen-reader only) */ label?: string; /** Error message when validation fails */ errorMessage?: string; /** Help text describing the expected format */ helpText?: string; /** Whether the field is required */ required?: boolean; /** Whether the current value is invalid */ invalid?: boolean; /** Additional description IDs */ describedBy?: string[]; } /** * Generate ARIA attributes for a phone input element * * @example * ```tsx * const ariaAttrs = getPhoneInputAria({ * inputId: 'phone-input', * label: 'Phone number', * required: true, * invalid: !isValid, * errorMessage: 'Please enter a valid phone number', * helpText: 'Format: (555) 555-5555' * }) * * * Phone number * Please enter a valid phone number * Format: (555) 555-5555 * ``` */ declare function getPhoneInputAria(config: PhoneInputAriaConfig): { input: { id: string; type: "tel"; inputMode: "tel"; autoComplete: "tel"; 'aria-labelledby': string | undefined; 'aria-required': true | undefined; 'aria-invalid': true | undefined; 'aria-describedby': string | undefined; }; label: { id: string; }; error: { id: string; role: "alert"; 'aria-live': "polite"; }; help: { id: string; }; }; /** * ARIA attribute configuration for country select */ interface CountrySelectAriaConfig { /** Unique ID for the select */ selectId: string; /** Label text */ label?: string; /** Whether the dropdown is expanded */ expanded?: boolean; /** Currently focused option index */ focusedIndex?: number; /** Total number of options */ optionCount?: number; /** Whether the field is required */ required?: boolean; } /** * Generate ARIA attributes for a country select element * * @example * ```tsx * const ariaAttrs = getCountrySelectAria({ * selectId: 'country-select', * label: 'Select country', * expanded: isOpen, * focusedIndex: 5, * optionCount: 200 * }) * * * * ``` */ declare function getCountrySelectAria(config: CountrySelectAriaConfig): { button: { id: string; role: "combobox"; 'aria-haspopup': "listbox"; 'aria-expanded': boolean; 'aria-controls': string; 'aria-labelledby': string | undefined; 'aria-required': true | undefined; 'aria-activedescendant': string | undefined; }; listbox: { id: string; role: "listbox"; 'aria-label': string; }; option: (index: number, selected: boolean) => { id: string; role: "option"; 'aria-selected': boolean; }; label: { id: string; }; }; /** * Announce a message to screen readers * * @example * ```ts * // Announce validation result * announce('Phone number is valid') * * // Announce with urgency * announce('Error: Phone number is invalid', 'assertive') * ``` */ declare function announce(message: string, priority?: 'polite' | 'assertive'): void; /** * Phone validation status messages for screen readers */ declare const validationMessages: { readonly valid: "Phone number is valid"; readonly invalid: "Phone number is invalid"; readonly tooShort: "Phone number is too short"; readonly tooLong: "Phone number is too long"; readonly possible: "Phone number format looks correct"; readonly empty: "Phone number is empty"; readonly countryChanged: (country: string) => string; readonly formatChanged: (format: string) => string; }; /** * Announce phone validation status */ declare function announceValidation(isValid: boolean, isPossible: boolean, _formatted?: string): void; /** * Announce country selection change */ declare function announceCountryChange(countryName: string): void; /** * Keyboard navigation keys for reference */ declare const keyboardKeys: { 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 a keyboard event is a navigation key */ declare function isNavigationKey(key: string): boolean; /** * Check if a keyboard event is an action key */ declare function isActionKey(key: string): boolean; /** * Focus trap utility for modal/dropdown elements * * @example * ```ts * const trap = createFocusTrap(dropdownElement) * trap.activate() * // ... user interacts with dropdown * trap.deactivate() * ``` */ declare function createFocusTrap(container: HTMLElement): { activate(): void; deactivate(): void; }; /** * CSS for visually hiding elements while keeping them accessible */ declare const srOnlyStyles = "\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"; /** * Inject screen-reader-only CSS class into document */ declare function injectSrOnlyStyles(): void; export { type CountrySelectAriaConfig, type PhoneInputAriaConfig, announce, announceCountryChange, announceValidation, createFocusTrap, getCountrySelectAria, getPhoneInputAria, injectSrOnlyStyles, isActionKey, isNavigationKey, keyboardKeys, srOnlyStyles, validationMessages };