@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/themes/aria-patterns.esm.js

@@ -3,137 +3,143 @@ import { accessibilityManager } from './accessibility';
 // ARIA role definitions
 export const ARIA_ROLES = {
   // Landmark roles
-  banner,
-  complementary,
-  contentinfo,
-  form,
-  main,
-  navigation,
-  region,
-  search,
+  banner: 'banner',
+  complementary: 'complementary',
+  contentinfo: 'contentinfo',
+  form: 'form',
+  main: 'main',
+  navigation: 'navigation',
+  region: 'region',
+  search: 'search',
   
   // Widget roles
-  button,
-  checkbox,
-  gridcell,
-  link,
-  menuitem,
-  menuitemcheckbox,
-  menuitemradio,
-  option,
-  progressbar,
-  radio,
-  scrollbar,
-  searchbox,
-  slider,
-  spinbutton,
-  switch,
-  tab,
-  tabpanel,
-  textbox,
-  treeitem,
+  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,
-  cell,
-  columnheader,
-  definition,
-  directory,
-  document,
-  group,
-  heading,
-  img,
-  list,
-  listitem,
-  math,
-  note,
-  presentation,
-  row,
-  rowgroup,
-  rowheader,
-  separator,
-  table,
-  term,
-  toolbar,
-  tooltip,
-  tree,
-  treegrid} as const;
+  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,
-  ariaHidden,
-  ariaPressed,
-  ariaSelected,
-  ariaChecked,
-  ariaDisabled,
-  ariaReadonly,
-  ariaRequired,
-  ariaInvalid,
-  ariaBusy,
-  ariaCurrent,
-  ariaLive,
-  ariaAtomic,
-  ariaRelevant,
-  ariaSort,
-  ariaGrabbed,
-  ariaDropeffect,
-  ariaActivedescendant,
-  ariaControls,
-  ariaDescribedby,
-  ariaFlowto,
-  ariaLabelledby,
-  ariaOwns,
-  ariaPosinset,
-  ariaSetsize,
-  ariaValuemin,
-  ariaValuemax,
-  ariaValuenow,
-  ariaValuetext,
-  ariaLevel,
-  ariaMultiselectable,
-  ariaOrientation,
-  ariaColcount,
-  ariaColindex,
-  ariaRowcount,
-  ariaRowindex,
-  ariaColspan,
-  ariaRowspan} as const;
+  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,
-  polite,
-  assertive} as const;
+  off: 'off',
+  polite: 'polite',
+  assertive: 'assertive'
+} as const;
 
 // ARIA current values
 export const ARIA_CURRENT_VALUES = {
-  page,
-  step,
-  location,
-  date,
-  time,
-  true,
-  false} as const;
+  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,
-  descending,
-  none,
-  other} as const;
+  ascending: 'ascending',
+  descending: 'descending',
+  none: 'none',
+  other: 'other'
+} as const;
 
 // ARIA orientation values
 export const ARIA_ORIENTATION_VALUES = {
-  horizontal,
-  vertical} as const;
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+} as const;
 
 // ARIA pattern utilities
 export class ARIAUtils {
   // Generate ARIA attributes object
-  static generateAriaAttributes(attributes, any>), any> {
-    const ariaAttributes, any> = {};
+  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) {
@@ -145,77 +151,93 @@ export class ARIAUtils {
   }
 
   // Generate proper ARIA label
-  static generateAriaLabel(label?, fallback?)) return 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?, id?)) return id;
+  static generateAriaDescribedby(description?: string, id?: string): string | undefined {
+    if (description && id) return id;
     return undefined;
   }
 
   // Generate ARIA controls
-  static generateAriaControls(controlledId?);
+  static generateAriaControls(controlledId?: string): string | undefined {
+    return controlledId;
   }
 
   // Generate ARIA expanded state
-  static generateAriaExpanded(expanded?);
+  static generateAriaExpanded(expanded?: boolean): boolean | undefined {
+    return expanded;
   }
 
   // Generate ARIA pressed state
-  static generateAriaPressed(pressed?);
+  static generateAriaPressed(pressed?: boolean): boolean | undefined {
+    return pressed;
   }
 
   // Generate ARIA selected state
-  static generateAriaSelected(selected?);
+  static generateAriaSelected(selected?: boolean): boolean | undefined {
+    return selected;
   }
 
   // Generate ARIA checked state
-  static generateAriaChecked(checked?, indeterminate?)) return 'mixed';
+  static generateAriaChecked(checked?: boolean, indeterminate?: boolean): string | boolean | undefined {
+    if (indeterminate) return 'mixed';
     return checked;
   }
 
   // Generate ARIA disabled state
-  static generateAriaDisabled(disabled?);
+  static generateAriaDisabled(disabled?: boolean): boolean | undefined {
+    return disabled;
   }
 
   // Generate ARIA readonly state
-  static generateAriaReadonly(readonly?);
+  static generateAriaReadonly(readonly?: boolean): boolean | undefined {
+    return readonly;
   }
 
   // Generate ARIA required state
-  static generateAriaRequired(required?);
+  static generateAriaRequired(required?: boolean): boolean | undefined {
+    return required;
   }
 
   // Generate ARIA invalid state
-  static generateAriaInvalid(invalid?, errorMessage?)) return true;
+  static generateAriaInvalid(invalid?: boolean, errorMessage?: string): boolean | 'grammar' | 'spelling' | undefined {
+    if (errorMessage) return true;
     return invalid;
   }
 
   // Generate ARIA live region
-  static generateAriaLive(live?, _atomic?);
+  static generateAriaLive(live?: keyof typeof ARIA_LIVE_VALUES, _atomic?: boolean): string | undefined {
+    return live;
   }
 
   // Generate ARIA current
-  static generateAriaCurrent(current?);
+  static generateAriaCurrent(current?: keyof typeof ARIA_CURRENT_VALUES): string | undefined {
+    return current;
   }
 
   // Generate ARIA sort
-  static generateAriaSort(sort?);
+  static generateAriaSort(sort?: keyof typeof ARIA_SORT_VALUES): string | undefined {
+    return sort;
   }
 
   // Generate ARIA orientation
-  static generateAriaOrientation(orientation?);
+  static generateAriaOrientation(orientation?: keyof typeof ARIA_ORIENTATION_VALUES): string | undefined {
+    return orientation;
   }
 
   // Generate ARIA value attributes for range inputs
   static generateAriaValueAttributes(
-    value?,
-    min?,
-    max?,
-    _step?), any> {
-    const ariaAttributes, any> = {};
+    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;
@@ -226,32 +248,37 @@ export class ARIAUtils {
 
   // Generate ARIA position and size attributes for list items
   static generateAriaPositionAttributes(
-    position,
-    total), any> {
+    position: number,
+    total: number
+  ): Record<string, any> {
     return {
-      'aria-posinset',
-      'aria-setsize'};
+      'aria-posinset': position,
+      'aria-setsize': total
+    };
   }
 
   // Generate ARIA level for headings and tree items
-  static generateAriaLevel(level), any> {
+  static generateAriaLevel(level: number): Record<string, any> {
     return {
-      'aria-level'};
+      'aria-level': level
+    };
   }
 
   // Generate ARIA multiselectable for selection components
-  static generateAriaMultiselectable(multiselectable), any> {
+  static generateAriaMultiselectable(multiselectable: boolean): Record<string, any> {
     return {
-      'aria-multiselectable'};
+      'aria-multiselectable': multiselectable
+    };
   }
 
   // Generate ARIA col/row attributes for table cells
   static generateAriaTableAttributes(
-    colIndex?,
-    rowIndex?,
-    colSpan?,
-    rowSpan?), any> {
-    const ariaAttributes, any> = {};
+    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;
@@ -263,9 +290,10 @@ export class ARIAUtils {
 
   // Generate ARIA count attributes for tables
   static generateAriaCountAttributes(
-    colCount?,
-    rowCount?), any> {
-    const ariaAttributes, any> = {};
+    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;
@@ -275,9 +303,10 @@ export class ARIAUtils {
 
   // Generate ARIA grabbed and dropeffect for drag and drop
   static generateAriaDragDrop(
-    grabbed?,
-    dropEffect?), any> {
-    const ariaAttributes, any> = {};
+    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;
@@ -286,64 +315,69 @@ export class ARIAUtils {
   }
 
   // Generate ARIA active descendant for composite widgets
-  static generateAriaActiveDescendant(activeDescendantId?), any> {
+  static generateAriaActiveDescendant(activeDescendantId?: string): Record<string, any> {
     if (!activeDescendantId) return {};
     
     return {
-      'aria-activedescendant'};
+      'aria-activedescendant': activeDescendantId
+    };
   }
 
   // Generate ARIA owns for composite widgets
-  static generateAriaOwns(ownedIds?]), any> {
+  static generateAriaOwns(ownedIds?: string[]): Record<string, any> {
     if (!ownedIds || ownedIds.length === 0) return {};
     
     return {
-      'aria-owns')
+      'aria-owns': ownedIds.join(' ')
     };
   }
 
   // Generate ARIA flowto for composite widgets
-  static generateAriaFlowTo(flowToIds?]), any> {
+  static generateAriaFlowTo(flowToIds?: string[]): Record<string, any> {
     if (!flowToIds || flowToIds.length === 0) return {};
     
     return {
-      'aria-flowto')
+      'aria-flowto': flowToIds.join(' ')
     };
   }
 
   // Generate ARIA controls for composite widgets
-  static generateAriaControlsMultiple(controlIds?]), any> {
+  static generateAriaControlsMultiple(controlIds?: string[]): Record<string, any> {
     if (!controlIds || controlIds.length === 0) return {};
     
     return {
-      'aria-controls')
+      'aria-controls': controlIds.join(' ')
     };
   }
 
   // Generate ARIA describedby for multiple descriptions
-  static generateAriaDescribedbyMultiple(descriptionIds?]), any> {
+  static generateAriaDescribedbyMultiple(descriptionIds?: string[]): Record<string, any> {
     if (!descriptionIds || descriptionIds.length === 0) return {};
     
     return {
-      'aria-describedby')
+      'aria-describedby': descriptionIds.join(' ')
     };
   }
 
   // Generate ARIA labelledby for multiple labels
-  static generateAriaLabelledbyMultiple(labelIds?]), any> {
+  static generateAriaLabelledbyMultiple(labelIds?: string[]): Record<string, any> {
     if (!labelIds || labelIds.length === 0) return {};
     
     return {
-      'aria-labelledby')
+      'aria-labelledby': labelIds.join(' ')
     };
   }
 
   // Validate ARIA attributes
-  static validateAriaAttributes(attributes, any>), value] of Object.entries(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}`);
+          console.warn(`ARIA attribute ${key} has invalid value: ${value}`);
           return false;
         }
       }
@@ -353,7 +387,8 @@ export class ARIAUtils {
   }
 
   // Get accessible name for an element
-  static getAccessibleName(element), aria-label, title, text content
+  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);
@@ -370,7 +405,8 @@ export class ARIAUtils {
   }
 
   // Get accessible description for an element
-  static getAccessibleDescription(element)= element.getAttribute('aria-describedby');
+  static getAccessibleDescription(element: HTMLElement): string {
+    const describedby = element.getAttribute('aria-describedby');
     if (describedby) {
       const descElement = document.getElementById(describedby);
       if (descElement) return descElement.textContent || '';