@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/themes/accessibility.ts

@@ -0,0 +1,259 @@
+// Accessibility theme configuration interface
+export interface AccessibilityThemeConfig {
+  highContrast: boolean;
+  reducedMotion: boolean;
+  focusVisible: boolean;
+  ariaLabels: Record<string, string>;
+  keyboardShortcuts: Record<string, string>;
+  focusRing: {
+    color: string;
+    width: string;
+    style: 'solid' | 'dashed' | 'dotted';
+    offset: string;
+  };
+  motion: {
+    duration: {
+      fast: string;
+      normal: string;
+      slow: string;
+    };
+    easing: {
+      ease: string;
+      easeIn: string;
+      easeOut: string;
+      easeInOut: string;
+    };
+  };
+  contrast: {
+    minimum: number; // WCAG AA minimum contrast ratio
+    enhanced: number; // WCAG AAA enhanced contrast ratio
+    target: number; // Target contrast ratio for the theme
+  };
+  spacing: {
+    focusRing: string;
+    touchTarget: string; // Minimum touch target size
+  };
+}
+
+// Default accessibility configuration
+export const defaultAccessibilityConfig: AccessibilityThemeConfig = {
+  highContrast: false,
+  reducedMotion: false,
+  focusVisible: true,
+  ariaLabels: {
+    close: 'Close',
+    open: 'Open',
+    expand: 'Expand',
+    collapse: 'Collapse',
+    next: 'Next',
+    previous: 'Previous',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    loading: 'Loading',
+    error: 'Error',
+    success: 'Success',
+    warning: 'Warning',
+    info: 'Information'
+  },
+  keyboardShortcuts: {
+    close: 'Escape',
+    submit: 'Enter',
+    cancel: 'Escape',
+    next: 'Tab',
+    previous: 'Shift+Tab',
+    expand: 'Space or Enter',
+    collapse: 'Space or Enter'
+  },
+  focusRing: {
+    color: '#3b82f6',
+    width: '2px',
+    style: 'solid',
+    offset: '2px'
+  },
+  motion: {
+    duration: {
+      fast: '150ms',
+      normal: '300ms',
+      slow: '500ms'
+    },
+    easing: {
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out'
+    }
+  },
+  contrast: {
+    minimum: 4.5, // WCAG AA minimum
+    enhanced: 7.0, // WCAG AAA enhanced
+    target: 4.5
+  },
+  spacing: {
+    focusRing: '2px',
+    touchTarget: '44px'
+  }
+};
+
+// High contrast accessibility configuration
+export const highContrastAccessibilityConfig: AccessibilityThemeConfig = {
+  ...defaultAccessibilityConfig,
+  highContrast: true,
+  focusRing: {
+    color: '#ffffff',
+    width: '3px',
+    style: 'solid',
+    offset: '1px'
+  },
+  contrast: {
+    minimum: 7.0,
+    enhanced: 7.0,
+    target: 7.0
+  }
+};
+
+// Reduced motion accessibility configuration
+export const reducedMotionAccessibilityConfig: AccessibilityThemeConfig = {
+  ...defaultAccessibilityConfig,
+  reducedMotion: true,
+  motion: {
+    duration: {
+      fast: '0ms',
+      normal: '0ms',
+      slow: '0ms'
+    },
+    easing: {
+      ease: 'linear',
+      easeIn: 'linear',
+      easeOut: 'linear',
+      easeInOut: 'linear'
+    }
+  }
+};
+
+// Accessibility theme manager
+export class AccessibilityThemeManager {
+  private config: AccessibilityThemeConfig;
+  private listeners: Set<(config: AccessibilityThemeConfig) => void>;
+
+  constructor(initialConfig: AccessibilityThemeConfig = defaultAccessibilityConfig) {
+    this.config = initialConfig;
+    this.listeners = new Set();
+    this.initializeSystemPreferences();
+  }
+
+  // Initialize system preferences
+  private initializeSystemPreferences() {
+    // Check for system high contrast preference
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const highContrastQuery = window.matchMedia('(prefers-contrast: high)');
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+      this.updateFromSystemPreferences(highContrastQuery.matches, reducedMotionQuery.matches);
+
+      // Listen for changes
+      highContrastQuery.addEventListener('change', (e) => {
+        this.updateFromSystemPreferences(e.matches, this.config.reducedMotion);
+      });
+
+      reducedMotionQuery.addEventListener('change', (e) => {
+        this.updateFromSystemPreferences(this.config.highContrast, e.matches);
+      });
+    }
+  }
+
+  // Update configuration based on system preferences
+  private updateFromSystemPreferences(highContrast: boolean, reducedMotion: boolean) {
+    let newConfig = { ...this.config };
+
+    if (highContrast) {
+      newConfig = { ...newConfig, ...highContrastAccessibilityConfig };
+    }
+
+    if (reducedMotion) {
+      newConfig = { ...newConfig, ...reducedMotionAccessibilityConfig };
+    }
+
+    this.updateConfig(newConfig);
+  }
+
+  // Get current accessibility configuration
+  getConfig(): AccessibilityThemeConfig {
+    return { ...this.config };
+  }
+
+  // Update accessibility configuration
+  updateConfig(newConfig: Partial<AccessibilityThemeConfig>) {
+    this.config = { ...this.config, ...newConfig };
+    this.notifyListeners();
+  }
+
+  // Subscribe to accessibility configuration changes
+  subscribe(listener: (config: AccessibilityThemeConfig) => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  // Notify all listeners of configuration changes
+  private notifyListeners() {
+    this.listeners.forEach(listener => listener(this.config));
+  }
+
+  // Get CSS custom properties for accessibility
+  getCSSProperties(): Record<string, string> {
+    const { focusRing, motion, spacing } = this.config;
+    
+    return {
+      '--focus-ring-color': focusRing.color,
+      '--focus-ring-width': focusRing.width,
+      '--focus-ring-style': focusRing.style,
+      '--focus-ring-offset': focusRing.offset,
+      '--motion-duration-fast': motion.duration.fast,
+      '--motion-duration-normal': motion.duration.normal,
+      '--motion-duration-slow': motion.duration.slow,
+      '--motion-easing-ease': motion.easing.ease,
+      '--motion-easing-ease-in': motion.easing.easeIn,
+      '--motion-easing-ease-out': motion.easing.easeOut,
+      '--motion-easing-ease-in-out': motion.easing.easeInOut,
+      '--spacing-focus-ring': spacing.focusRing,
+      '--spacing-touch-target': spacing.touchTarget
+    };
+  }
+
+  // Check if high contrast mode is enabled
+  isHighContrast(): boolean {
+    return this.config.highContrast;
+  }
+
+  // Check if reduced motion is enabled
+  isReducedMotion(): boolean {
+    return this.config.reducedMotion;
+  }
+
+  // Check if focus visible is enabled
+  isFocusVisible(): boolean {
+    return this.config.focusVisible;
+  }
+
+  // Get ARIA label for a specific key
+  getAriaLabel(key: string): string {
+    return this.config.ariaLabels[key] || key;
+  }
+
+  // Get keyboard shortcut for a specific action
+  getKeyboardShortcut(action: string): string {
+    return this.config.keyboardShortcuts[action] || '';
+  }
+
+  // Validate contrast ratio
+  validateContrastRatio(_foreground: string, _background: string): boolean {
+    // This would implement actual contrast ratio calculation
+    // For now, return true as placeholder
+    return true;
+  }
+}
+
+// Create and export default accessibility manager instance
+export const accessibilityManager = new AccessibilityThemeManager();
+
+// Export default configuration
+export default defaultAccessibilityConfig;

package/src/themes/aria-patterns.ts

@@ -0,0 +1,420 @@
+import { accessibilityManager } from './accessibility';
+
+// ARIA role definitions
+export const ARIA_ROLES = {
+  // Landmark roles
+  banner: 'banner',
+  complementary: 'complementary',
+  contentinfo: 'contentinfo',
+  form: 'form',
+  main: 'main',
+  navigation: 'navigation',
+  region: 'region',
+  search: 'search',
+  
+  // Widget roles
+  button: 'button',
+  checkbox: 'checkbox',
+  gridcell: 'gridcell',
+  link: 'link',
+  menuitem: 'menuitem',
+  menuitemcheckbox: 'menuitemcheckbox',
+  menuitemradio: 'menuitemradio',
+  option: 'option',
+  progressbar: 'progressbar',
+  radio: 'radio',
+  scrollbar: 'scrollbar',
+  searchbox: 'searchbox',
+  slider: 'slider',
+  spinbutton: 'spinbutton',
+  switch: 'switch',
+  tab: 'tab',
+  tabpanel: 'tabpanel',
+  textbox: 'textbox',
+  treeitem: 'treeitem',
+  
+  // Document structure roles
+  article: 'article',
+  cell: 'cell',
+  columnheader: 'columnheader',
+  definition: 'definition',
+  directory: 'directory',
+  document: 'document',
+  group: 'group',
+  heading: 'heading',
+  img: 'img',
+  list: 'list',
+  listitem: 'listitem',
+  math: 'math',
+  note: 'note',
+  presentation: 'presentation',
+  row: 'row',
+  rowgroup: 'rowgroup',
+  rowheader: 'rowheader',
+  separator: 'separator',
+  table: 'table',
+  term: 'term',
+  toolbar: 'toolbar',
+  tooltip: 'tooltip',
+  tree: 'tree',
+  treegrid: 'treegrid'
+} as const;
+
+// ARIA state and property definitions
+export const ARIA_STATES = {
+  // Boolean states
+  ariaExpanded: 'aria-expanded',
+  ariaHidden: 'aria-hidden',
+  ariaPressed: 'aria-pressed',
+  ariaSelected: 'aria-selected',
+  ariaChecked: 'aria-checked',
+  ariaDisabled: 'aria-disabled',
+  ariaReadonly: 'aria-readonly',
+  ariaRequired: 'aria-required',
+  ariaInvalid: 'aria-invalid',
+  ariaBusy: 'aria-busy',
+  ariaCurrent: 'aria-current',
+  ariaLive: 'aria-live',
+  ariaAtomic: 'aria-atomic',
+  ariaRelevant: 'aria-relevant',
+  ariaSort: 'aria-sort',
+  ariaGrabbed: 'aria-grabbed',
+  ariaDropeffect: 'aria-dropeffect',
+  ariaActivedescendant: 'aria-activedescendant',
+  ariaControls: 'aria-controls',
+  ariaDescribedby: 'aria-describedby',
+  ariaFlowto: 'aria-flowto',
+  ariaLabelledby: 'aria-labelledby',
+  ariaOwns: 'aria-owns',
+  ariaPosinset: 'aria-posinset',
+  ariaSetsize: 'aria-setsize',
+  ariaValuemin: 'aria-valuemin',
+  ariaValuemax: 'aria-valuemax',
+  ariaValuenow: 'aria-valuenow',
+  ariaValuetext: 'aria-valuetext',
+  ariaLevel: 'aria-level',
+  ariaMultiselectable: 'aria-multiselectable',
+  ariaOrientation: 'aria-orientation',
+  ariaColcount: 'aria-colcount',
+  ariaColindex: 'aria-colindex',
+  ariaRowcount: 'aria-rowcount',
+  ariaRowindex: 'aria-rowindex',
+  ariaColspan: 'aria-colspan',
+  ariaRowspan: 'aria-rowspan'
+} as const;
+
+// ARIA live region values
+export const ARIA_LIVE_VALUES = {
+  off: 'off',
+  polite: 'polite',
+  assertive: 'assertive'
+} as const;
+
+// ARIA current values
+export const ARIA_CURRENT_VALUES = {
+  page: 'page',
+  step: 'step',
+  location: 'location',
+  date: 'date',
+  time: 'time',
+  true: 'true',
+  false: 'false'
+} as const;
+
+// ARIA sort values
+export const ARIA_SORT_VALUES = {
+  ascending: 'ascending',
+  descending: 'descending',
+  none: 'none',
+  other: 'other'
+} as const;
+
+// ARIA orientation values
+export const ARIA_ORIENTATION_VALUES = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+} as const;
+
+// ARIA pattern utilities
+export class ARIAUtils {
+  // Generate ARIA attributes object
+  static generateAriaAttributes(attributes: Record<string, any>): Record<string, any> {
+    const ariaAttributes: Record<string, any> = {};
+    
+    Object.entries(attributes).forEach(([key, value]) => {
+      if (key.startsWith('aria') && value !== undefined && value !== null) {
+        ariaAttributes[key] = value;
+      }
+    });
+    
+    return ariaAttributes;
+  }
+
+  // Generate proper ARIA label
+  static generateAriaLabel(label?: string, fallback?: string): string | undefined {
+    if (label) return label;
+    if (fallback) return accessibilityManager.getAriaLabel(fallback);
+    return undefined;
+  }
+
+  // Generate ARIA describedby
+  static generateAriaDescribedby(description?: string, id?: string): string | undefined {
+    if (description && id) return id;
+    return undefined;
+  }
+
+  // Generate ARIA controls
+  static generateAriaControls(controlledId?: string): string | undefined {
+    return controlledId;
+  }
+
+  // Generate ARIA expanded state
+  static generateAriaExpanded(expanded?: boolean): boolean | undefined {
+    return expanded;
+  }
+
+  // Generate ARIA pressed state
+  static generateAriaPressed(pressed?: boolean): boolean | undefined {
+    return pressed;
+  }
+
+  // Generate ARIA selected state
+  static generateAriaSelected(selected?: boolean): boolean | undefined {
+    return selected;
+  }
+
+  // Generate ARIA checked state
+  static generateAriaChecked(checked?: boolean, indeterminate?: boolean): string | boolean | undefined {
+    if (indeterminate) return 'mixed';
+    return checked;
+  }
+
+  // Generate ARIA disabled state
+  static generateAriaDisabled(disabled?: boolean): boolean | undefined {
+    return disabled;
+  }
+
+  // Generate ARIA readonly state
+  static generateAriaReadonly(readonly?: boolean): boolean | undefined {
+    return readonly;
+  }
+
+  // Generate ARIA required state
+  static generateAriaRequired(required?: boolean): boolean | undefined {
+    return required;
+  }
+
+  // Generate ARIA invalid state
+  static generateAriaInvalid(invalid?: boolean, errorMessage?: string): boolean | 'grammar' | 'spelling' | undefined {
+    if (errorMessage) return true;
+    return invalid;
+  }
+
+  // Generate ARIA live region
+  static generateAriaLive(live?: keyof typeof ARIA_LIVE_VALUES, _atomic?: boolean): string | undefined {
+    return live;
+  }
+
+  // Generate ARIA current
+  static generateAriaCurrent(current?: keyof typeof ARIA_CURRENT_VALUES): string | undefined {
+    return current;
+  }
+
+  // Generate ARIA sort
+  static generateAriaSort(sort?: keyof typeof ARIA_SORT_VALUES): string | undefined {
+    return sort;
+  }
+
+  // Generate ARIA orientation
+  static generateAriaOrientation(orientation?: keyof typeof ARIA_ORIENTATION_VALUES): string | undefined {
+    return orientation;
+  }
+
+  // Generate ARIA value attributes for range inputs
+  static generateAriaValueAttributes(
+    value?: number,
+    min?: number,
+    max?: number,
+    _step?: number
+  ): Record<string, any> {
+    const ariaAttributes: Record<string, any> = {};
+    
+    if (value !== undefined) ariaAttributes['aria-valuenow'] = value;
+    if (min !== undefined) ariaAttributes['aria-valuemin'] = min;
+    if (max !== undefined) ariaAttributes['aria-valuemax'] = max;
+    
+    return ariaAttributes;
+  }
+
+  // Generate ARIA position and size attributes for list items
+  static generateAriaPositionAttributes(
+    position: number,
+    total: number
+  ): Record<string, any> {
+    return {
+      'aria-posinset': position,
+      'aria-setsize': total
+    };
+  }
+
+  // Generate ARIA level for headings and tree items
+  static generateAriaLevel(level: number): Record<string, any> {
+    return {
+      'aria-level': level
+    };
+  }
+
+  // Generate ARIA multiselectable for selection components
+  static generateAriaMultiselectable(multiselectable: boolean): Record<string, any> {
+    return {
+      'aria-multiselectable': multiselectable
+    };
+  }
+
+  // Generate ARIA col/row attributes for table cells
+  static generateAriaTableAttributes(
+    colIndex?: number,
+    rowIndex?: number,
+    colSpan?: number,
+    rowSpan?: number
+  ): Record<string, any> {
+    const ariaAttributes: Record<string, any> = {};
+    
+    if (colIndex !== undefined) ariaAttributes['aria-colindex'] = colIndex;
+    if (rowIndex !== undefined) ariaAttributes['aria-rowindex'] = rowIndex;
+    if (colSpan !== undefined) ariaAttributes['aria-colspan'] = colSpan;
+    if (rowSpan !== undefined) ariaAttributes['aria-rowspan'] = rowSpan;
+    
+    return ariaAttributes;
+  }
+
+  // Generate ARIA count attributes for tables
+  static generateAriaCountAttributes(
+    colCount?: number,
+    rowCount?: number
+  ): Record<string, any> {
+    const ariaAttributes: Record<string, any> = {};
+    
+    if (colCount !== undefined) ariaAttributes['aria-colcount'] = colCount;
+    if (rowCount !== undefined) ariaAttributes['aria-rowcount'] = rowCount;
+    
+    return ariaAttributes;
+  }
+
+  // Generate ARIA grabbed and dropeffect for drag and drop
+  static generateAriaDragDrop(
+    grabbed?: boolean,
+    dropEffect?: string
+  ): Record<string, any> {
+    const ariaAttributes: Record<string, any> = {};
+    
+    if (grabbed !== undefined) ariaAttributes['aria-grabbed'] = grabbed;
+    if (dropEffect) ariaAttributes['aria-dropeffect'] = dropEffect;
+    
+    return ariaAttributes;
+  }
+
+  // Generate ARIA active descendant for composite widgets
+  static generateAriaActiveDescendant(activeDescendantId?: string): Record<string, any> {
+    if (!activeDescendantId) return {};
+    
+    return {
+      'aria-activedescendant': activeDescendantId
+    };
+  }
+
+  // Generate ARIA owns for composite widgets
+  static generateAriaOwns(ownedIds?: string[]): Record<string, any> {
+    if (!ownedIds || ownedIds.length === 0) return {};
+    
+    return {
+      'aria-owns': ownedIds.join(' ')
+    };
+  }
+
+  // Generate ARIA flowto for composite widgets
+  static generateAriaFlowTo(flowToIds?: string[]): Record<string, any> {
+    if (!flowToIds || flowToIds.length === 0) return {};
+    
+    return {
+      'aria-flowto': flowToIds.join(' ')
+    };
+  }
+
+  // Generate ARIA controls for composite widgets
+  static generateAriaControlsMultiple(controlIds?: string[]): Record<string, any> {
+    if (!controlIds || controlIds.length === 0) return {};
+    
+    return {
+      'aria-controls': controlIds.join(' ')
+    };
+  }
+
+  // Generate ARIA describedby for multiple descriptions
+  static generateAriaDescribedbyMultiple(descriptionIds?: string[]): Record<string, any> {
+    if (!descriptionIds || descriptionIds.length === 0) return {};
+    
+    return {
+      'aria-describedby': descriptionIds.join(' ')
+    };
+  }
+
+  // Generate ARIA labelledby for multiple labels
+  static generateAriaLabelledbyMultiple(labelIds?: string[]): Record<string, any> {
+    if (!labelIds || labelIds.length === 0) return {};
+    
+    return {
+      'aria-labelledby': labelIds.join(' ')
+    };
+  }
+
+  // Validate ARIA attributes
+  static validateAriaAttributes(attributes: Record<string, any>): boolean {
+    // Basic validation - check if required attributes are present
+    // This is a simplified validation - in production you might want more comprehensive checks
+    
+    for (const [key, value] of Object.entries(attributes)) {
+      if (key.startsWith('aria-')) {
+        // Check if value is not undefined or null
+        if (value === undefined || value === null) {
+          console.warn(`ARIA attribute ${key} has invalid value: ${value}`);
+          return false;
+        }
+      }
+    }
+    
+    return true;
+  }
+
+  // Get accessible name for an element
+  static getAccessibleName(element: HTMLElement): string {
+    // Priority order: aria-labelledby, aria-label, title, text content
+    const labelledby = element.getAttribute('aria-labelledby');
+    if (labelledby) {
+      const labelElement = document.getElementById(labelledby);
+      if (labelElement) return labelElement.textContent || '';
+    }
+    
+    const label = element.getAttribute('aria-label');
+    if (label) return label;
+    
+    const title = element.getAttribute('title');
+    if (title) return title;
+    
+    return element.textContent || '';
+  }
+
+  // Get accessible description for an element
+  static getAccessibleDescription(element: HTMLElement): string {
+    const describedby = element.getAttribute('aria-describedby');
+    if (describedby) {
+      const descElement = document.getElementById(describedby);
+      if (descElement) return descElement.textContent || '';
+    }
+    
+    return '';
+  }
+}
+
+// Export default ARIA utilities instance
+export default ARIAUtils;