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

package/dist/themes/keyboard-navigation.js

@@ -1,117 +1,124 @@
 // 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,
+  TAB: 'Tab',
+  SHIFT_TAB: 'Shift+Tab',
+  ARROW_UP: 'ArrowUp',
+  ARROW_DOWN: 'ArrowDown',
+  ARROW_LEFT: 'ArrowLeft',
+  ARROW_RIGHT: 'ArrowRight',
+  HOME: 'Home',
+  END: 'End',
+  PAGE_UP: 'PageUp',
+  PAGE_DOWN: 'PageDown',
   
   // Action keys
-  ENTER,
-  SPACE,
-  ESCAPE,
-  BACKSPACE,
-  DELETE,
+  ENTER: 'Enter',
+  SPACE: ' ',
+  ESCAPE: 'Escape',
+  BACKSPACE: 'Backspace',
+  DELETE: 'Delete',
   
   // Modifier keys
-  SHIFT,
-  CTRL,
-  ALT,
-  META,
+  SHIFT: 'Shift',
+  CTRL: 'Control',
+  ALT: 'Alt',
+  META: 'Meta',
   
   // Function keys
-  F1,
-  F2,
-  F3,
-  F4,
-  F5,
-  F6,
-  F7,
-  F8,
-  F9,
-  F10,
-  F11,
-  F12} as const;
+  F1: 'F1',
+  F2: 'F2',
+  F3: 'F3',
+  F4: 'F4',
+  F5: 'F5',
+  F6: 'F6',
+  F7: 'F7',
+  F8: 'F8',
+  F9: 'F9',
+  F10: 'F10',
+  F11: 'F11',
+  F12: '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]
+  LIST: {
+    NEXT: [KEY_CODES.ARROW_DOWN, KEY_CODES.ARROW_RIGHT],
+    PREVIOUS: [KEY_CODES.ARROW_UP, KEY_CODES.ARROW_LEFT],
+    FIRST: [KEY_CODES.HOME],
+    LAST: [KEY_CODES.END],
+    SELECT: [KEY_CODES.ENTER, KEY_CODES.SPACE]
   },
   
   // Grid navigation
-  GRID],
-    PREVIOUS_ROW],
-    NEXT_COLUMN],
-    PREVIOUS_COLUMN],
-    FIRST_ROW],
-    LAST_ROW],
-    FIRST_COLUMN],
-    LAST_COLUMN]
+  GRID: {
+    NEXT_ROW: [KEY_CODES.ARROW_DOWN],
+    PREVIOUS_ROW: [KEY_CODES.ARROW_UP],
+    NEXT_COLUMN: [KEY_CODES.ARROW_RIGHT],
+    PREVIOUS_COLUMN: [KEY_CODES.ARROW_LEFT],
+    FIRST_ROW: [KEY_CODES.HOME],
+    LAST_ROW: [KEY_CODES.END],
+    FIRST_COLUMN: [KEY_CODES.CTRL + '+' + KEY_CODES.HOME],
+    LAST_COLUMN: [KEY_CODES.CTRL + '+' + KEY_CODES.END]
   },
   
   // Tree navigation
-  TREE],
-    COLLAPSE],
-    NEXT_ITEM],
-    PREVIOUS_ITEM],
-    FIRST_ITEM],
-    LAST_ITEM],
-    SELECT, KEY_CODES.SPACE]
+  TREE: {
+    EXPAND: [KEY_CODES.ARROW_RIGHT],
+    COLLAPSE: [KEY_CODES.ARROW_LEFT],
+    NEXT_ITEM: [KEY_CODES.ARROW_DOWN],
+    PREVIOUS_ITEM: [KEY_CODES.ARROW_UP],
+    FIRST_ITEM: [KEY_CODES.HOME],
+    LAST_ITEM: [KEY_CODES.END],
+    SELECT: [KEY_CODES.ENTER, KEY_CODES.SPACE]
   },
   
   // Tab navigation
-  TABS],
-    PREVIOUS_TAB],
-    FIRST_TAB],
-    LAST_TAB],
-    SELECT_TAB, KEY_CODES.SPACE]
+  TABS: {
+    NEXT_TAB: [KEY_CODES.ARROW_RIGHT],
+    PREVIOUS_TAB: [KEY_CODES.ARROW_LEFT],
+    FIRST_TAB: [KEY_CODES.HOME],
+    LAST_TAB: [KEY_CODES.END],
+    SELECT_TAB: [KEY_CODES.ENTER, 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]
+  MENU: {
+    OPEN: [KEY_CODES.ENTER, KEY_CODES.SPACE, KEY_CODES.ARROW_DOWN],
+    CLOSE: [KEY_CODES.ESCAPE],
+    NEXT_ITEM: [KEY_CODES.ARROW_DOWN],
+    PREVIOUS_ITEM: [KEY_CODES.ARROW_UP],
+    FIRST_ITEM: [KEY_CODES.HOME],
+    LAST_ITEM: [KEY_CODES.END],
+    SELECT: [KEY_CODES.ENTER, KEY_CODES.SPACE]
   },
   
   // Modal navigation
-  MODAL],
-    NEXT_FOCUS],
-    PREVIOUS_FOCUS]
+  MODAL: {
+    CLOSE: [KEY_CODES.ESCAPE],
+    NEXT_FOCUS: [KEY_CODES.TAB],
+    PREVIOUS_FOCUS: [KEY_CODES.SHIFT + '+' + KEY_CODES.TAB]
   }
 } as const;
 
 // Keyboard navigation manager
 export class KeyboardNavigationManager {
-  private focusableSelectors];
-  private currentFocusIndex;
-  private focusableElements];
-  private container;
-  private onFocusChange, index) => void) | null;
+  private focusableSelectors: string[];
+  private currentFocusIndex: number;
+  private focusableElements: HTMLElement[];
+  private container: HTMLElement | null;
+  private onFocusChange: ((element: HTMLElement, index: number) => void) | null;
 
   constructor(
-    container?,
-    focusableSelectors] = [
-      'button])',
-      'input])',
-      'select])',
-      'textarea])',
+    container?: HTMLElement,
+    focusableSelectors: string[] = [
+      'button:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      'textarea:not([disabled])',
       'a[href]',
-      '[tabindex]="-1"])',
+      '[tabindex]:not([tabindex="-1"])',
       '[contenteditable="true"]'
     ]
   ) {
@@ -125,7 +132,7 @@ export class KeyboardNavigationManager {
   }
 
   // Set container element
-  setContainer(container) {
+  setContainer(container: HTMLElement) {
     this.container = container;
     this.updateFocusableElements();
   }
@@ -147,21 +154,23 @@ export class KeyboardNavigationManager {
   }
 
   // Set focus change callback
-  onFocusChangeCallback(callback, index) => void) {
+  onFocusChangeCallback(callback: (element: HTMLElement, index: number) => void) {
     this.onFocusChange = callback;
   }
 
   // Get current focusable elements
-  getFocusableElements()] {
+  getFocusableElements(): HTMLElement[] {
     return [...this.focusableElements];
   }
 
   // Get current focus index
-  getCurrentFocusIndex();
+  getCurrentFocusIndex(): number {
+    return this.currentFocusIndex;
   }
 
   // Focus first element
-  focusFirst()=== 0) return false;
+  focusFirst(): boolean {
+    if (this.focusableElements.length === 0) return false;
     
     this.currentFocusIndex = 0;
     const element = this.focusableElements[0];
@@ -175,7 +184,8 @@ export class KeyboardNavigationManager {
   }
 
   // Focus last element
-  focusLast()=== 0) return false;
+  focusLast(): boolean {
+    if (this.focusableElements.length === 0) return false;
     
     this.currentFocusIndex = this.focusableElements.length - 1;
     const element = this.focusableElements[this.currentFocusIndex];
@@ -189,7 +199,8 @@ export class KeyboardNavigationManager {
   }
 
   // Focus next element
-  focusNext()=== 0) return false;
+  focusNext(): boolean {
+    if (this.focusableElements.length === 0) return false;
     
     const nextIndex = (this.currentFocusIndex + 1) % this.focusableElements.length;
     this.currentFocusIndex = nextIndex;
@@ -204,11 +215,12 @@ export class KeyboardNavigationManager {
   }
 
   // Focus previous element
-  focusPrevious()=== 0) return false;
+  focusPrevious(): boolean {
+    if (this.focusableElements.length === 0) return false;
     
     const prevIndex = this.currentFocusIndex <= 0 
       ? this.focusableElements.length - 1 
-      ;
+      : this.currentFocusIndex - 1;
     this.currentFocusIndex = prevIndex;
     const element = this.focusableElements[prevIndex];
     element.focus();
@@ -221,7 +233,8 @@ export class KeyboardNavigationManager {
   }
 
   // Focus element by index
-  focusByIndex(index)= this.focusableElements.length) return false;
+  focusByIndex(index: number): boolean {
+    if (index < 0 || index >= this.focusableElements.length) return false;
     
     this.currentFocusIndex = index;
     const element = this.focusableElements[index];
@@ -235,14 +248,16 @@ export class KeyboardNavigationManager {
   }
 
   // Focus element by ID
-  focusById(id)= this.focusableElements.findIndex(element => element.id === id);
+  focusById(id: string): boolean {
+    const index = 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(
+  focusByDataAttribute(attribute: string, value: string): boolean {
+    const index = this.focusableElements.findIndex(
       element => element.getAttribute(`data-${attribute}`) === value
     );
     if (index === -1) return false;
@@ -251,7 +266,8 @@ export class KeyboardNavigationManager {
   }
 
   // Handle keyboard navigation
-  handleKeyDown(event)= event.key;
+  handleKeyDown(event: KeyboardEvent): boolean {
+    const key = event.key;
     const isShift = event.shiftKey;
     const isCtrl = event.ctrlKey;
 
@@ -334,13 +350,14 @@ export class KeyboardNavigationManager {
   }
 
   // Trap focus within container (for modals, etc.)
-  trapFocus()) return;
+  trapFocus(): void {
+    if (!this.container) return;
 
     // Focus first element initially
     this.focusFirst();
 
     // Add event listener for focus trapping
-    const handleFocus = (event) => {
+    const handleFocus = (event: FocusEvent) => {
       const target = event.target as HTMLElement;
       
       // If focus is outside the container, move it back
@@ -360,33 +377,37 @@ export class KeyboardNavigationManager {
   }
 
   // Release focus trap
-  releaseFocusTrap())._focusTrapCleanup) {
+  releaseFocusTrap(): void {
+    if (this.container && (this.container as any)._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) {
+  restoreFocus(): void {
+    if (this.currentFocusIndex >= 0 && this.currentFocusIndex < this.focusableElements.length) {
       this.focusableElements[this.currentFocusIndex].focus();
     }
   }
 
   // Get keyboard shortcuts for accessibility
-  getKeyboardShortcuts(), string> {
+  getKeyboardShortcuts(): Record<string, string> {
     return {
-      'Navigate Next',
-      'Navigate Previous',
-      'Navigate First',
-      'Navigate Last',
-      'Navigate Page Up',
-      'Navigate Page Down',
-      'Select/Activate',
-      'Close/Cancel'};
+      'Navigate Next': 'Tab or Arrow Down/Right',
+      'Navigate Previous': 'Shift+Tab or Arrow Up/Left',
+      'Navigate First': 'Home',
+      'Navigate Last': 'End',
+      'Navigate Page Up': 'Page Up',
+      'Navigate Page Down': 'Page Down',
+      'Select/Activate': 'Enter or Space',
+      'Close/Cancel': 'Escape'
+    };
   }
 
   // Validate keyboard navigation
-  validateNavigation()=== 0) {
+  validateNavigation(): boolean {
+    if (this.focusableElements.length === 0) {
       console.warn('No focusable elements found in container');
       return false;
     }
@@ -398,7 +419,7 @@ export class KeyboardNavigationManager {
     });
 
     if (invalidElements.length > 0) {
-      console.warn('Some focusable elements lack proper tabindex, invalidElements);
+      console.warn('Some focusable elements lack proper tabindex:', invalidElements);
       return false;
     }
 
@@ -408,16 +429,16 @@ export class KeyboardNavigationManager {
 
 // Focus management utilities
 export class KeyboardFocusManager {
-  private previousActiveElement;
-  private focusableSelectors];
-
-  constructor(focusableSelectors] = [
-    'button])',
-    'input])',
-    'select])',
-    'textarea])',
+  private previousActiveElement: Element | null;
+  private focusableSelectors: string[];
+
+  constructor(focusableSelectors: string[] = [
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
     'a[href]',
-    '[tabindex]="-1"])',
+    '[tabindex]:not([tabindex="-1"])',
     '[contenteditable="true"]'
   ]) {
     this.previousActiveElement = null;
@@ -425,11 +446,13 @@ export class KeyboardFocusManager {
   }
 
   // Store current active element
-  storeActiveElement()= document.activeElement;
+  storeActiveElement(): void {
+    this.previousActiveElement = document.activeElement;
   }
 
   // Restore previously active element
-  restoreActiveElement()) {
+  restoreActiveElement(): boolean {
+    if (this.previousActiveElement && this.previousActiveElement instanceof HTMLElement) {
       this.previousActiveElement.focus();
       return true;
     }
@@ -437,7 +460,7 @@ export class KeyboardFocusManager {
   }
 
   // Get all focusable elements in a container
-  getFocusableElements(container)] {
+  getFocusableElements(container: HTMLElement): HTMLElement[] {
     return Array.from(
       container.querySelectorAll<HTMLElement>(this.focusableSelectors.join(','))
     ).filter(element => {
@@ -447,7 +470,8 @@ export class KeyboardFocusManager {
   }
 
   // Focus first focusable element in container
-  focusFirst(container)= this.getFocusableElements(container);
+  focusFirst(container: HTMLElement): boolean {
+    const focusableElements = this.getFocusableElements(container);
     if (focusableElements.length === 0) return false;
     
     focusableElements[0].focus();
@@ -455,7 +479,8 @@ export class KeyboardFocusManager {
   }
 
   // Focus last focusable element in container
-  focusLast(container)= this.getFocusableElements(container);
+  focusLast(container: HTMLElement): boolean {
+    const focusableElements = this.getFocusableElements(container);
     if (focusableElements.length === 0) return false;
     
     focusableElements[focusableElements.length - 1].focus();
@@ -463,7 +488,9 @@ export class KeyboardFocusManager {
   }
 
   // Check if element is focusable
-  isFocusable(element)= this.focusableSelectors.some(selector => {
+  isFocusable(element: HTMLElement): boolean {
+    // Check if element matches focusable selectors
+    const isSelectorMatch = this.focusableSelectors.some(selector => {
       try {
         return element.matches(selector);
       } catch {
@@ -484,7 +511,8 @@ export class KeyboardFocusManager {
   }
 
   // Get next focusable element
-  getNextFocusableElement(currentElement, container)= this.getFocusableElements(container);
+  getNextFocusableElement(currentElement: HTMLElement, container: HTMLElement): HTMLElement | null {
+    const focusableElements = this.getFocusableElements(container);
     const currentIndex = focusableElements.indexOf(currentElement);
     
     if (currentIndex === -1 || currentIndex === focusableElements.length - 1) {
@@ -495,7 +523,8 @@ export class KeyboardFocusManager {
   }
 
   // Get previous focusable element
-  getPreviousFocusableElement(currentElement, container)= this.getFocusableElements(container);
+  getPreviousFocusableElement(currentElement: HTMLElement, container: HTMLElement): HTMLElement | null {
+    const focusableElements = this.getFocusableElements(container);
     const currentIndex = focusableElements.indexOf(currentElement);
     
     if (currentIndex === -1 || currentIndex === 0) {