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

package/dist/themes/keyboard-navigation.js

@@ -0,0 +1,521 @@
+// Keyboard key constants
+export const KEY_CODES = {
+  // Navigation keys
+  TAB,
+  SHIFT_TAB,
+  ARROW_UP,
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  HOME,
+  END,
+  PAGE_UP,
+  PAGE_DOWN,
+  
+  // Action keys
+  ENTER,
+  SPACE,
+  ESCAPE,
+  BACKSPACE,
+  DELETE,
+  
+  // Modifier keys
+  SHIFT,
+  CTRL,
+  ALT,
+  META,
+  
+  // Function keys
+  F1,
+  F2,
+  F3,
+  F4,
+  F5,
+  F6,
+  F7,
+  F8,
+  F9,
+  F10,
+  F11,
+  F12} as const;
+
+// Keyboard navigation patterns
+export const NAVIGATION_PATTERNS = {
+  // List navigation
+  LIST, KEY_CODES.ARROW_RIGHT],
+    PREVIOUS, KEY_CODES.ARROW_LEFT],
+    FIRST],
+    LAST],
+    SELECT, KEY_CODES.SPACE]
+  },
+  
+  // Grid navigation
+  GRID],
+    PREVIOUS_ROW],
+    NEXT_COLUMN],
+    PREVIOUS_COLUMN],
+    FIRST_ROW],
+    LAST_ROW],
+    FIRST_COLUMN],
+    LAST_COLUMN]
+  },
+  
+  // Tree navigation
+  TREE],
+    COLLAPSE],
+    NEXT_ITEM],
+    PREVIOUS_ITEM],
+    FIRST_ITEM],
+    LAST_ITEM],
+    SELECT, KEY_CODES.SPACE]
+  },
+  
+  // Tab navigation
+  TABS],
+    PREVIOUS_TAB],
+    FIRST_TAB],
+    LAST_TAB],
+    SELECT_TAB, KEY_CODES.SPACE]
+  },
+  
+  // Menu navigation
+  MENU, KEY_CODES.SPACE, KEY_CODES.ARROW_DOWN],
+    CLOSE],
+    NEXT_ITEM],
+    PREVIOUS_ITEM],
+    FIRST_ITEM],
+    LAST_ITEM],
+    SELECT, KEY_CODES.SPACE]
+  },
+  
+  // Modal navigation
+  MODAL],
+    NEXT_FOCUS],
+    PREVIOUS_FOCUS]
+  }
+} as const;
+
+// Keyboard navigation manager
+export class KeyboardNavigationManager {
+  private focusableSelectors];
+  private currentFocusIndex;
+  private focusableElements];
+  private container;
+  private onFocusChange, index) => void) | null;
+
+  constructor(
+    container?,
+    focusableSelectors] = [
+      'button])',
+      'input])',
+      'select])',
+      'textarea])',
+      'a[href]',
+      '[tabindex]="-1"])',
+      '[contenteditable="true"]'
+    ]
+  ) {
+    this.container = container || null;
+    this.focusableSelectors = focusableSelectors;
+    this.currentFocusIndex = -1;
+    this.focusableElements = [];
+    this.onFocusChange = null;
+    
+    this.updateFocusableElements();
+  }
+
+  // Set container element
+  setContainer(container) {
+    this.container = container;
+    this.updateFocusableElements();
+  }
+
+  // Update list of focusable elements
+  updateFocusableElements() {
+    if (!this.container) return;
+    
+    this.focusableElements = Array.from(
+      this.container.querySelectorAll<HTMLElement>(this.focusableSelectors.join(','))
+    ).filter(element => {
+      // Filter out hidden elements
+      const style = window.getComputedStyle(element);
+      return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    
+    // Reset focus index
+    this.currentFocusIndex = -1;
+  }
+
+  // Set focus change callback
+  onFocusChangeCallback(callback, index) => void) {
+    this.onFocusChange = callback;
+  }
+
+  // Get current focusable elements
+  getFocusableElements()] {
+    return [...this.focusableElements];
+  }
+
+  // Get current focus index
+  getCurrentFocusIndex();
+  }
+
+  // Focus first element
+  focusFirst()=== 0) return false;
+    
+    this.currentFocusIndex = 0;
+    const element = this.focusableElements[0];
+    element.focus();
+    
+    if (this.onFocusChange) {
+      this.onFocusChange(element, 0);
+    }
+    
+    return true;
+  }
+
+  // Focus last element
+  focusLast()=== 0) return false;
+    
+    this.currentFocusIndex = this.focusableElements.length - 1;
+    const element = this.focusableElements[this.currentFocusIndex];
+    element.focus();
+    
+    if (this.onFocusChange) {
+      this.onFocusChange(element, this.currentFocusIndex);
+    }
+    
+    return true;
+  }
+
+  // Focus next element
+  focusNext()=== 0) return false;
+    
+    const nextIndex = (this.currentFocusIndex + 1) % this.focusableElements.length;
+    this.currentFocusIndex = nextIndex;
+    const element = this.focusableElements[nextIndex];
+    element.focus();
+    
+    if (this.onFocusChange) {
+      this.onFocusChange(element, nextIndex);
+    }
+    
+    return true;
+  }
+
+  // Focus previous element
+  focusPrevious()=== 0) return false;
+    
+    const prevIndex = this.currentFocusIndex <= 0 
+      ? this.focusableElements.length - 1 
+      ;
+    this.currentFocusIndex = prevIndex;
+    const element = this.focusableElements[prevIndex];
+    element.focus();
+    
+    if (this.onFocusChange) {
+      this.onFocusChange(element, prevIndex);
+    }
+    
+    return true;
+  }
+
+  // Focus element by index
+  focusByIndex(index)= this.focusableElements.length) return false;
+    
+    this.currentFocusIndex = index;
+    const element = this.focusableElements[index];
+    element.focus();
+    
+    if (this.onFocusChange) {
+      this.onFocusChange(element, index);
+    }
+    
+    return true;
+  }
+
+  // Focus element by ID
+  focusById(id)= this.focusableElements.findIndex(element => element.id === id);
+    if (index === -1) return false;
+    
+    return this.focusByIndex(index);
+  }
+
+  // Focus element by data attribute
+  focusByDataAttribute(attribute, value)= this.focusableElements.findIndex(
+      element => element.getAttribute(`data-${attribute}`) === value
+    );
+    if (index === -1) return false;
+    
+    return this.focusByIndex(index);
+  }
+
+  // Handle keyboard navigation
+  handleKeyDown(event)= event.key;
+    const isShift = event.shiftKey;
+    const isCtrl = event.ctrlKey;
+
+    // Handle Tab navigation
+    if (key === KEY_CODES.TAB) {
+      if (isShift) {
+        return this.focusPrevious();
+      } else {
+        return this.focusNext();
+      }
+    }
+
+    // Handle arrow key navigation
+    if (key === KEY_CODES.ARROW_DOWN || key === KEY_CODES.ARROW_RIGHT) {
+      event.preventDefault();
+      return this.focusNext();
+    }
+
+    if (key === KEY_CODES.ARROW_UP || key === KEY_CODES.ARROW_LEFT) {
+      event.preventDefault();
+      return this.focusPrevious();
+    }
+
+    // Handle Home/End navigation
+    if (key === KEY_CODES.HOME) {
+      event.preventDefault();
+      if (isCtrl) {
+        return this.focusFirst();
+      }
+      return this.focusFirst();
+    }
+
+    if (key === KEY_CODES.END) {
+      event.preventDefault();
+      if (isCtrl) {
+        return this.focusLast();
+      }
+      return this.focusLast();
+    }
+
+    // Handle Page Up/Down navigation
+    if (key === KEY_CODES.PAGE_UP) {
+      event.preventDefault();
+      // Jump to previous page of elements
+      const pageSize = Math.max(1, Math.floor(this.focusableElements.length / 10));
+      const targetIndex = Math.max(0, this.currentFocusIndex - pageSize);
+      return this.focusByIndex(targetIndex);
+    }
+
+    if (key === KEY_CODES.PAGE_DOWN) {
+      event.preventDefault();
+      // Jump to next page of elements
+      const pageSize = Math.max(1, Math.floor(this.focusableElements.length / 10));
+      const targetIndex = Math.min(
+        this.focusableElements.length - 1, 
+        this.currentFocusIndex + pageSize
+      );
+      return this.focusByIndex(targetIndex);
+    }
+
+    // Handle Enter/Space for selection
+    if (key === KEY_CODES.ENTER || key === KEY_CODES.SPACE) {
+      if (this.currentFocusIndex >= 0) {
+        const element = this.focusableElements[this.currentFocusIndex];
+        // Trigger click or submit event
+        if (element.tagName === 'BUTTON' || element.tagName === 'A') {
+          element.click();
+          return true;
+        }
+      }
+    }
+
+    // Handle Escape for closing/canceling
+    if (key === KEY_CODES.ESCAPE) {
+      // This could trigger a close action depending on context
+      return false;
+    }
+
+    return false;
+  }
+
+  // Trap focus within container (for modals, etc.)
+  trapFocus()) return;
+
+    // Focus first element initially
+    this.focusFirst();
+
+    // Add event listener for focus trapping
+    const handleFocus = (event) => {
+      const target = event.target as HTMLElement;
+      
+      // If focus is outside the container, move it back
+      if (!this.container?.contains(target)) {
+        if (this.focusableElements.length > 0) {
+          this.focusFirst();
+        }
+      }
+    };
+
+    this.container.addEventListener('focusin', handleFocus);
+    
+    // Store cleanup function
+    (this.container as any)._focusTrapCleanup = () => {
+      this.container?.removeEventListener('focusin', handleFocus);
+    };
+  }
+
+  // Release focus trap
+  releaseFocusTrap())._focusTrapCleanup) {
+      (this.container as any)._focusTrapCleanup();
+      delete (this.container as any)._focusTrapCleanup;
+    }
+  }
+
+  // Restore focus to previously focused element
+  restoreFocus()= 0 && this.currentFocusIndex < this.focusableElements.length) {
+      this.focusableElements[this.currentFocusIndex].focus();
+    }
+  }
+
+  // Get keyboard shortcuts for accessibility
+  getKeyboardShortcuts(), string> {
+    return {
+      'Navigate Next',
+      'Navigate Previous',
+      'Navigate First',
+      'Navigate Last',
+      'Navigate Page Up',
+      'Navigate Page Down',
+      'Select/Activate',
+      'Close/Cancel'};
+  }
+
+  // Validate keyboard navigation
+  validateNavigation()=== 0) {
+      console.warn('No focusable elements found in container');
+      return false;
+    }
+
+    // Check if all focusable elements have proper tabindex
+    const invalidElements = this.focusableElements.filter(element => {
+      const tabindex = element.getAttribute('tabindex');
+      return tabindex === null || tabindex === '';
+    });
+
+    if (invalidElements.length > 0) {
+      console.warn('Some focusable elements lack proper tabindex, invalidElements);
+      return false;
+    }
+
+    return true;
+  }
+}
+
+// Focus management utilities
+export class KeyboardFocusManager {
+  private previousActiveElement;
+  private focusableSelectors];
+
+  constructor(focusableSelectors] = [
+    'button])',
+    'input])',
+    'select])',
+    'textarea])',
+    'a[href]',
+    '[tabindex]="-1"])',
+    '[contenteditable="true"]'
+  ]) {
+    this.previousActiveElement = null;
+    this.focusableSelectors = focusableSelectors;
+  }
+
+  // Store current active element
+  storeActiveElement()= document.activeElement;
+  }
+
+  // Restore previously active element
+  restoreActiveElement()) {
+      this.previousActiveElement.focus();
+      return true;
+    }
+    return false;
+  }
+
+  // Get all focusable elements in a container
+  getFocusableElements(container)] {
+    return Array.from(
+      container.querySelectorAll<HTMLElement>(this.focusableSelectors.join(','))
+    ).filter(element => {
+      const style = window.getComputedStyle(element);
+      return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+  }
+
+  // Focus first focusable element in container
+  focusFirst(container)= this.getFocusableElements(container);
+    if (focusableElements.length === 0) return false;
+    
+    focusableElements[0].focus();
+    return true;
+  }
+
+  // Focus last focusable element in container
+  focusLast(container)= this.getFocusableElements(container);
+    if (focusableElements.length === 0) return false;
+    
+    focusableElements[focusableElements.length - 1].focus();
+    return true;
+  }
+
+  // Check if element is focusable
+  isFocusable(element)= this.focusableSelectors.some(selector => {
+      try {
+        return element.matches(selector);
+      } catch {
+        return false;
+      }
+    });
+
+    if (!isSelectorMatch) return false;
+
+    // Check if element is visible
+    const style = window.getComputedStyle(element);
+    if (style.display === 'none' || style.visibility === 'hidden') return false;
+
+    // Check if element is not disabled
+    if (element.hasAttribute('disabled')) return false;
+
+    return true;
+  }
+
+  // Get next focusable element
+  getNextFocusableElement(currentElement, container)= this.getFocusableElements(container);
+    const currentIndex = focusableElements.indexOf(currentElement);
+    
+    if (currentIndex === -1 || currentIndex === focusableElements.length - 1) {
+      return focusableElements[0] || null;
+    }
+    
+    return focusableElements[currentIndex + 1];
+  }
+
+  // Get previous focusable element
+  getPreviousFocusableElement(currentElement, container)= this.getFocusableElements(container);
+    const currentIndex = focusableElements.indexOf(currentElement);
+    
+    if (currentIndex === -1 || currentIndex === 0) {
+      return focusableElements[focusableElements.length - 1] || null;
+    }
+    
+    return focusableElements[currentIndex - 1];
+  }
+}
+
+// Export default instances
+export const keyboardNavigationManager = new KeyboardNavigationManager();
+export const focusManager = new KeyboardFocusManager();
+
+// Export default
+export default {
+  KeyboardNavigationManager,
+  KeyboardFocusManager,
+  KEY_CODES,
+  NAVIGATION_PATTERNS,
+  keyboardNavigationManager,
+  focusManager
+};