/**
* 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