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

package/dist/themes/accessibility.js

@@ -0,0 +1,220 @@
+// Accessibility theme configuration interface
+export interface AccessibilityThemeConfig {
+  highContrast;
+  reducedMotion;
+  focusVisible;
+  ariaLabels, string>;
+  keyboardShortcuts, string>;
+  focusRing;
+    width;
+    style;
+    offset;
+  };
+  motion;
+      normal;
+      slow;
+    };
+    easing;
+      easeIn;
+      easeOut;
+      easeInOut;
+    };
+  };
+  contrast; // WCAG AA minimum contrast ratio
+    enhanced; // WCAG AAA enhanced contrast ratio
+    target; // Target contrast ratio for the theme
+  };
+  spacing;
+    touchTarget; // Minimum touch target size
+  };
+}
+
+// Default accessibility configuration
+export const defaultAccessibilityConfig= {
+  highContrast,
+  reducedMotion,
+  focusVisible,
+  ariaLabels,
+    open,
+    expand,
+    collapse,
+    next,
+    previous,
+    submit,
+    cancel,
+    loading,
+    error,
+    success,
+    warning,
+    info},
+  keyboardShortcuts,
+    submit,
+    cancel,
+    next,
+    previous,
+    expand,
+    collapse},
+  focusRing,
+    width,
+    style,
+    offset},
+  motion,
+      normal,
+      slow},
+    easing,
+      easeIn,
+      easeOut,
+      easeInOut}
+  },
+  contrast, // WCAG AA minimum
+    enhanced, // WCAG AAA enhanced
+    target},
+  spacing,
+    touchTarget}
+};
+
+// High contrast accessibility configuration
+export const highContrastAccessibilityConfig= {
+  ...defaultAccessibilityConfig,
+  highContrast,
+  focusRing,
+    width,
+    style,
+    offset},
+  contrast,
+    enhanced,
+    target}
+};
+
+// Reduced motion accessibility configuration
+export const reducedMotionAccessibilityConfig= {
+  ...defaultAccessibilityConfig,
+  reducedMotion,
+  motion,
+      normal,
+      slow},
+    easing,
+      easeIn,
+      easeOut,
+      easeInOut}
+  }
+};
+
+// Accessibility theme manager
+export class AccessibilityThemeManager {
+  private config;
+  private listeners) => void>;
+
+  constructor(initialConfig= 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)');
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)');
+
+      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, reducedMotion) {
+    let newConfig = { ...this.config };
+
+    if (highContrast) {
+      newConfig = { ...newConfig, ...highContrastAccessibilityConfig };
+    }
+
+    if (reducedMotion) {
+      newConfig = { ...newConfig, ...reducedMotionAccessibilityConfig };
+    }
+
+    this.updateConfig(newConfig);
+  }
+
+  // Get current accessibility configuration
+  getConfig()};
+  }
+
+  // Update accessibility configuration
+  updateConfig(newConfig) {
+    this.config = { ...this.config, ...newConfig };
+    this.notifyListeners();
+  }
+
+  // Subscribe to accessibility configuration changes
+  subscribe(listener) => 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(), string> {
+    const { focusRing, motion, spacing } = this.config;
+    
+    return {
+      '--focus-ring-color',
+      '--focus-ring-width',
+      '--focus-ring-style',
+      '--focus-ring-offset',
+      '--motion-duration-fast',
+      '--motion-duration-normal',
+      '--motion-duration-slow',
+      '--motion-easing-ease',
+      '--motion-easing-ease-in',
+      '--motion-easing-ease-out',
+      '--motion-easing-ease-in-out',
+      '--spacing-focus-ring',
+      '--spacing-touch-target'};
+  }
+
+  // Check if high contrast mode is enabled
+  isHighContrast();
+  }
+
+  // Check if reduced motion is enabled
+  isReducedMotion();
+  }
+
+  // Check if focus visible is enabled
+  isFocusVisible();
+  }
+
+  // Get ARIA label for a specific key
+  getAriaLabel(key)] || key;
+  }
+
+  // Get keyboard shortcut for a specific action
+  getKeyboardShortcut(action)] || '';
+  }
+
+  // Validate contrast ratio
+  validateContrastRatio(_foreground, _background), 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/dist/themes/aria-patterns.d.ts

@@ -0,0 +1,418 @@
+// ARIA role definitions
+export declare 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 declare 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 declare const ARIA_LIVE_VALUES: {
+  off: 'off',
+  polite: 'polite',
+  assertive: 'assertive'
+} as const;
+
+// ARIA current values
+export declare const ARIA_CURRENT_VALUES: {
+  page: 'page',
+  step: 'step',
+  location: 'location',
+  date: 'date',
+  time: 'time',
+  true: 'true',
+  false: 'false'
+} as const;
+
+// ARIA sort values
+export declare const ARIA_SORT_VALUES: {
+  ascending: 'ascending',
+  descending: 'descending',
+  none: 'none',
+  other: 'other'
+} as const;
+
+// ARIA orientation values
+export declare 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;