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

package/dist/themes/screen-reader.js

@@ -2,20 +2,22 @@
 export class ScreenReaderOptimizer {
   // Live region types for dynamic content
   static readonly LIVE_REGIONS = {
-    POLITE,
-    ASSERTIVE,
-    OFF} as const;
+    POLITE: 'polite',
+    ASSERTIVE: 'assertive',
+    OFF: 'off'
+  } as const;
 
   // Announcement priorities
   static readonly PRIORITIES = {
-    LOW,
-    NORMAL,
-    HIGH,
-    URGENT} as const;
+    LOW: 'low',
+    NORMAL: 'normal',
+    HIGH: 'high',
+    URGENT: 'urgent'
+  } as const;
 
-  private liveRegions, HTMLElement>;
-  private announcementQueue; priority; timestamp}>;
-  private isProcessingQueue;
+  private liveRegions: Map<string, HTMLElement>;
+  private announcementQueue: Array<{ message: string; priority: string; timestamp: number }>;
+  private isProcessingQueue: boolean;
 
   constructor() {
     this.liveRegions = new Map();
@@ -25,7 +27,8 @@ export class ScreenReaderOptimizer {
   }
 
   // Initialize live regions for different priorities
-  private initializeLiveRegions()= Object.values(ScreenReaderOptimizer.PRIORITIES);
+  private initializeLiveRegions(): void {
+    const priorities = Object.values(ScreenReaderOptimizer.PRIORITIES);
     
     priorities.forEach(priority => {
       const region = document.createElement('div');
@@ -45,17 +48,24 @@ export class ScreenReaderOptimizer {
   }
 
   // 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;
+  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, priority= ScreenReaderOptimizer.PRIORITIES.NORMAL)== 'string') return;
+  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 });
@@ -66,7 +76,8 @@ export class ScreenReaderOptimizer {
   }
 
   // Process announcement queue
-  private async processAnnouncementQueue()=== 0) return;
+  private async processAnnouncementQueue(): Promise<void> {
+    if (this.isProcessingQueue || this.announcementQueue.length === 0) return;
 
     this.isProcessingQueue = true;
 
@@ -84,7 +95,8 @@ export class ScreenReaderOptimizer {
   }
 
   // Make individual announcement
-  private async makeAnnouncement(message, priority)= this.liveRegions.get(priority);
+  private async makeAnnouncement(message: string, priority: string): Promise<void> {
+    const region = this.liveRegions.get(priority);
     if (!region) return;
 
     // Clear previous content
@@ -105,47 +117,57 @@ export class ScreenReaderOptimizer {
   }
 
   // Utility delay function
-  private delay(ms)=> setTimeout(resolve, ms));
+  private delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
   }
 
   // Announce page title change
-  announcePageTitle(title)}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+  announcePageTitle(title: string): void {
+    this.announce(`Page title changed to: ${title}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
   }
 
   // Announce navigation change
-  announceNavigation(destination)}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  announceNavigation(destination: string): void {
+    this.announce(`Navigated to: ${destination}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
   }
 
   // Announce form submission
-  announceFormSubmission(formName, success)= success 
+  announceFormSubmission(formName: string, success: boolean): void {
+    const message = success 
       ? `Form ${formName} submitted successfully` 
-      } submission failed`;
-    this.announce(message, success ? ScreenReaderOptimizer.PRIORITIES.NORMAL );
+      : `Form ${formName} submission failed`;
+    this.announce(message, success ? ScreenReaderOptimizer.PRIORITIES.NORMAL : ScreenReaderOptimizer.PRIORITIES.HIGH);
   }
 
   // Announce loading state
-  announceLoading(component, isLoading)= isLoading ? `${component} is loading` } finished loading`;
+  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)}`, ScreenReaderOptimizer.PRIORITIES.URGENT);
+  announceError(error: string): void {
+    this.announce(`Error: ${error}`, ScreenReaderOptimizer.PRIORITIES.URGENT);
   }
 
   // Announce success
-  announceSuccess(message)}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  announceSuccess(message: string): void {
+    this.announce(`Success: ${message}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
   }
 
   // Announce warning
-  announceWarning(message)}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+  announceWarning(message: string): void {
+    this.announce(`Warning: ${message}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
   }
 
   // Announce information
-  announceInfo(message)}`, ScreenReaderOptimizer.PRIORITIES.LOW);
+  announceInfo(message: string): void {
+    this.announce(`Information: ${message}`, ScreenReaderOptimizer.PRIORITIES.LOW);
   }
 
   // Announce count changes
-  announceCountChange(itemType, count, total?)= `${itemType} count}`;
+  announceCountChange(itemType: string, count: number, total?: number): void {
+    let message = `${itemType} count: ${count}`;
     if (total !== undefined) {
       message += ` of ${total}`;
     }
@@ -153,75 +175,89 @@ export class ScreenReaderOptimizer {
   }
 
   // Announce selection changes
-  announceSelectionChange(itemType, selected, total)= `${selected} of ${total} ${itemType} selected`;
+  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, total, percentage)= `Progress} of ${total} (${percentage}%)`;
+  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, count)= `Found ${count} results for "${query}"`;
+  announceSearchResults(query: string, count: number): void {
+    const message = `Found ${count} results for "${query}"`;
     this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
   }
 
   // Announce filter changes
-  announceFilterChange(filterName, value)= `Filter ${filterName} changed to}`;
+  announceFilterChange(filterName: string, value: string): void {
+    const message = `Filter ${filterName} changed to: ${value}`;
     this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
   }
 
   // Announce sort changes
-  announceSortChange(column, direction)= `Sorted by ${column} in ${direction} order`;
+  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, isOpen)= isOpen ? `${modalName} modal opened` } modal closed`;
+  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)} tab`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  announceTabChange(tabName: string): void {
+    this.announce(`Switched to ${tabName} tab`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
   }
 
   // Announce accordion changes
-  announceAccordionChange(sectionName, isExpanded)= isExpanded ? `${sectionName} section expanded` } section collapsed`;
+  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, action)= `${nodeName} node ${action}`;
+  announceTreeChange(nodeName: string, action: 'expanded' | 'collapsed' | 'selected'): void {
+    const message = `${nodeName} node ${action}`;
     this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
   }
 
   // Announce list changes
-  announceListChange(listName, action, itemName)= `${itemName} ${action} from ${listName} list`;
+  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, action)= `${tableName} table}`;
+  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, value, isValid)= `${fieldName} field changed to}`;
+  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 );
+    this.announce(message, isValid ? ScreenReaderOptimizer.PRIORITIES.LOW : ScreenReaderOptimizer.PRIORITIES.HIGH);
   }
 
   // Announce validation errors
-  announceValidationErrors(fieldName, errors])= errors.join(', ');
-    const message = `${fieldName} 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, context?)= `Focused on}`;
+  announceFocusChange(elementName: string, context?: string): void {
+    let message = `Focused on: ${elementName}`;
     if (context) {
       message += ` in ${context}`;
     }
@@ -229,70 +265,86 @@ export class ScreenReaderOptimizer {
   }
 
   // Announce keyboard shortcuts
-  announceKeyboardShortcut(action, shortcut)= `${action}}`;
+  announceKeyboardShortcut(action: string, shortcut: string): void {
+    const message = `${action}: ${shortcut}`;
     this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
   }
 
   // Announce time-sensitive information
-  announceTimeSensitive(message, urgency)= urgency === 'high' ? ScreenReaderOptimizer.PRIORITIES.URGENT === 'medium' ? ScreenReaderOptimizer.PRIORITIES.HIGH ;
+  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, oldStatus, newStatus)= `${component} status changed from ${oldStatus} to ${newStatus}`;
+  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, action)= `${dataType} ${action}`;
+  announceDataUpdate(dataType: string, action: 'created' | 'updated' | 'deleted'): void {
+    const message = `${dataType} ${action}`;
     this.announce(message, ScreenReaderOptimizer.PRIORITIES.NORMAL);
   }
 
   // Announce connection status
-  announceConnectionStatus(isConnected)= isConnected ? 'Connection restored' ;
-    this.announce(message, isConnected ? ScreenReaderOptimizer.PRIORITIES.NORMAL );
+  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, enabled)= `${feature} accessibility feature ${enabled ? 'enabled' }`;
+  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)}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
+  announceThemeChange(themeName: string): void {
+    this.announce(`Theme changed to: ${themeName}`, ScreenReaderOptimizer.PRIORITIES.NORMAL);
   }
 
   // Announce language changes
-  announceLanguageChange(language)}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
+  announceLanguageChange(language: string): void {
+    this.announce(`Language changed to: ${language}`, ScreenReaderOptimizer.PRIORITIES.HIGH);
   }
 
   // Announce font size changes
-  announceFontSizeChange(size)}`, ScreenReaderOptimizer.PRIORITIES.LOW);
+  announceFontSizeChange(size: string): void {
+    this.announce(`Font size changed to: ${size}`, ScreenReaderOptimizer.PRIORITIES.LOW);
   }
 
   // Announce contrast changes
-  announceContrastChange(isHighContrast)= isHighContrast ? 'High contrast mode enabled' ;
+  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)= isReducedMotion ? 'Reduced motion enabled' ;
+  announceMotionChange(isReducedMotion: boolean): void {
+    const message = isReducedMotion ? 'Reduced motion enabled' : 'Reduced motion disabled';
     this.announce(message, ScreenReaderOptimizer.PRIORITIES.LOW);
   }
 
   // Get announcement queue status
-  getQueueStatus(); isProcessing} {
+  getQueueStatus(): { length: number; isProcessing: boolean } {
     return {
-      length,
-      isProcessing};
+      length: this.announcementQueue.length,
+      isProcessing: this.isProcessingQueue
+    };
   }
 
   // Clear announcement queue
-  clearQueue()= [];
+  clearQueue(): void {
+    this.announcementQueue = [];
   }
 
   // Destroy live regions
-  destroy()=> {
+  destroy(): void {
+    this.liveRegions.forEach(region => {
       if (region.parentNode) {
         region.parentNode.removeChild(region);
       }
@@ -305,22 +357,23 @@ export class ScreenReaderOptimizer {
 // Screen reader navigation utilities
 export class ScreenReaderNavigation {
   // Create skip link for main content
-  static createSkipLink(targetId, text= 'Skip to main content')= document.createElement('a');
+  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 = `
-      position;
-      top;
-      left;
-      z-index;
-      padding;
-      background;
-      color;
-      text-decoration;
-      border-radius;
-      font-size;
-      line-height;
+      position: absolute;
+      top: -40px;
+      left: 6px;
+      z-index: 1000;
+      padding: 8px 16px;
+      background: #000;
+      color: #fff;
+      text-decoration: none;
+      border-radius: 4px;
+      font-size: 14px;
+      line-height: 1.2;
     `;
     
     skipLink.addEventListener('focus', () => {
@@ -335,16 +388,17 @@ export class ScreenReaderNavigation {
   }
 
   // Create landmark navigation
-  static createLandmarkNavigation()= document.createElement('div');
+  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, label},
-      { role, label},
-      { role, label},
-      { role, label}
+      { role: 'banner', label: 'Header' },
+      { role: 'main', label: 'Main content' },
+      { role: 'complementary', label: 'Sidebar' },
+      { role: 'contentinfo', label: 'Footer' }
     ];
     
     landmarks.forEach(landmark => {
@@ -359,7 +413,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create heading navigation
-  static createHeadingNavigation()= document.createElement('div');
+  static createHeadingNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Heading navigation');
     nav.className = 'sr-only';
@@ -377,7 +432,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create form navigation
-  static createFormNavigation()= document.createElement('div');
+  static createFormNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Form navigation');
     nav.className = 'sr-only';
@@ -395,7 +451,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create table navigation
-  static createTableNavigation()= document.createElement('div');
+  static createTableNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Table navigation');
     nav.className = 'sr-only';
@@ -413,7 +470,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create list navigation
-  static createListNavigation()= document.createElement('div');
+  static createListNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'List navigation');
     nav.className = 'sr-only';
@@ -431,12 +489,13 @@ export class ScreenReaderNavigation {
   }
 
   // Create link navigation
-  static createLinkNavigation()= document.createElement('div');
+  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]="#"])');
+    const links = document.querySelectorAll('a[href]:not([href="#"])');
     links.forEach((link, index) => {
       const navLink = document.createElement('a');
       navLink.href = (link as HTMLAnchorElement).href;
@@ -449,7 +508,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create button navigation
-  static createButtonNavigation()= document.createElement('div');
+  static createButtonNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Button navigation');
     nav.className = 'sr-only';
@@ -467,7 +527,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create input navigation
-  static createInputNavigation()= document.createElement('div');
+  static createInputNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Input navigation');
     nav.className = 'sr-only';
@@ -489,7 +550,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create image navigation
-  static createImageNavigation()= document.createElement('div');
+  static createImageNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Image navigation');
     nav.className = 'sr-only';
@@ -508,7 +570,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create media navigation
-  static createMediaNavigation()= document.createElement('div');
+  static createMediaNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Media navigation');
     nav.className = 'sr-only';
@@ -526,7 +589,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create section navigation
-  static createSectionNavigation()= document.createElement('div');
+  static createSectionNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Section navigation');
     nav.className = 'sr-only';
@@ -547,7 +611,8 @@ export class ScreenReaderNavigation {
   }
 
   // Create comprehensive navigation
-  static createComprehensiveNavigation()= document.createElement('div');
+  static createComprehensiveNavigation(): HTMLDivElement {
+    const nav = document.createElement('div');
     nav.setAttribute('role', 'navigation');
     nav.setAttribute('aria-label', 'Comprehensive navigation');
     nav.className = 'sr-only';