@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

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

@@ -0,0 +1,580 @@
+// Screen reader optimization utilities
+export class ScreenReaderOptimizer {
+  // Live region types for dynamic content
+  static readonly LIVE_REGIONS = {
+    POLITE,
+    ASSERTIVE,
+    OFF} as const;
+
+  // Announcement priorities
+  static readonly PRIORITIES = {
+    LOW,
+    NORMAL,
+    HIGH,
+    URGENT} as const;
+
+  private liveRegions, HTMLElement>;
+  private announcementQueue; priority; timestamp}>;
+  private isProcessingQueue;
+
+  constructor() {
+    this.liveRegions = new Map();
+    this.announcementQueue = [];
+    this.isProcessingQueue = false;
+    this.initializeLiveRegions();
+  }
+
+  // Initialize live regions for different priorities
+  private initializeLiveRegions()= 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)) {
+      case ScreenReaderOptimizer.PRIORITIES.URGENT;
+      case ScreenReaderOptimizer.PRIORITIES.HIGH;
+      case ScreenReaderOptimizer.PRIORITIES.NORMAL;
+      case ScreenReaderOptimizer.PRIORITIES.LOW;
+      default;
+    }
+  }
+
+  // Announce message to screen readers
+  announce(message, priority= ScreenReaderOptimizer.PRIORITIES.NORMAL)== 'string') return;
+
+    const timestamp = Date.now();
+    this.announcementQueue.push({ message, priority, timestamp });
+    
+    if (!this.isProcessingQueue) {
+      this.processAnnouncementQueue();
+    }
+  }
+
+  // Process announcement queue
+  private async processAnnouncementQueue()=== 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, priority)= 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)=> setTimeout(resolve, ms));
+  }
+
+  // Announce page title change
+  announcePageTitle(title)}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+  }
+
+  // Announce navigation change
+  announceNavigation(destination)}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce form submission
+  announceFormSubmission(formName, success)= success 
+      ? `Form ${formName} submitted successfully` 
+      } submission failed`;
+    this.announce(message, success ? ScreenReaderOptimizer.PRIORITIES.NORMAL );
+  }
+
+  // Announce loading state
+  announceLoading(component, isLoading)= isLoading ? `${component} is loading` } finished loading`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Announce error
+  announceError(error)}`, ScreenReaderOptimizer.PRIORITIES.URGENT);
+  }
+
+  // Announce success
+  announceSuccess(message)}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce warning
+  announceWarning(message)}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+  }
+
+  // Announce information
+  announceInfo(message)}`, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Announce count changes
+  announceCountChange(itemType, count, total?)= `${itemType} count}`;
+    if (total !== undefined) {
+      message += ` of ${total}`;
+    }
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Announce selection changes
+  announceSelectionChange(itemType, selected, total)= `${selected} of ${total} ${itemType} selected`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce progress updates
+  announceProgress(current, total, percentage)= `Progress} of ${total} (${percentage}%)`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Announce search results
+  announceSearchResults(query, count)= `Found ${count} results for "${query}"`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce filter changes
+  announceFilterChange(filterName, value)= `Filter ${filterName} changed to}`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce sort changes
+  announceSortChange(column, direction)= `Sorted by ${column} in ${direction} order`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce modal open/close
+  announceModalChange(modalName, isOpen)= isOpen ? `${modalName} modal opened` } modal closed`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.HIGH);
+  }
+
+  // Announce tab changes
+  announceTabChange(tabName)} tab`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce accordion changes
+  announceAccordionChange(sectionName, isExpanded)= isExpanded ? `${sectionName} section expanded` } section collapsed`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce tree changes
+  announceTreeChange(nodeName, action)= `${nodeName} node ${action}`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce list changes
+  announceListChange(listName, action, itemName)= `${itemName} ${action} from ${listName} list`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce table changes
+  announceTableChange(tableName, action)= `${tableName} table}`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce form field changes
+  announceFormFieldChange(fieldName, value, isValid)= `${fieldName} field changed to}`;
+    if (!isValid) {
+      message += '. Field has validation errors';
+    }
+    this.announce(message, isValid ? ScreenReaderOptimizer.PRIORITIES.LOW );
+  }
+
+  // Announce validation errors
+  announceValidationErrors(fieldName, errors])= errors.join(', ');
+    const message = `${fieldName} validation errors}`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.HIGH);
+  }
+
+  // Announce focus changes
+  announceFocusChange(elementName, context?)= `Focused on}`;
+    if (context) {
+      message += ` in ${context}`;
+    }
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Announce keyboard shortcuts
+  announceKeyboardShortcut(action, shortcut)= `${action}}`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Announce time-sensitive information
+  announceTimeSensitive(message, urgency)= urgency === 'high' ? ScreenReaderOptimizer.PRIORITIES.URGENT === 'medium' ? ScreenReaderOptimizer.PRIORITIES.HIGH ;
+    this.announce(message, priority);
+  }
+
+  // Announce status changes
+  announceStatusChange(component, oldStatus, newStatus)= `${component} status changed from ${oldStatus} to ${newStatus}`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce data updates
+  announceDataUpdate(dataType, action)= `${dataType} ${action}`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce connection status
+  announceConnectionStatus(isConnected)= isConnected ? 'Connection restored' ;
+    this.announce(message, isConnected ? ScreenReaderOptimizer.PRIORITIES.NORMAL );
+  }
+
+  // Announce accessibility features
+  announceAccessibilityFeature(feature, enabled)= `${feature} accessibility feature ${enabled ? 'enabled' }`;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Announce theme changes
+  announceThemeChange(themeName)}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce language changes
+  announceLanguageChange(language)}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+  }
+
+  // Announce font size changes
+  announceFontSizeChange(size)}`, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Announce contrast changes
+  announceContrastChange(isHighContrast)= isHighContrast ? 'High contrast mode enabled' ;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  }
+
+  // Announce motion changes
+  announceMotionChange(isReducedMotion)= isReducedMotion ? 'Reduced motion enabled' ;
+    this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
+  }
+
+  // Get announcement queue status
+  getQueueStatus(); isProcessing} {
+    return {
+      length,
+      isProcessing};
+  }
+
+  // Clear announcement queue
+  clearQueue()= [];
+  }
+
+  // Destroy live regions
+  destroy()=> {
+      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, text= 'Skip to main content')= document.createElement('a');
+    skipLink.href = `#${targetId}`;
+    skipLink.textContent = text;
+    skipLink.className = 'sr-only sr-only-focusable';
+    skipLink.style.cssText = `
+      position;
+      top;
+      left;
+      z-index;
+      padding;
+      background;
+      color;
+      text-decoration;
+      border-radius;
+      font-size;
+      line-height;
+    `;
+    
+    skipLink.addEventListener('focus', () => {
+      skipLink.style.top = '6px';
+    });
+    
+    skipLink.addEventListener('blur', () => {
+      skipLink.style.top = '-40px';
+    });
+    
+    return skipLink;
+  }
+
+  // Create landmark navigation
+  static createLandmarkNavigation()= document.createElement('div');
+    nav.setAttribute('role', 'navigation');
+    nav.setAttribute('aria-label', 'Landmark navigation');
+    nav.className = 'sr-only';
+    
+    const landmarks = [
+      { role, label},
+      { role, label},
+      { role, label},
+      { role, label}
+    ];
+    
+    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()= 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()= 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()= 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()= 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()= document.createElement('div');
+    nav.setAttribute('role', 'navigation');
+    nav.setAttribute('aria-label', 'Link navigation');
+    nav.className = 'sr-only';
+    
+    const links = document.querySelectorAll('a[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()= 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()= 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()= 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()= 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()= 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()= 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
+};