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

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

@@ -0,0 +1,384 @@
+import { accessibilityManager } from './accessibility';
+
+// ARIA role definitions
+export const ARIA_ROLES = {
+  // Landmark roles
+  banner,
+  complementary,
+  contentinfo,
+  form,
+  main,
+  navigation,
+  region,
+  search,
+  
+  // Widget roles
+  button,
+  checkbox,
+  gridcell,
+  link,
+  menuitem,
+  menuitemcheckbox,
+  menuitemradio,
+  option,
+  progressbar,
+  radio,
+  scrollbar,
+  searchbox,
+  slider,
+  spinbutton,
+  switch,
+  tab,
+  tabpanel,
+  textbox,
+  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;
+
+// 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;
+
+// ARIA live region values
+export const ARIA_LIVE_VALUES = {
+  off,
+  polite,
+  assertive} as const;
+
+// ARIA current values
+export const ARIA_CURRENT_VALUES = {
+  page,
+  step,
+  location,
+  date,
+  time,
+  true,
+  false} as const;
+
+// ARIA sort values
+export const ARIA_SORT_VALUES = {
+  ascending,
+  descending,
+  none,
+  other} as const;
+
+// ARIA orientation values
+export const ARIA_ORIENTATION_VALUES = {
+  horizontal,
+  vertical} as const;
+
+// ARIA pattern utilities
+export class ARIAUtils {
+  // Generate ARIA attributes object
+  static generateAriaAttributes(attributes, any>), any> {
+    const ariaAttributes, 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?, fallback?)) return label;
+    if (fallback) return accessibilityManager.getAriaLabel(fallback);
+    return undefined;
+  }
+
+  // Generate ARIA describedby
+  static generateAriaDescribedby(description?, id?)) return id;
+    return undefined;
+  }
+
+  // Generate ARIA controls
+  static generateAriaControls(controlledId?);
+  }
+
+  // Generate ARIA expanded state
+  static generateAriaExpanded(expanded?);
+  }
+
+  // Generate ARIA pressed state
+  static generateAriaPressed(pressed?);
+  }
+
+  // Generate ARIA selected state
+  static generateAriaSelected(selected?);
+  }
+
+  // Generate ARIA checked state
+  static generateAriaChecked(checked?, indeterminate?)) return 'mixed';
+    return checked;
+  }
+
+  // Generate ARIA disabled state
+  static generateAriaDisabled(disabled?);
+  }
+
+  // Generate ARIA readonly state
+  static generateAriaReadonly(readonly?);
+  }
+
+  // Generate ARIA required state
+  static generateAriaRequired(required?);
+  }
+
+  // Generate ARIA invalid state
+  static generateAriaInvalid(invalid?, errorMessage?)) return true;
+    return invalid;
+  }
+
+  // Generate ARIA live region
+  static generateAriaLive(live?, _atomic?);
+  }
+
+  // Generate ARIA current
+  static generateAriaCurrent(current?);
+  }
+
+  // Generate ARIA sort
+  static generateAriaSort(sort?);
+  }
+
+  // Generate ARIA orientation
+  static generateAriaOrientation(orientation?);
+  }
+
+  // Generate ARIA value attributes for range inputs
+  static generateAriaValueAttributes(
+    value?,
+    min?,
+    max?,
+    _step?), any> {
+    const ariaAttributes, 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,
+    total), any> {
+    return {
+      'aria-posinset',
+      'aria-setsize'};
+  }
+
+  // Generate ARIA level for headings and tree items
+  static generateAriaLevel(level), any> {
+    return {
+      'aria-level'};
+  }
+
+  // Generate ARIA multiselectable for selection components
+  static generateAriaMultiselectable(multiselectable), any> {
+    return {
+      'aria-multiselectable'};
+  }
+
+  // Generate ARIA col/row attributes for table cells
+  static generateAriaTableAttributes(
+    colIndex?,
+    rowIndex?,
+    colSpan?,
+    rowSpan?), any> {
+    const ariaAttributes, 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?,
+    rowCount?), any> {
+    const ariaAttributes, 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?,
+    dropEffect?), any> {
+    const ariaAttributes, 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?), any> {
+    if (!activeDescendantId) return {};
+    
+    return {
+      'aria-activedescendant'};
+  }
+
+  // Generate ARIA owns for composite widgets
+  static generateAriaOwns(ownedIds?]), any> {
+    if (!ownedIds || ownedIds.length === 0) return {};
+    
+    return {
+      'aria-owns')
+    };
+  }
+
+  // Generate ARIA flowto for composite widgets
+  static generateAriaFlowTo(flowToIds?]), any> {
+    if (!flowToIds || flowToIds.length === 0) return {};
+    
+    return {
+      'aria-flowto')
+    };
+  }
+
+  // Generate ARIA controls for composite widgets
+  static generateAriaControlsMultiple(controlIds?]), any> {
+    if (!controlIds || controlIds.length === 0) return {};
+    
+    return {
+      'aria-controls')
+    };
+  }
+
+  // Generate ARIA describedby for multiple descriptions
+  static generateAriaDescribedbyMultiple(descriptionIds?]), any> {
+    if (!descriptionIds || descriptionIds.length === 0) return {};
+    
+    return {
+      'aria-describedby')
+    };
+  }
+
+  // Generate ARIA labelledby for multiple labels
+  static generateAriaLabelledbyMultiple(labelIds?]), any> {
+    if (!labelIds || labelIds.length === 0) return {};
+    
+    return {
+      'aria-labelledby')
+    };
+  }
+
+  // Validate ARIA attributes
+  static validateAriaAttributes(attributes, any>), 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}`);
+          return false;
+        }
+      }
+    }
+    
+    return true;
+  }
+
+  // Get accessible name for an element
+  static getAccessibleName(element), 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)= 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;