@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/themes/focus-management.js

@@ -0,0 +1,642 @@
+import { screenReaderOptimizer } from './screen-reader';
+
+// Focus management utilities
+export class AccessibilityFocusManager {
+  private focusableSelectors];
+  private focusableElements];
+  private lastFocusedElement;
+  private focusTraps, FocusTrap>;
+  private focusHistory];
+  private maxHistorySize;
+
+  constructor() {
+    this.focusableSelectors = [
+      'a[href]',
+      'button])',
+      'input])',
+      'select])',
+      'textarea])',
+      '[tabindex]="-1"])',
+      '[contenteditable="true"]',
+      'audio[controls]',
+      'video[controls]',
+      'iframe'
+    ];
+    
+    this.focusableElements = [];
+    this.lastFocusedElement = null;
+    this.focusTraps = new Map();
+    this.focusHistory = [];
+    this.maxHistorySize = 10;
+    
+    this.initialize();
+  }
+
+  // Initialize focus management
+  private initialize());
+    this.setupEventListeners();
+  }
+
+  // Update list of focusable elements
+  private updateFocusableElements()= Array.from(
+      document.querySelectorAll(this.focusableSelectors.join(','))
+    ) as HTMLElement[];
+  }
+
+  // Setup event listeners
+  private setupEventListeners(), this.handleFocusIn.bind(this));
+    document.addEventListener('focusout', this.handleFocusOut.bind(this));
+    
+    // Handle tab key navigation
+    document.addEventListener('keydown', this.handleKeyDown.bind(this));
+    
+    // Update focusable elements when DOM changes
+    const observer = new MutationObserver(() => {
+      this.updateFocusableElements();
+    });
+    
+    observer.observe(document.body, {
+      childList,
+      subtree});
+  }
+
+  // Handle focus in events
+  private handleFocusIn(event)= event.target as HTMLElement;
+    
+    if (target && target !== this.lastFocusedElement) {
+      // Add to focus history
+      this.addToFocusHistory(target);
+      
+      // Update last focused element
+      this.lastFocusedElement = target;
+      
+      // Announce focus change for screen readers
+      if (screenReaderOptimizer) {
+        screenReaderOptimizer.announceFocusChange(
+          this.getElementDescription(target),
+          this.getElementContext(target)
+        );
+      }
+    }
+  }
+
+  // Handle focus out events
+  private handleFocusOut(_event)}
+
+  // Handle key down events
+  private handleKeyDown(event)=== 'Tab') {
+      this.handleTabNavigation(event);
+    }
+  }
+
+  // Handle tab navigation
+  private handleTabNavigation(event)= event.shiftKey;
+    const currentElement = event.target as HTMLElement;
+    
+    // Check if we're in a focus trap
+    const activeTrap = this.getActiveFocusTrap(currentElement);
+    if (activeTrap) {
+      event.preventDefault();
+      this.navigateInFocusTrap(activeTrap, isShiftTab);
+      return;
+    }
+    
+    // Normal tab navigation
+    this.navigateFocusableElements(isShiftTab);
+  }
+
+  // Get active focus trap for element
+  private getActiveFocusTrap(element))) {
+      if (trap.isActive && trap.container.contains(element)) {
+        return trap;
+      }
+    }
+    return null;
+  }
+
+  // Navigate within a focus trap
+  private navigateInFocusTrap(trap, isShiftTab)= trap.getFocusableElements();
+    if (focusableElements.length === 0) return;
+
+    const currentIndex = focusableElements.indexOf(document.activeElement as HTMLElement);
+    let nextIndex;
+
+    if (isShiftTab) {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 ;
+    } else {
+      nextIndex = currentIndex < focusableElements.length - 1 ? currentIndex + 1 ;
+    }
+
+    focusableElements[nextIndex]?.focus();
+  }
+
+  // Navigate focusable elements
+  private navigateFocusableElements(isShiftTab)= this.focusableElements.indexOf(document.activeElement as HTMLElement);
+    let nextIndex;
+
+    if (isShiftTab) {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 ;
+    } else {
+      nextIndex = currentIndex < this.focusableElements.length - 1 ? currentIndex + 1 ;
+    }
+
+    this.focusableElements[nextIndex]?.focus();
+  }
+
+  // Add element to focus history
+  private addToFocusHistory(element)= this.focusHistory.filter(el => el !== element);
+    
+    // Add to beginning
+    this.focusHistory.unshift(element);
+    
+    // Maintain history size
+    if (this.focusHistory.length > this.maxHistorySize) {
+      this.focusHistory.pop();
+    }
+  }
+
+  // Get element description for screen readers
+  private getElementDescription(element)= element.getAttribute('aria-label');
+    if (ariaLabel) return ariaLabel;
+
+    const ariaLabelledBy = element.getAttribute('aria-labelledby');
+    if (ariaLabelledBy) {
+      const labelElement = document.getElementById(ariaLabelledBy);
+      if (labelElement) return labelElement.textContent || '';
+    }
+
+    const placeholder = element.getAttribute('placeholder');
+    if (placeholder) return placeholder;
+
+    const title = element.getAttribute('title');
+    if (title) return title;
+
+    return element.textContent || element.tagName.toLowerCase();
+  }
+
+  // Get element context for screen readers
+  private getElementContext(element)= element.closest('[role], section, article, aside, nav, header, footer, main');
+    if (landmark) {
+      const role = landmark.getAttribute('role');
+      const ariaLabel = landmark.getAttribute('aria-label');
+      return ariaLabel || role || landmark.tagName.toLowerCase();
+    }
+    return undefined;
+  }
+
+  // Create focus trap
+  createFocusTrap(container, options= {})= new FocusTrap(container, options);
+    this.focusTraps.set(trap.id, trap);
+    return trap;
+  }
+
+  // Remove focus trap
+  removeFocusTrap(trapId)= this.focusTraps.get(trapId);
+    if (trap) {
+      trap.deactivate();
+      this.focusTraps.delete(trapId);
+    }
+  }
+
+  // Focus first focusable element
+  focusFirst()= this.focusableElements[0];
+    if (firstElement) {
+      firstElement.focus();
+    }
+  }
+
+  // Focus last focusable element
+  focusLast()= this.focusableElements[this.focusableElements.length - 1];
+    if (lastElement) {
+      lastElement.focus();
+    }
+  }
+
+  // Focus next element
+  focusNext()= this.focusableElements.indexOf(document.activeElement as HTMLElement);
+    const nextIndex = currentIndex < this.focusableElements.length - 1 ? currentIndex + 1 ;
+    this.focusableElements[nextIndex]?.focus();
+  }
+
+  // Focus previous element
+  focusPrevious()= this.focusableElements.indexOf(document.activeElement as HTMLElement);
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 ;
+    this.focusableElements[prevIndex]?.focus();
+  }
+
+  // Focus element by index
+  focusByIndex(index)= 0 && index < this.focusableElements.length) {
+      this.focusableElements[index].focus();
+    }
+  }
+
+  // Focus element by ID
+  focusById(id)= document.getElementById(id);
+    if (element && this.focusableElements.includes(element)) {
+      element.focus();
+    }
+  }
+
+  // Focus element by data attribute
+  focusByDataAttribute(attribute, value)= document.querySelector(`[data-${attribute}="${value}"]`) as HTMLElement;
+    if (element && this.focusableElements.includes(element)) {
+      element.focus();
+    }
+  }
+
+  // Restore previous focus
+  restoreFocus()== null) {
+      this.lastFocusedElement.focus();
+    }
+  }
+
+  // Get focus history
+  getFocusHistory()] {
+    return [...this.focusHistory];
+  }
+
+  // Clear focus history
+  clearFocusHistory()= [];
+  }
+
+  // Get current focus information
+  getCurrentFocusInfo();
+    index;
+    total;
+    context;
+  } {
+    const currentElement = document.activeElement as HTMLElement;
+    const index = this.focusableElements.indexOf(currentElement);
+    
+    return {
+      element,
+      index= 0 ? index ,
+      total,
+      context) };
+  }
+
+  // Check if element is focusable
+  isFocusable(element));
+  }
+
+  // Get all focusable elements
+  getAllFocusableElements()] {
+    return [...this.focusableElements];
+  }
+
+  // Get focusable elements within container
+  getFocusableElementsInContainer(container)] {
+    return this.focusableElements.filter(element => 
+      container.contains(element)
+    );
+  }
+
+  // Update focusable elements manually
+  refreshFocusableElements());
+  }
+
+  // Destroy focus manager
+  destroy()=> trap.deactivate());
+    this.focusTraps.clear();
+    
+    // Clear focus history
+    this.focusHistory = [];
+    
+    // Remove event listeners
+    document.removeEventListener('focusin', this.handleFocusIn.bind(this));
+    document.removeEventListener('focusout', this.handleFocusOut.bind(this));
+    document.removeEventListener('keydown', this.handleKeyDown.bind(this));
+  }
+}
+
+// Focus trap options
+export interface FocusTrapOptions {
+  autoFocus?;
+  returnFocus?;
+  escapeDeactivates?;
+  clickOutsideDeactivates?;
+  allowOutsideClick?;
+  fallbackFocus?;
+}
+
+// Focus trap class
+export class FocusTrap {
+  public readonly id;
+  public readonly container;
+  public readonly options;
+  public isActive= false;
+  
+  private returnFocusElement= null;
+  private focusableElements] = [];
+  private eventListeners; handler) => void }> = [];
+
+  constructor(container, options= {}) {
+    this.id = `focus-trap-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    this.container = container;
+    this.options = {
+      autoFocus,
+      returnFocus,
+      escapeDeactivates,
+      clickOutsideDeactivates,
+      allowOutsideClick,
+      fallbackFocus,
+      ...options
+    };
+  }
+
+  // Activate focus trap
+  activate()) return;
+
+    // Store current focus for return
+    if (this.options.returnFocus) {
+      this.returnFocusElement = document.activeElement as HTMLElement;
+    }
+
+    // Get focusable elements within container
+    this.focusableElements = this.getFocusableElements();
+
+    // Auto-focus first element or fallback
+    if (this.options.autoFocus && this.focusableElements.length > 0) {
+      this.focusableElements[0].focus();
+    } else if (this.options.fallbackFocus) {
+      this.options.fallbackFocus.focus();
+    }
+
+    // Setup event listeners
+    this.setupEventListeners();
+
+    this.isActive = true;
+  }
+
+  // Deactivate focus trap
+  deactivate()) return;
+
+    // Remove event listeners
+    this.removeEventListeners();
+
+    // Return focus if requested
+    if (this.options.returnFocus && this.returnFocusElement) {
+      this.returnFocusElement.focus();
+    }
+
+    this.isActive = false;
+  }
+
+  // Get focusable elements within container
+  getFocusableElements()] {
+    const focusableSelectors = [
+      'a[href]',
+      'button])',
+      'input])',
+      'select])',
+      'textarea])',
+      '[tabindex]="-1"])',
+      '[contenteditable="true"]'
+    ];
+
+    return Array.from(
+      this.container.querySelectorAll(focusableSelectors.join(','))
+    ) as HTMLElement[];
+  }
+
+  // Setup event listeners
+  private setupEventListeners()) {
+      const escapeHandler = (event) => {
+        if (event.key === 'Escape') {
+          this.deactivate();
+        }
+      };
+      
+      document.addEventListener('keydown', escapeHandler);
+      this.eventListeners.push({ event, handler});
+    }
+
+    // Handle click outside
+    if (this.options.clickOutsideDeactivates) {
+      const clickHandler = (event) => {
+        if (!this.container.contains(event.target as Node)) {
+          this.deactivate();
+        }
+      };
+      
+      document.addEventListener('click', clickHandler);
+      this.eventListeners.push({ event, handler});
+    }
+
+    // Handle tab key within trap
+    const tabHandler = (event) => {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        this.handleTabNavigation(event.shiftKey);
+      }
+    };
+    
+    this.container.addEventListener('keydown', tabHandler);
+    this.eventListeners.push({ event, handler});
+  }
+
+  // Remove event listeners
+  private removeEventListeners(), handler }) => {
+      if (event === 'keydown' && handler.toString().includes('tabHandler')) {
+        this.container.removeEventListener(event, handler);
+      } else {
+        document.removeEventListener(event, handler);
+      }
+    });
+    
+    this.eventListeners = [];
+  }
+
+  // Handle tab navigation within trap
+  private handleTabNavigation(isShiftTab)=== 0) return;
+
+    const currentIndex = this.focusableElements.indexOf(document.activeElement as HTMLElement);
+    let nextIndex;
+
+    if (isShiftTab) {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 ;
+    } else {
+      nextIndex = currentIndex < this.focusableElements.length - 1 ? currentIndex + 1 ;
+    }
+
+    this.focusableElements[nextIndex]?.focus();
+  }
+
+  // Focus first element in trap
+  focusFirst()) {
+      this.focusableElements[0].focus();
+    }
+  }
+
+  // Focus last element in trap
+  focusLast()) {
+      this.focusableElements[this.focusableElements.length - 1].focus();
+    }
+  }
+
+  // Focus next element in trap
+  focusNext()=== 0) return;
+
+    const currentIndex = this.focusableElements.indexOf(document.activeElement as HTMLElement);
+    const nextIndex = currentIndex < this.focusableElements.length - 1 ? currentIndex + 1 ;
+    this.focusableElements[nextIndex]?.focus();
+  }
+
+  // Focus previous element in trap
+  focusPrevious()=== 0) return;
+
+    const currentIndex = this.focusableElements.indexOf(document.activeElement as HTMLElement);
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 ;
+    this.focusableElements[prevIndex]?.focus();
+  }
+
+  // Get trap information
+  getInfo();
+    isActive;
+    focusableElementsCount;
+    currentFocusIndex;
+    container;
+  } {
+    const currentIndex = this.focusableElements.indexOf(document.activeElement as HTMLElement);
+    
+    return {
+      id,
+      isActive,
+      focusableElementsCount,
+      currentFocusIndex= 0 ? currentIndex ,
+      container};
+  }
+}
+
+// Focus restoration utilities
+export class FocusRestoration {
+  private focusStack] = [];
+  private maxStackSize= 20;
+
+  // Push current focus to stack
+  pushFocus()= document.activeElement as HTMLElement;
+    if (currentElement && currentElement !== document.body) {
+      this.focusStack.push(currentElement);
+      
+      // Maintain stack size
+      if (this.focusStack.length > this.maxStackSize) {
+        this.focusStack.shift();
+      }
+    }
+  }
+
+  // Pop and restore focus from stack
+  popFocus()= this.focusStack.pop();
+    if (element && element.offsetParent !== null) {
+      element.focus();
+      return true;
+    }
+    return false;
+  }
+
+  // Peek at top of focus stack
+  peekFocus()];
+  }
+
+  // Clear focus stack
+  clear()= [];
+  }
+
+  // Get stack size
+  getSize();
+  }
+
+  // Check if stack is empty
+  isEmpty()=== 0;
+  }
+}
+
+// Focus navigation utilities
+export class FocusNavigation {
+  // Navigate to next heading
+  static focusNextHeading()= Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+    const currentIndex = headings.indexOf(document.activeElement as HTMLElement);
+    const nextIndex = currentIndex < headings.length - 1 ? currentIndex + 1 ;
+    
+    if (headings[nextIndex]) {
+      (headings[nextIndex] as HTMLElement).focus();
+    }
+  }
+
+  // Navigate to previous heading
+  static focusPreviousHeading()= Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+    const currentIndex = headings.indexOf(document.activeElement as HTMLElement);
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 ;
+    
+    if (headings[prevIndex]) {
+      (headings[prevIndex] as HTMLElement).focus();
+    }
+  }
+
+  // Navigate to next landmark
+  static focusNextLandmark()= Array.from(document.querySelectorAll('[role="banner"], [role="main"], [role="navigation"], [role="complementary"], [role="contentinfo"]'));
+    const currentIndex = landmarks.indexOf(document.activeElement as HTMLElement);
+    const nextIndex = currentIndex < landmarks.length - 1 ? currentIndex + 1 ;
+    
+    if (landmarks[nextIndex]) {
+      (landmarks[nextIndex] as HTMLElement).focus();
+    }
+  }
+
+  // Navigate to previous landmark
+  static focusPreviousLandmark()= Array.from(document.querySelectorAll('[role="banner"], [role="main"], [role="navigation"], [role="complementary"], [role="contentinfo"]'));
+    const currentIndex = landmarks.indexOf(document.activeElement as HTMLElement);
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 ;
+    
+    if (landmarks[prevIndex]) {
+      (landmarks[prevIndex] as HTMLElement).focus();
+    }
+  }
+
+  // Focus first focusable element in container
+  static focusFirstInContainer(container)= [
+      'a[href]',
+      'button])',
+      'input])',
+      'select])',
+      'textarea])',
+      '[tabindex]="-1"])'
+    ];
+
+    const firstElement = container.querySelector(focusableSelectors.join(','));
+    if (firstElement) {
+      (firstElement as HTMLElement).focus();
+    }
+  }
+
+  // Focus last focusable element in container
+  static focusLastInContainer(container)= [
+      'a[href]',
+      'button])',
+      'input])',
+      'select])',
+      'textarea])',
+      '[tabindex]="-1"])'
+    ];
+
+    const elements = Array.from(container.querySelectorAll(focusableSelectors.join(',')));
+    const lastElement = elements[elements.length - 1];
+    if (lastElement) {
+      (lastElement as HTMLElement).focus();
+    }
+  }
+}
+
+// Export default instances
+export const focusManager = new AccessibilityFocusManager();
+export const focusRestoration = new FocusRestoration();
+
+// Export default
+export default {
+  AccessibilityFocusManager,
+  FocusTrap,
+  FocusRestoration,
+  FocusNavigation,
+  focusManager,
+  focusRestoration
+};