/** * Accessibility utility functions for WCAG 2.1 AA compliance * * This module provides helper functions to enhance accessibility across the application, * including ARIA attributes, keyboard navigation, and screen reader support. * * @module utils/accessibility */ import { SecurityLevel } from '../types/cia'; /** * ARIA roles for common components */ export declare const ARIA_ROLES: { readonly NAVIGATION: 'navigation'; readonly MAIN: 'main'; readonly COMPLEMENTARY: 'complementary'; readonly REGION: 'region'; readonly ARTICLE: 'article'; readonly BANNER: 'banner'; readonly CONTENTINFO: 'contentinfo'; readonly SEARCH: 'search'; readonly TABLIST: 'tablist'; readonly TAB: 'tab'; readonly TABPANEL: 'tabpanel'; readonly BUTTON: 'button'; readonly LINK: 'link'; readonly LIST: 'list'; readonly LISTITEM: 'listitem'; readonly ALERT: 'alert'; readonly STATUS: 'status'; readonly PROGRESSBAR: 'progressbar'; }; /** * ARIA live region politeness levels */ export declare const ARIA_LIVE: { readonly OFF: 'off'; readonly POLITE: 'polite'; readonly ASSERTIVE: 'assertive'; }; /** * Create an accessible label for a security level * * Generates WCAG-compliant ARIA labels for security level selectors and displays, * ensuring screen readers properly announce the component and its current level. * * @param level - The security level (None, Low, Moderate, High, Very High) * @param component - The CIA component (availability, integrity, confidentiality) * @returns An accessible label string formatted for screen readers * * @example * ```typescript * // Availability level label * getSecurityLevelAriaLabel('High', 'availability') * // 'Availability security level: High' * * // Integrity level label * getSecurityLevelAriaLabel('Moderate', 'integrity') * // 'Integrity security level: Moderate' * * // Confidentiality level label * getSecurityLevelAriaLabel('Very High', 'confidentiality') * // 'Confidentiality security level: Very High' * * // Usage in component * * ``` */ export declare function getSecurityLevelAriaLabel(level: SecurityLevel, component: 'availability' | 'integrity' | 'confidentiality'): string; /** * Create an accessible description for a widget * * Generates descriptive ARIA descriptions for widgets to provide context * to screen reader users about the widget's purpose and content. * * @param widgetType - Type of widget (e.g., 'Security Metrics', 'Risk Analysis') * @param description - Optional additional description * @returns An accessible description string * * @example * ```typescript * // Without additional description * getWidgetAriaDescription('Security Metrics') * // 'Security Metrics widget' * * // With additional description * getWidgetAriaDescription('Risk Analysis', 'Shows current risk levels') * // 'Risk Analysis widget. Shows current risk levels' * * getWidgetAriaDescription('Cost Estimation', 'CAPEX and OPEX breakdown') * // 'Cost Estimation widget. CAPEX and OPEX breakdown' * * // Usage in component *
* * {getWidgetAriaDescription(widgetType, description)} * * {widgetContent} *
* ``` */ export declare function getWidgetAriaDescription(widgetType: string, description?: string): string; /** * Generate ARIA props for a tab component * * Creates a complete set of ARIA properties for tab controls following * WAI-ARIA Authoring Practices for tab patterns. Ensures proper keyboard * navigation and screen reader announcements. * * @param id - Unique tab identifier * @param isSelected - Whether the tab is currently selected/active * @param controls - ID of the tabpanel this tab controls * @returns ARIA props object with role, selection state, controls reference, and keyboard focus * * @example * ```typescript * // Selected tab * const selectedTabProps = getTabAriaProps('tab-security', true, 'panel-security'); * // { * // role: 'tab', * // 'aria-selected': true, * // 'aria-controls': 'panel-security', * // id: 'tab-security', * // tabIndex: 0 * // } * * // Unselected tab * const unselectedTabProps = getTabAriaProps('tab-compliance', false, 'panel-compliance'); * // { * // role: 'tab', * // 'aria-selected': false, * // 'aria-controls': 'panel-compliance', * // id: 'tab-compliance', * // tabIndex: -1 * // } * * // Usage in component *
* {tabs.map(tab => ( * * ))} *
* ``` */ export declare function getTabAriaProps(id: string, isSelected: boolean, controls: string): { role: string; 'aria-selected': boolean; 'aria-controls': string; id: string; tabIndex: number; }; /** * Generate ARIA props for a tab panel * * @param id - Panel identifier * @param labelledBy - ID of the tab that labels this panel * @param isHidden - Whether the panel is currently hidden * @returns ARIA props object */ export declare function getTabPanelAriaProps(id: string, labelledBy: string, isHidden: boolean): { role: string; id: string; 'aria-labelledby': string; hidden?: boolean; tabIndex: number; }; /** * Generate ARIA props for a button * * @param label - Button label * @param isPressed - Whether button is in pressed state (for toggle buttons) * @param isExpanded - Whether button controls expanded content * @param controls - ID of element controlled by this button * @returns ARIA props object */ export declare function getButtonAriaProps(label: string, options?: { isPressed?: boolean; isExpanded?: boolean; controls?: string; describedBy?: string; }): { 'aria-label': string; 'aria-pressed'?: boolean; 'aria-expanded'?: boolean; 'aria-controls'?: string; 'aria-describedby'?: string; }; /** * Generate ARIA props for a select/dropdown component * * @param label - Select label * @param value - Current value * @param required - Whether selection is required * @returns ARIA props object */ export declare function getSelectAriaProps(label: string, value: string, required?: boolean): { 'aria-label': string; 'aria-required'?: boolean; 'aria-describedby'?: string; }; /** * Generate ARIA props for a progress bar or meter * * @param label - Progress bar label * @param valuenow - Current value * @param valuemin - Minimum value * @param valuemax - Maximum value * @param valuetext - Textual representation of value * @returns ARIA props object */ export declare function getProgressAriaProps(label: string, valuenow: number, valuemin?: number, valuemax?: number, valuetext?: string): { role: string; 'aria-label': string; 'aria-valuenow': number; 'aria-valuemin': number; 'aria-valuemax': number; 'aria-valuetext'?: string; }; /** * Generate ARIA props for a status/live region * * @param message - Status message * @param politeness - ARIA live politeness level * @returns ARIA props object */ export declare function getStatusAriaProps(message: string, politeness?: keyof typeof ARIA_LIVE): { role: string; 'aria-live': string; 'aria-atomic': boolean; }; /** * Generate ARIA props for a chart/visualization * * @param label - Chart label * @param description - Detailed chart description * @param descriptionId - ID of element containing description * @returns ARIA props object */ export declare function getChartAriaProps(label: string, description: string, descriptionId?: string): { 'aria-label': string; 'aria-describedby'?: string; role: string; }; /** * Check if an element should be keyboard focusable * * @param isInteractive - Whether element is interactive * @param isDisabled - Whether element is disabled * @returns tabIndex value (-1, 0, or undefined) */ export declare function getTabIndex(isInteractive: boolean, isDisabled?: boolean): number | undefined; /** * Handle keyboard navigation for arrow keys in a list or grid * * @param event - Keyboard event * @param currentIndex - Current focused item index * @param totalItems - Total number of items * @param onIndexChange - Callback when index changes * @param orientation - List orientation (horizontal or vertical) */ export declare function handleArrowKeyNavigation(event: React.KeyboardEvent, currentIndex: number, totalItems: number, onIndexChange: (newIndex: number) => void, orientation?: 'horizontal' | 'vertical'): void; /** * Generate accessible name for a metric or data point * * @param label - Metric label * @param value - Metric value * @param unit - Optional unit (%, $, etc.) * @returns Accessible description string */ export declare function getMetricAccessibleName(label: string, value: string | number, unit?: string): string; /** * Announce a message to screen readers using ARIA live region * Uses a singleton live region to prevent duplicate announcements * * @param message - Message to announce * @param politeness - ARIA live politeness level */ export declare function announceToScreenReader(message: string, politeness?: 'polite' | 'assertive'): void; /** * Check if element has sufficient color contrast * Note: This is a simplified check. Use dedicated tools for comprehensive testing. * * @param foreground - Foreground color (hex) * @param background - Background color (hex) * @param isLargeText - Whether text is large (18pt+ or 14pt+ bold) * @returns Whether contrast meets WCAG AA standards * @throws Error if colors are invalid hex values */ export declare function meetsContrastRequirement(foreground: string, background: string, isLargeText?: boolean): boolean; //# sourceMappingURL=accessibility.d.ts.map