@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/themes/screen-reader.esm.js

@@ -1,368 +1,309 @@
 // Screen reader optimization utilities
 export class ScreenReaderOptimizer {
-  // Live region types for dynamic content
-  static readonly LIVE_REGIONS = {
+    constructor() {
+        this.liveRegions = new Map();
+        this.announcementQueue = [];
+        this.isProcessingQueue = false;
+        this.initializeLiveRegions();
+    }
+    // Initialize live regions for different priorities
+    initializeLiveRegions() {
+        const priorities = Object.values(ScreenReaderOptimizer.PRIORITIES);
+        priorities.forEach(priority => {
+            const region = document.createElement('div');
+            region.setAttribute('aria-live', this.getLiveRegionType(priority));
+            region.setAttribute('aria-atomic', 'true');
+            region.setAttribute('aria-relevant', 'additions text');
+            region.style.position = 'absolute';
+            region.style.left = '-10000px';
+            region.style.width = '1px';
+            region.style.height = '1px';
+            region.style.overflow = 'hidden';
+            region.setAttribute('data-screen-reader-priority', priority);
+            document.body.appendChild(region);
+            this.liveRegions.set(priority, region);
+        });
+    }
+    // Get appropriate live region type for priority
+    getLiveRegionType(priority) {
+        switch (priority) {
+            case ScreenReaderOptimizer.PRIORITIES.URGENT:
+                return ScreenReaderOptimizer.LIVE_REGIONS.ASSERTIVE;
+            case ScreenReaderOptimizer.PRIORITIES.HIGH:
+                return ScreenReaderOptimizer.LIVE_REGIONS.ASSERTIVE;
+            case ScreenReaderOptimizer.PRIORITIES.NORMAL:
+                return ScreenReaderOptimizer.LIVE_REGIONS.POLITE;
+            case ScreenReaderOptimizer.PRIORITIES.LOW:
+                return ScreenReaderOptimizer.LIVE_REGIONS.POLITE;
+            default:
+                return ScreenReaderOptimizer.LIVE_REGIONS.POLITE;
+        }
+    }
+    // Announce message to screen readers
+    announce(message, priority = ScreenReaderOptimizer.PRIORITIES.NORMAL) {
+        if (!message || typeof message !== 'string')
+            return;
+        const timestamp = Date.now();
+        this.announcementQueue.push({ message, priority, timestamp });
+        if (!this.isProcessingQueue) {
+            this.processAnnouncementQueue();
+        }
+    }
+    // Process announcement queue
+    async processAnnouncementQueue() {
+        if (this.isProcessingQueue || this.announcementQueue.length === 0)
+            return;
+        this.isProcessingQueue = true;
+        while (this.announcementQueue.length > 0) {
+            const announcement = this.announcementQueue.shift();
+            if (!announcement)
+                continue;
+            await this.makeAnnouncement(announcement.message, announcement.priority);
+            // Small delay between announcements to prevent overlap
+            await this.delay(100);
+        }
+        this.isProcessingQueue = false;
+    }
+    // Make individual announcement
+    async makeAnnouncement(message, priority) {
+        const region = this.liveRegions.get(priority);
+        if (!region)
+            return;
+        // Clear previous content
+        region.textContent = '';
+        // Add new message
+        region.textContent = message;
+        // Force screen reader to announce
+        region.setAttribute('aria-hidden', 'true');
+        await this.delay(10);
+        region.setAttribute('aria-hidden', 'false');
+        // Clear content after announcement
+        setTimeout(() => {
+            region.textContent = '';
+        }, 1000);
+    }
+    // Utility delay function
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+    // Announce page title change
+    announcePageTitle(title) {
+        this.announce(`Page title changed to: ${title}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+    }
+    // Announce navigation change
+    announceNavigation(destination) {
+        this.announce(`Navigated to: ${destination}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce form submission
+    announceFormSubmission(formName, success) {
+        const message = success
+            ? `Form ${formName} submitted successfully`
+            : `Form ${formName} submission failed`;
+        this.announce(message, success ? ScreenReaderOptimizer.PRIORITIES.NORMAL : ScreenReaderOptimizer.PRIORITIES.HIGH);
+    }
+    // Announce loading state
+    announceLoading(component, isLoading) {
+        const message = isLoading ? `${component} is loading` : `${component} finished loading`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Announce error
+    announceError(error) {
+        this.announce(`Error: ${error}`, ScreenReaderOptimizer.PRIORITIES.URGENT);
+    }
+    // Announce success
+    announceSuccess(message) {
+        this.announce(`Success: ${message}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce warning
+    announceWarning(message) {
+        this.announce(`Warning: ${message}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+    }
+    // Announce information
+    announceInfo(message) {
+        this.announce(`Information: ${message}`, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Announce count changes
+    announceCountChange(itemType, count, total) {
+        let message = `${itemType} count: ${count}`;
+        if (total !== undefined) {
+            message += ` of ${total}`;
+        }
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Announce selection changes
+    announceSelectionChange(itemType, selected, total) {
+        const message = `${selected} of ${total} ${itemType} selected`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce progress updates
+    announceProgress(current, total, percentage) {
+        const message = `Progress: ${current} of ${total} (${percentage}%)`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Announce search results
+    announceSearchResults(query, count) {
+        const message = `Found ${count} results for "${query}"`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce filter changes
+    announceFilterChange(filterName, value) {
+        const message = `Filter ${filterName} changed to: ${value}`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce sort changes
+    announceSortChange(column, direction) {
+        const message = `Sorted by ${column} in ${direction} order`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce modal open/close
+    announceModalChange(modalName, isOpen) {
+        const message = isOpen ? `${modalName} modal opened` : `${modalName} modal closed`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.HIGH);
+    }
+    // Announce tab changes
+    announceTabChange(tabName) {
+        this.announce(`Switched to ${tabName} tab`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce accordion changes
+    announceAccordionChange(sectionName, isExpanded) {
+        const message = isExpanded ? `${sectionName} section expanded` : `${sectionName} section collapsed`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce tree changes
+    announceTreeChange(nodeName, action) {
+        const message = `${nodeName} node ${action}`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce list changes
+    announceListChange(listName, action, itemName) {
+        const message = `${itemName} ${action} from ${listName} list`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce table changes
+    announceTableChange(tableName, action) {
+        const message = `${tableName} table: ${action}`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce form field changes
+    announceFormFieldChange(fieldName, value, isValid) {
+        let message = `${fieldName} field changed to: ${value}`;
+        if (!isValid) {
+            message += '. Field has validation errors';
+        }
+        this.announce(message, isValid ? ScreenReaderOptimizer.PRIORITIES.LOW : ScreenReaderOptimizer.PRIORITIES.HIGH);
+    }
+    // Announce validation errors
+    announceValidationErrors(fieldName, errors) {
+        const errorList = errors.join(', ');
+        const message = `${fieldName} validation errors: ${errorList}`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.HIGH);
+    }
+    // Announce focus changes
+    announceFocusChange(elementName, context) {
+        let message = `Focused on: ${elementName}`;
+        if (context) {
+            message += ` in ${context}`;
+        }
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Announce keyboard shortcuts
+    announceKeyboardShortcut(action, shortcut) {
+        const message = `${action}: ${shortcut}`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Announce time-sensitive information
+    announceTimeSensitive(message, urgency) {
+        const priority = urgency === 'high' ? ScreenReaderOptimizer.PRIORITIES.URGENT :
+            urgency === 'medium' ? ScreenReaderOptimizer.PRIORITIES.HIGH :
+                ScreenReaderOptimizer.PRIORITIES.NORMAL;
+        this.announce(message, priority);
+    }
+    // Announce status changes
+    announceStatusChange(component, oldStatus, newStatus) {
+        const message = `${component} status changed from ${oldStatus} to ${newStatus}`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce data updates
+    announceDataUpdate(dataType, action) {
+        const message = `${dataType} ${action}`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce connection status
+    announceConnectionStatus(isConnected) {
+        const message = isConnected ? 'Connection restored' : 'Connection lost';
+        this.announce(message, isConnected ? ScreenReaderOptimizer.PRIORITIES.NORMAL : ScreenReaderOptimizer.PRIORITIES.URGENT);
+    }
+    // Announce accessibility features
+    announceAccessibilityFeature(feature, enabled) {
+        const message = `${feature} accessibility feature ${enabled ? 'enabled' : 'disabled'}`;
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Announce theme changes
+    announceThemeChange(themeName) {
+        this.announce(`Theme changed to: ${themeName}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce language changes
+    announceLanguageChange(language) {
+        this.announce(`Language changed to: ${language}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+    }
+    // Announce font size changes
+    announceFontSizeChange(size) {
+        this.announce(`Font size changed to: ${size}`, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Announce contrast changes
+    announceContrastChange(isHighContrast) {
+        const message = isHighContrast ? 'High contrast mode enabled' : 'High contrast mode disabled';
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+    }
+    // Announce motion changes
+    announceMotionChange(isReducedMotion) {
+        const message = isReducedMotion ? 'Reduced motion enabled' : 'Reduced motion disabled';
+        this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+    }
+    // Get announcement queue status
+    getQueueStatus() {
+        return {
+            length: this.announcementQueue.length,
+            isProcessing: this.isProcessingQueue
+        };
+    }
+    // Clear announcement queue
+    clearQueue() {
+        this.announcementQueue = [];
+    }
+    // Destroy live regions
+    destroy() {
+        this.liveRegions.forEach(region => {
+            if (region.parentNode) {
+                region.parentNode.removeChild(region);
+            }
+        });
+        this.liveRegions.clear();
+        this.clearQueue();
+    }
+}
+// Live region types for dynamic content
+ScreenReaderOptimizer.LIVE_REGIONS = {
     POLITE: 'polite',
     ASSERTIVE: 'assertive',
     OFF: 'off'
-  } as const;
-
-  // Announcement priorities
-  static readonly PRIORITIES = {
+};
+// Announcement priorities
+ScreenReaderOptimizer.PRIORITIES = {
     LOW: 'low',
     NORMAL: 'normal',
     HIGH: 'high',
     URGENT: 'urgent'
-  } as const;
-
-  private liveRegions: Map<string, HTMLElement>;
-  private announcementQueue: Array<{ message: string; priority: string; timestamp: number }>;
-  private isProcessingQueue: boolean;
-
-  constructor() {
-    this.liveRegions = new Map();
-    this.announcementQueue = [];
-    this.isProcessingQueue = false;
-    this.initializeLiveRegions();
-  }
-
-  // Initialize live regions for different priorities
-  private initializeLiveRegions(): void {
-    const priorities = Object.values(ScreenReaderOptimizer.PRIORITIES);
-    
-    priorities.forEach(priority => {
-      const region = document.createElement('div');
-      region.setAttribute('aria-live', this.getLiveRegionType(priority));
-      region.setAttribute('aria-atomic', 'true');
-      region.setAttribute('aria-relevant', 'additions text');
-      region.style.position = 'absolute';
-      region.style.left = '-10000px';
-      region.style.width = '1px';
-      region.style.height = '1px';
-      region.style.overflow = 'hidden';
-      region.setAttribute('data-screen-reader-priority', priority);
-      
-      document.body.appendChild(region);
-      this.liveRegions.set(priority, region);
-    });
-  }
-
-  // Get appropriate live region type for priority
-  private getLiveRegionType(priority: string): string {
-    switch (priority) {
-      case ScreenReaderOptimizer.PRIORITIES.URGENT:
-        return ScreenReaderOptimizer.LIVE_REGIONS.ASSERTIVE;
-      case ScreenReaderOptimizer.PRIORITIES.HIGH:
-        return ScreenReaderOptimizer.LIVE_REGIONS.ASSERTIVE;
-      case ScreenReaderOptimizer.PRIORITIES.NORMAL:
-        return ScreenReaderOptimizer.LIVE_REGIONS.POLITE;
-      case ScreenReaderOptimizer.PRIORITIES.LOW:
-        return ScreenReaderOptimizer.LIVE_REGIONS.POLITE;
-      default:
-        return ScreenReaderOptimizer.LIVE_REGIONS.POLITE;
-    }
-  }
-
-  // Announce message to screen readers
-  announce(message: string, priority: string = ScreenReaderOptimizer.PRIORITIES.NORMAL): void {
-    if (!message || typeof message !== 'string') return;
-
-    const timestamp = Date.now();
-    this.announcementQueue.push({ message, priority, timestamp });
-    
-    if (!this.isProcessingQueue) {
-      this.processAnnouncementQueue();
-    }
-  }
-
-  // Process announcement queue
-  private async processAnnouncementQueue(): Promise<void> {
-    if (this.isProcessingQueue || this.announcementQueue.length === 0) return;
-
-    this.isProcessingQueue = true;
-
-    while (this.announcementQueue.length > 0) {
-      const announcement = this.announcementQueue.shift();
-      if (!announcement) continue;
-
-      await this.makeAnnouncement(announcement.message, announcement.priority);
-      
-      // Small delay between announcements to prevent overlap
-      await this.delay(100);
-    }
-
-    this.isProcessingQueue = false;
-  }
-
-  // Make individual announcement
-  private async makeAnnouncement(message: string, priority: string): Promise<void> {
-    const region = this.liveRegions.get(priority);
-    if (!region) return;
-
-    // Clear previous content
-    region.textContent = '';
-    
-    // Add new message
-    region.textContent = message;
-    
-    // Force screen reader to announce
-    region.setAttribute('aria-hidden', 'true');
-    await this.delay(10);
-    region.setAttribute('aria-hidden', 'false');
-    
-    // Clear content after announcement
-    setTimeout(() => {
-      region.textContent = '';
-    }, 1000);
-  }
-
-  // Utility delay function
-  private delay(ms: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-
-  // Announce page title change
-  announcePageTitle(title: string): void {
-    this.announce(`Page title changed to: ${title}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
-  }
-
-  // Announce navigation change
-  announceNavigation(destination: string): void {
-    this.announce(`Navigated to: ${destination}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce form submission
-  announceFormSubmission(formName: string, success: boolean): void {
-    const message = success 
-      ? `Form ${formName} submitted successfully` 
-      : `Form ${formName} submission failed`;
-    this.announce(message, success ? ScreenReaderOptimizer.PRIORITIES.NORMAL : ScreenReaderOptimizer.PRIORITIES.HIGH);
-  }
-
-  // Announce loading state
-  announceLoading(component: string, isLoading: boolean): void {
-    const message = isLoading ? `${component} is loading` : `${component} finished loading`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Announce error
-  announceError(error: string): void {
-    this.announce(`Error: ${error}`, ScreenReaderOptimizer.PRIORITIES.URGENT);
-  }
-
-  // Announce success
-  announceSuccess(message: string): void {
-    this.announce(`Success: ${message}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce warning
-  announceWarning(message: string): void {
-    this.announce(`Warning: ${message}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
-  }
-
-  // Announce information
-  announceInfo(message: string): void {
-    this.announce(`Information: ${message}`, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Announce count changes
-  announceCountChange(itemType: string, count: number, total?: number): void {
-    let message = `${itemType} count: ${count}`;
-    if (total !== undefined) {
-      message += ` of ${total}`;
-    }
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Announce selection changes
-  announceSelectionChange(itemType: string, selected: number, total: number): void {
-    const message = `${selected} of ${total} ${itemType} selected`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce progress updates
-  announceProgress(current: number, total: number, percentage: number): void {
-    const message = `Progress: ${current} of ${total} (${percentage}%)`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Announce search results
-  announceSearchResults(query: string, count: number): void {
-    const message = `Found ${count} results for "${query}"`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce filter changes
-  announceFilterChange(filterName: string, value: string): void {
-    const message = `Filter ${filterName} changed to: ${value}`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce sort changes
-  announceSortChange(column: string, direction: 'ascending' | 'descending'): void {
-    const message = `Sorted by ${column} in ${direction} order`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce modal open/close
-  announceModalChange(modalName: string, isOpen: boolean): void {
-    const message = isOpen ? `${modalName} modal opened` : `${modalName} modal closed`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.HIGH);
-  }
-
-  // Announce tab changes
-  announceTabChange(tabName: string): void {
-    this.announce(`Switched to ${tabName} tab`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce accordion changes
-  announceAccordionChange(sectionName: string, isExpanded: boolean): void {
-    const message = isExpanded ? `${sectionName} section expanded` : `${sectionName} section collapsed`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce tree changes
-  announceTreeChange(nodeName: string, action: 'expanded' | 'collapsed' | 'selected'): void {
-    const message = `${nodeName} node ${action}`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce list changes
-  announceListChange(listName: string, action: 'added' | 'removed' | 'updated', itemName: string): void {
-    const message = `${itemName} ${action} from ${listName} list`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce table changes
-  announceTableChange(tableName: string, action: 'row added' | 'row removed' | 'row updated' | 'sorted' | 'filtered'): void {
-    const message = `${tableName} table: ${action}`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce form field changes
-  announceFormFieldChange(fieldName: string, value: string, isValid: boolean): void {
-    let message = `${fieldName} field changed to: ${value}`;
-    if (!isValid) {
-      message += '. Field has validation errors';
-    }
-    this.announce(message, isValid ? ScreenReaderOptimizer.PRIORITIES.LOW : ScreenReaderOptimizer.PRIORITIES.HIGH);
-  }
-
-  // Announce validation errors
-  announceValidationErrors(fieldName: string, errors: string[]): void {
-    const errorList = errors.join(', ');
-    const message = `${fieldName} validation errors: ${errorList}`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.HIGH);
-  }
-
-  // Announce focus changes
-  announceFocusChange(elementName: string, context?: string): void {
-    let message = `Focused on: ${elementName}`;
-    if (context) {
-      message += ` in ${context}`;
-    }
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Announce keyboard shortcuts
-  announceKeyboardShortcut(action: string, shortcut: string): void {
-    const message = `${action}: ${shortcut}`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Announce time-sensitive information
-  announceTimeSensitive(message: string, urgency: 'low' | 'medium' | 'high'): void {
-    const priority = urgency === 'high' ? ScreenReaderOptimizer.PRIORITIES.URGENT :
-                    urgency === 'medium' ? ScreenReaderOptimizer.PRIORITIES.HIGH :
-                    ScreenReaderOptimizer.PRIORITIES.NORMAL;
-    this.announce(message, priority);
-  }
-
-  // Announce status changes
-  announceStatusChange(component: string, oldStatus: string, newStatus: string): void {
-    const message = `${component} status changed from ${oldStatus} to ${newStatus}`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce data updates
-  announceDataUpdate(dataType: string, action: 'created' | 'updated' | 'deleted'): void {
-    const message = `${dataType} ${action}`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce connection status
-  announceConnectionStatus(isConnected: boolean): void {
-    const message = isConnected ? 'Connection restored' : 'Connection lost';
-    this.announce(message, isConnected ? ScreenReaderOptimizer.PRIORITIES.NORMAL : ScreenReaderOptimizer.PRIORITIES.URGENT);
-  }
-
-  // Announce accessibility features
-  announceAccessibilityFeature(feature: string, enabled: boolean): void {
-    const message = `${feature} accessibility feature ${enabled ? 'enabled' : 'disabled'}`;
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Announce theme changes
-  announceThemeChange(themeName: string): void {
-    this.announce(`Theme changed to: ${themeName}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce language changes
-  announceLanguageChange(language: string): void {
-    this.announce(`Language changed to: ${language}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
-  }
-
-  // Announce font size changes
-  announceFontSizeChange(size: string): void {
-    this.announce(`Font size changed to: ${size}`, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Announce contrast changes
-  announceContrastChange(isHighContrast: boolean): void {
-    const message = isHighContrast ? 'High contrast mode enabled' : 'High contrast mode disabled';
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
-  }
-
-  // Announce motion changes
-  announceMotionChange(isReducedMotion: boolean): void {
-    const message = isReducedMotion ? 'Reduced motion enabled' : 'Reduced motion disabled';
-    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
-  }
-
-  // Get announcement queue status
-  getQueueStatus(): { length: number; isProcessing: boolean } {
-    return {
-      length: this.announcementQueue.length,
-      isProcessing: this.isProcessingQueue
-    };
-  }
-
-  // Clear announcement queue
-  clearQueue(): void {
-    this.announcementQueue = [];
-  }
-
-  // Destroy live regions
-  destroy(): void {
-    this.liveRegions.forEach(region => {
-      if (region.parentNode) {
-        region.parentNode.removeChild(region);
-      }
-    });
-    this.liveRegions.clear();
-    this.clearQueue();
-  }
-}
-
+};
 // Screen reader navigation utilities
 export class ScreenReaderNavigation {
-  // Create skip link for main content
-  static createSkipLink(targetId: string, text: string = 'Skip to main content'): HTMLAnchorElement {
-    const skipLink = document.createElement('a');
-    skipLink.href = `#${targetId}`;
-    skipLink.textContent = text;
-    skipLink.className = 'sr-only sr-only-focusable';
-    skipLink.style.cssText = `
+    // Create skip link for main content
+    static createSkipLink(targetId, text = 'Skip to main content') {
+        const skipLink = document.createElement('a');
+        skipLink.href = `#${targetId}`;
+        skipLink.textContent = text;
+        skipLink.className = 'sr-only sr-only-focusable';
+        skipLink.style.cssText = `
       position: absolute;
       top: -40px;
       left: 6px;
@@ -375,271 +316,229 @@ export class ScreenReaderNavigation {
       font-size: 14px;
       line-height: 1.2;
     `;
-    
-    skipLink.addEventListener('focus', () => {
-      skipLink.style.top = '6px';
-    });
-    
-    skipLink.addEventListener('blur', () => {
-      skipLink.style.top = '-40px';
-    });
-    
-    return skipLink;
-  }
-
-  // Create landmark navigation
-  static createLandmarkNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Landmark navigation');
-    nav.className = 'sr-only';
-    
-    const landmarks = [
-      { role: 'banner', label: 'Header' },
-      { role: 'main', label: 'Main content' },
-      { role: 'complementary', label: 'Sidebar' },
-      { role: 'contentinfo', label: 'Footer' }
-    ];
-    
-    landmarks.forEach(landmark => {
-      const link = document.createElement('a');
-      link.href = `[role="${landmark.role}"]`;
-      link.textContent = `Skip to ${landmark.label}`;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create heading navigation
-  static createHeadingNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Heading navigation');
-    nav.className = 'sr-only';
-    
-    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
-    headings.forEach((heading, index) => {
-      const link = document.createElement('a');
-      link.href = `#${heading.id || `heading-${index}`}`;
-      link.textContent = `${heading.tagName.toLowerCase()} ${heading.textContent}`;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create form navigation
-  static createFormNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Form navigation');
-    nav.className = 'sr-only';
-    
-    const forms = document.querySelectorAll('form');
-    forms.forEach((form, index) => {
-      const link = document.createElement('a');
-      link.href = `#${form.id || `form-${index}`}`;
-      link.textContent = `Form ${index + 1}`;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create table navigation
-  static createTableNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Table navigation');
-    nav.className = 'sr-only';
-    
-    const tables = document.querySelectorAll('table');
-    tables.forEach((table, index) => {
-      const link = document.createElement('a');
-      link.href = `#${table.id || `table-${index}`}`;
-      link.textContent = `Table ${index + 1}`;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create list navigation
-  static createListNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'List navigation');
-    nav.className = 'sr-only';
-    
-    const lists = document.querySelectorAll('ul, ol');
-    lists.forEach((list, index) => {
-      const link = document.createElement('a');
-      link.href = `#${list.id || `list-${index}`}`;
-      link.textContent = `${list.tagName.toLowerCase()} with ${list.children.length} items`;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create link navigation
-  static createLinkNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Link navigation');
-    nav.className = 'sr-only';
-    
-    const links = document.querySelectorAll('a[href]:not([href="#"])');
-    links.forEach((link, index) => {
-      const navLink = document.createElement('a');
-      navLink.href = (link as HTMLAnchorElement).href;
-      navLink.textContent = (link as HTMLAnchorElement).textContent || `Link ${index + 1}`;
-      navLink.className = 'sr-only-focusable';
-      nav.appendChild(navLink);
-    });
-    
-    return nav;
-  }
-
-  // Create button navigation
-  static createButtonNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Button navigation');
-    nav.className = 'sr-only';
-    
-    const buttons = document.querySelectorAll('button, [role="button"]');
-    buttons.forEach((button, index) => {
-      const link = document.createElement('a');
-      link.href = `#${button.id || `button-${index}`}`;
-      link.textContent = (button as HTMLElement).textContent || `Button ${index + 1}`;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create input navigation
-  static createInputNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Input navigation');
-    nav.className = 'sr-only';
-    
-    const inputs = document.querySelectorAll('input, textarea, select');
-    inputs.forEach((input, index) => {
-      const link = document.createElement('a');
-      link.href = `#${input.id || `input-${index}`}`;
-      const label = (input as HTMLElement).getAttribute('aria-label') || 
-                   (input as HTMLElement).getAttribute('placeholder') || 
-                   (input as HTMLElement).getAttribute('name') || 
-                   `Input ${index + 1}`;
-      link.textContent = label;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create image navigation
-  static createImageNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Image navigation');
-    nav.className = 'sr-only';
-    
-    const images = document.querySelectorAll('img');
-    images.forEach((img, index) => {
-      const link = document.createElement('a');
-      link.href = `#${img.id || `image-${index}`}`;
-      const alt = (img as HTMLImageElement).alt || `Image ${index + 1}`;
-      link.textContent = alt;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create media navigation
-  static createMediaNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Media navigation');
-    nav.className = 'sr-only';
-    
-    const media = document.querySelectorAll('video, audio');
-    media.forEach((element, index) => {
-      const link = document.createElement('a');
-      link.href = `#${element.id || `${element.tagName.toLowerCase()}-${index}`}`;
-      link.textContent = `${element.tagName} ${index + 1}`;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create section navigation
-  static createSectionNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Section navigation');
-    nav.className = 'sr-only';
-    
-    const sections = document.querySelectorAll('section, article, aside');
-    sections.forEach((section, index) => {
-      const link = document.createElement('a');
-      link.href = `#${section.id || `${section.tagName.toLowerCase()}-${index}`}`;
-      const title = (section as HTMLElement).getAttribute('aria-label') || 
-                   (section as HTMLElement).querySelector('h1, h2, h3, h4, h5, h6')?.textContent || 
-                   `${section.tagName} ${index + 1}`;
-      link.textContent = title;
-      link.className = 'sr-only-focusable';
-      nav.appendChild(link);
-    });
-    
-    return nav;
-  }
-
-  // Create comprehensive navigation
-  static createComprehensiveNavigation(): HTMLDivElement {
-    const nav = document.createElement('div');
-    nav.setAttribute('role', 'navigation');
-    nav.setAttribute('aria-label', 'Comprehensive navigation');
-    nav.className = 'sr-only';
-    
-    // Add all navigation types
-    nav.appendChild(ScreenReaderNavigation.createLandmarkNavigation());
-    nav.appendChild(ScreenReaderNavigation.createHeadingNavigation());
-    nav.appendChild(ScreenReaderNavigation.createFormNavigation());
-    nav.appendChild(ScreenReaderNavigation.createTableNavigation());
-    nav.appendChild(ScreenReaderNavigation.createListNavigation());
-    nav.appendChild(ScreenReaderNavigation.createLinkNavigation());
-    nav.appendChild(ScreenReaderNavigation.createButtonNavigation());
-    nav.appendChild(ScreenReaderNavigation.createInputNavigation());
-    nav.appendChild(ScreenReaderNavigation.createImageNavigation());
-    nav.appendChild(ScreenReaderNavigation.createMediaNavigation());
-    nav.appendChild(ScreenReaderNavigation.createSectionNavigation());
-    
-    return nav;
-  }
+        skipLink.addEventListener('focus', () => {
+            skipLink.style.top = '6px';
+        });
+        skipLink.addEventListener('blur', () => {
+            skipLink.style.top = '-40px';
+        });
+        return skipLink;
+    }
+    // Create landmark navigation
+    static createLandmarkNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Landmark navigation');
+        nav.className = 'sr-only';
+        const landmarks = [
+            { role: 'banner', label: 'Header' },
+            { role: 'main', label: 'Main content' },
+            { role: 'complementary', label: 'Sidebar' },
+            { role: 'contentinfo', label: 'Footer' }
+        ];
+        landmarks.forEach(landmark => {
+            const link = document.createElement('a');
+            link.href = `[role="${landmark.role}"]`;
+            link.textContent = `Skip to ${landmark.label}`;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create heading navigation
+    static createHeadingNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Heading navigation');
+        nav.className = 'sr-only';
+        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+        headings.forEach((heading, index) => {
+            const link = document.createElement('a');
+            link.href = `#${heading.id || `heading-${index}`}`;
+            link.textContent = `${heading.tagName.toLowerCase()} ${heading.textContent}`;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create form navigation
+    static createFormNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Form navigation');
+        nav.className = 'sr-only';
+        const forms = document.querySelectorAll('form');
+        forms.forEach((form, index) => {
+            const link = document.createElement('a');
+            link.href = `#${form.id || `form-${index}`}`;
+            link.textContent = `Form ${index + 1}`;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create table navigation
+    static createTableNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Table navigation');
+        nav.className = 'sr-only';
+        const tables = document.querySelectorAll('table');
+        tables.forEach((table, index) => {
+            const link = document.createElement('a');
+            link.href = `#${table.id || `table-${index}`}`;
+            link.textContent = `Table ${index + 1}`;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create list navigation
+    static createListNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'List navigation');
+        nav.className = 'sr-only';
+        const lists = document.querySelectorAll('ul, ol');
+        lists.forEach((list, index) => {
+            const link = document.createElement('a');
+            link.href = `#${list.id || `list-${index}`}`;
+            link.textContent = `${list.tagName.toLowerCase()} with ${list.children.length} items`;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create link navigation
+    static createLinkNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Link navigation');
+        nav.className = 'sr-only';
+        const links = document.querySelectorAll('a[href]:not([href="#"])');
+        links.forEach((link, index) => {
+            const navLink = document.createElement('a');
+            navLink.href = link.href;
+            navLink.textContent = link.textContent || `Link ${index + 1}`;
+            navLink.className = 'sr-only-focusable';
+            nav.appendChild(navLink);
+        });
+        return nav;
+    }
+    // Create button navigation
+    static createButtonNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Button navigation');
+        nav.className = 'sr-only';
+        const buttons = document.querySelectorAll('button, [role="button"]');
+        buttons.forEach((button, index) => {
+            const link = document.createElement('a');
+            link.href = `#${button.id || `button-${index}`}`;
+            link.textContent = button.textContent || `Button ${index + 1}`;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create input navigation
+    static createInputNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Input navigation');
+        nav.className = 'sr-only';
+        const inputs = document.querySelectorAll('input, textarea, select');
+        inputs.forEach((input, index) => {
+            const link = document.createElement('a');
+            link.href = `#${input.id || `input-${index}`}`;
+            const label = input.getAttribute('aria-label') ||
+                input.getAttribute('placeholder') ||
+                input.getAttribute('name') ||
+                `Input ${index + 1}`;
+            link.textContent = label;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create image navigation
+    static createImageNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Image navigation');
+        nav.className = 'sr-only';
+        const images = document.querySelectorAll('img');
+        images.forEach((img, index) => {
+            const link = document.createElement('a');
+            link.href = `#${img.id || `image-${index}`}`;
+            const alt = img.alt || `Image ${index + 1}`;
+            link.textContent = alt;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create media navigation
+    static createMediaNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Media navigation');
+        nav.className = 'sr-only';
+        const media = document.querySelectorAll('video, audio');
+        media.forEach((element, index) => {
+            const link = document.createElement('a');
+            link.href = `#${element.id || `${element.tagName.toLowerCase()}-${index}`}`;
+            link.textContent = `${element.tagName} ${index + 1}`;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create section navigation
+    static createSectionNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Section navigation');
+        nav.className = 'sr-only';
+        const sections = document.querySelectorAll('section, article, aside');
+        sections.forEach((section, index) => {
+            const link = document.createElement('a');
+            link.href = `#${section.id || `${section.tagName.toLowerCase()}-${index}`}`;
+            const title = section.getAttribute('aria-label') ||
+                section.querySelector('h1, h2, h3, h4, h5, h6')?.textContent ||
+                `${section.tagName} ${index + 1}`;
+            link.textContent = title;
+            link.className = 'sr-only-focusable';
+            nav.appendChild(link);
+        });
+        return nav;
+    }
+    // Create comprehensive navigation
+    static createComprehensiveNavigation() {
+        const nav = document.createElement('div');
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Comprehensive navigation');
+        nav.className = 'sr-only';
+        // Add all navigation types
+        nav.appendChild(ScreenReaderNavigation.createLandmarkNavigation());
+        nav.appendChild(ScreenReaderNavigation.createHeadingNavigation());
+        nav.appendChild(ScreenReaderNavigation.createFormNavigation());
+        nav.appendChild(ScreenReaderNavigation.createTableNavigation());
+        nav.appendChild(ScreenReaderNavigation.createListNavigation());
+        nav.appendChild(ScreenReaderNavigation.createLinkNavigation());
+        nav.appendChild(ScreenReaderNavigation.createButtonNavigation());
+        nav.appendChild(ScreenReaderNavigation.createInputNavigation());
+        nav.appendChild(ScreenReaderNavigation.createImageNavigation());
+        nav.appendChild(ScreenReaderNavigation.createMediaNavigation());
+        nav.appendChild(ScreenReaderNavigation.createSectionNavigation());
+        return nav;
+    }
 }
-
 // Export default instances
 export const screenReaderOptimizer = new ScreenReaderOptimizer();
-
 // Export default
 export default {
-  ScreenReaderOptimizer,
-  ScreenReaderNavigation,
-  screenReaderOptimizer
+    ScreenReaderOptimizer,
+    ScreenReaderNavigation,
+    screenReaderOptimizer
 };