@abstraks-dev/ui-library 1.0.1

package/dist/utils/useTextAreaAccessibility.js

@@ -0,0 +1,255 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateTextAreaAccessibility = exports.useTextAreaAccessibility = exports.getCharacterCountInfo = void 0;
+var _react = require("react");
+/**
+ * Custom hook for managing textarea state with accessibility features
+ * Provides controlled state management for textarea with ARIA support
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.defaultValue - Default textarea value
+ * @param {Function} options.onChange - Change callback function
+ * @param {boolean} options.required - Whether the field is required
+ * @param {number} options.maxLength - Maximum character count
+ * @param {number} options.minLength - Minimum character count
+ * @returns {Object} TextArea state and handlers
+ */
+const useTextAreaAccessibility = (options = {}) => {
+  const {
+    defaultValue = '',
+    onChange,
+    required = false,
+    maxLength,
+    minLength
+  } = options;
+  const [value, setValue] = (0, _react.useState)(defaultValue);
+  const [charCount, setCharCount] = (0, _react.useState)(defaultValue.length);
+  const [isValid, setIsValid] = (0, _react.useState)(!required || defaultValue.length > 0);
+  const [hasBeenTouched, setHasBeenTouched] = (0, _react.useState)(false);
+  const textareaRef = (0, _react.useRef)(null);
+  const handleChange = (0, _react.useCallback)(event => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    setCharCount(newValue.length);
+    setHasBeenTouched(true);
+
+    // Validate the field
+    let valid = true;
+    if (required && newValue.trim().length === 0) {
+      valid = false;
+    }
+    if (minLength && newValue.length < minLength) {
+      valid = false;
+    }
+    if (maxLength && newValue.length > maxLength) {
+      valid = false;
+    }
+    setIsValid(valid);
+
+    // Call external onChange handler
+    onChange?.(event, {
+      value: newValue,
+      isValid: valid,
+      charCount: newValue.length
+    });
+  }, [onChange, required, minLength, maxLength]);
+  const handleFocus = (0, _react.useCallback)(event => {
+    // Focus handling for accessibility
+    setHasBeenTouched(true);
+  }, []);
+  const handleBlur = (0, _react.useCallback)(event => {
+    // Blur handling for validation
+    const newValue = event.target.value;
+    let valid = true;
+    if (required && newValue.trim().length === 0) {
+      valid = false;
+    }
+    if (minLength && newValue.length < minLength) {
+      valid = false;
+    }
+    if (maxLength && newValue.length > maxLength) {
+      valid = false;
+    }
+    setIsValid(valid);
+  }, [required, minLength, maxLength]);
+  const reset = (0, _react.useCallback)(() => {
+    setValue(defaultValue);
+    setCharCount(defaultValue.length);
+    setIsValid(!required || defaultValue.length > 0);
+    setHasBeenTouched(false);
+  }, [defaultValue, required]);
+  const focus = (0, _react.useCallback)(() => {
+    textareaRef.current?.focus();
+  }, []);
+  return {
+    // State
+    value,
+    charCount,
+    isValid,
+    hasBeenTouched,
+    showError: hasBeenTouched && !isValid,
+    // Handlers
+    handleChange,
+    handleFocus,
+    handleBlur,
+    reset,
+    focus,
+    // Ref
+    textareaRef,
+    // Computed properties
+    remainingChars: maxLength ? maxLength - charCount : null,
+    isAtMaxLength: maxLength ? charCount >= maxLength : false,
+    isAtMinLength: minLength ? charCount >= minLength : true
+  };
+};
+
+/**
+ * Validates textarea accessibility compliance
+ * Checks for proper ARIA attributes, labels, and keyboard support
+ *
+ * @param {HTMLElement} textareaElement - The textarea element to validate
+ * @returns {Object} Validation results with errors and warnings
+ */
+exports.useTextAreaAccessibility = useTextAreaAccessibility;
+const validateTextAreaAccessibility = textareaElement => {
+  const results = {
+    passed: true,
+    errors: [],
+    warnings: [],
+    info: []
+  };
+  if (!textareaElement) {
+    results.passed = false;
+    results.errors.push('No textarea element provided for validation');
+    return results;
+  }
+
+  // Check if it's actually a textarea element
+  if (textareaElement.tagName.toLowerCase() !== 'textarea') {
+    // Look for textarea within the element
+    const textarea = textareaElement.querySelector('textarea');
+    if (!textarea) {
+      results.passed = false;
+      results.errors.push('Element is not a textarea and contains no textarea element');
+      return results;
+    }
+    // Use the found textarea for validation
+    textareaElement = textarea;
+  }
+
+  // 1. Check for accessible name (label, aria-label, or aria-labelledby)
+  const hasLabel = textareaElement.hasAttribute('aria-label') || textareaElement.hasAttribute('aria-labelledby') || textareaElement.labels?.length > 0;
+  if (!hasLabel) {
+    results.passed = false;
+    results.errors.push('Textarea must have an accessible name (label, aria-label, or aria-labelledby)');
+  }
+
+  // 2. Check for proper ID if labelledby is used
+  if (textareaElement.hasAttribute('aria-labelledby')) {
+    const labelId = textareaElement.getAttribute('aria-labelledby');
+    const labelElement = document.getElementById(labelId);
+    if (!labelElement) {
+      results.passed = false;
+      results.errors.push(`Referenced label element with ID "${labelId}" not found`);
+    }
+  }
+
+  // 3. Check for required field indication
+  if (textareaElement.hasAttribute('required') || textareaElement.hasAttribute('aria-required')) {
+    if (!textareaElement.hasAttribute('aria-required')) {
+      results.warnings.push('Consider adding aria-required="true" for screen reader users');
+    }
+  }
+
+  // 4. Check for error state accessibility
+  if (textareaElement.hasAttribute('aria-invalid')) {
+    const isInvalid = textareaElement.getAttribute('aria-invalid') === 'true';
+    if (isInvalid && !textareaElement.hasAttribute('aria-describedby')) {
+      results.warnings.push('Invalid textarea should have aria-describedby pointing to error message');
+    }
+  }
+
+  // 5. Check for character count accessibility
+  const hasMaxLength = textareaElement.hasAttribute('maxlength');
+  if (hasMaxLength && !textareaElement.hasAttribute('aria-describedby')) {
+    results.warnings.push('Textarea with maxlength should have aria-describedby for character count info');
+  }
+
+  // 6. Check for placeholder accessibility
+  if (textareaElement.hasAttribute('placeholder')) {
+    results.warnings.push('Avoid using placeholder as the only label - ensure proper labeling exists');
+  }
+
+  // 7. Check for disabled state
+  if (textareaElement.disabled) {
+    results.info.push('Textarea is disabled');
+  }
+
+  // 8. Check for keyboard accessibility
+  const tabIndex = textareaElement.getAttribute('tabindex');
+  if (tabIndex && parseInt(tabIndex) < 0) {
+    results.warnings.push('Textarea has negative tabindex - may not be keyboard accessible');
+  }
+
+  // 9. Check for resize capability
+  const computedStyle = window.getComputedStyle(textareaElement);
+  if (computedStyle.resize === 'none') {
+    results.info.push('Textarea resize is disabled - consider allowing users to resize for better usability');
+  }
+
+  // 10. Check for minimum contrast (if possible)
+  const bgColor = computedStyle.backgroundColor;
+  const textColor = computedStyle.color;
+  if (bgColor && textColor) {
+    results.info.push('Manual contrast check recommended for accessibility compliance');
+  }
+  if (results.errors.length === 0) {
+    results.info.push('Basic accessibility validation passed');
+  }
+  return results;
+};
+
+/**
+ * Character count utility for textarea accessibility
+ * Provides screen reader announcements for character limits
+ *
+ * @param {number} currentCount - Current character count
+ * @param {number} maxLength - Maximum allowed characters
+ * @param {number} warningThreshold - Threshold to start warnings (default: 0.8)
+ * @returns {Object} Character count info and announcements
+ */
+exports.validateTextAreaAccessibility = validateTextAreaAccessibility;
+const getCharacterCountInfo = (currentCount, maxLength, warningThreshold = 0.8) => {
+  if (!maxLength) return null;
+  const remaining = maxLength - currentCount;
+  const percentage = currentCount / maxLength;
+  const isWarning = percentage >= warningThreshold;
+  const isError = currentCount > maxLength;
+  let announcement = '';
+  let status = 'info';
+  if (isError) {
+    announcement = `Character limit exceeded. ${Math.abs(remaining)} characters over limit.`;
+    status = 'error';
+  } else if (isWarning) {
+    announcement = `${remaining} characters remaining.`;
+    status = 'warning';
+  } else {
+    announcement = `${currentCount} of ${maxLength} characters used.`;
+    status = 'info';
+  }
+  return {
+    currentCount,
+    maxLength,
+    remaining,
+    percentage,
+    isWarning,
+    isError,
+    announcement,
+    status,
+    ariaLabel: `Character count: ${announcement}`
+  };
+};
+exports.getCharacterCountInfo = getCharacterCountInfo;

package/dist/utils/useTextInputAccessibility.js

@@ -0,0 +1,295 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateTextInputAccessibility = exports.useTextInputAccessibility = exports.getInputValidationInfo = void 0;
+var _react = require("react");
+var _inputValidation = require("./inputValidation");
+/**
+ * Custom hook for managing text input state with accessibility features
+ * Provides controlled state management for text input with ARIA support
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.defaultValue - Default input value
+ * @param {Function} options.onChange - Change callback function
+ * @param {boolean} options.required - Whether the field is required
+ * @param {number} options.maxLength - Maximum character count
+ * @param {number} options.minLength - Minimum character count
+ * @param {string} options.type - Input type for validation
+ * @returns {Object} TextInput state and handlers
+ */
+const useTextInputAccessibility = (options = {}) => {
+  const {
+    defaultValue = '',
+    onChange,
+    required = false,
+    maxLength,
+    minLength,
+    type = 'text'
+  } = options;
+  const [value, setValue] = (0, _react.useState)(defaultValue);
+  const [isValid, setIsValid] = (0, _react.useState)(!required || defaultValue.length > 0);
+  const [hasBeenTouched, setHasBeenTouched] = (0, _react.useState)(false);
+  const inputRef = (0, _react.useRef)(null);
+  const validateInput = (0, _react.useCallback)((inputValue, inputType) => {
+    let valid = true;
+    if (required && !(0, _inputValidation.validateRequired)(inputValue)) valid = false;
+    if (!(0, _inputValidation.validateLength)(inputValue, minLength, maxLength)) valid = false;
+    switch (inputType) {
+      case 'email':
+        if (inputValue && !(0, _inputValidation.validateEmail)(inputValue)) valid = false;
+        break;
+      case 'tel':
+        if (inputValue && !(0, _inputValidation.validatePhone)(inputValue)) valid = false;
+        break;
+      case 'url':
+        try {
+          if (inputValue && !(inputValue.startsWith('http://') || inputValue.startsWith('https://'))) {
+            valid = false;
+          }
+        } catch (e) {
+          valid = false;
+        }
+        break;
+      default:
+        break;
+    }
+    return valid;
+  }, [type]);
+  const handleFocus = (0, _react.useCallback)(event => {
+    setHasBeenTouched(true);
+  }, []);
+  const handleBlur = (0, _react.useCallback)(event => {
+    const newValue = event.target.value;
+    const valid = validateInput(newValue, type);
+    setIsValid(valid);
+  }, [type, validateInput]);
+  const reset = (0, _react.useCallback)(() => {
+    setValue(defaultValue);
+    setIsValid(!required || defaultValue.length > 0);
+    setHasBeenTouched(false);
+  }, [defaultValue, required]);
+  const focus = (0, _react.useCallback)(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Unified onChange handler for input/textarea
+  const handleChange = (0, _react.useCallback)(event => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (onChange) onChange(newValue);
+  }, [onChange]);
+  return {
+    // State
+    value,
+    isValid,
+    hasBeenTouched,
+    showError: hasBeenTouched && !isValid,
+    // Handlers
+    handleFocus,
+    handleBlur,
+    handleChange,
+    reset,
+    focus,
+    // Ref
+    inputRef,
+    // Computed properties
+    charCount: value.length,
+    remainingChars: maxLength ? maxLength - value.length : null,
+    isAtMaxLength: maxLength ? value.length >= maxLength : false,
+    isAtMinLength: minLength ? value.length >= minLength : true
+  };
+};
+
+/**
+ * Validates text input accessibility compliance
+ * Checks for proper ARIA attributes, labels, and keyboard support
+ *
+ * @param {HTMLElement} inputElement - The input element to validate
+ * @returns {Object} Validation results with errors and warnings
+ */
+exports.useTextInputAccessibility = useTextInputAccessibility;
+const validateTextInputAccessibility = inputElement => {
+  const results = {
+    passed: true,
+    errors: [],
+    warnings: [],
+    info: []
+  };
+  if (!inputElement) {
+    results.passed = false;
+    results.errors.push('No input element provided for validation');
+    return results;
+  }
+
+  // Check if it's actually an input element
+  if (inputElement.tagName.toLowerCase() !== 'input') {
+    const input = inputElement.querySelector('input');
+    if (!input) {
+      results.passed = false;
+      results.errors.push('Element is not an input and contains no input element');
+      return results;
+    }
+    inputElement = input;
+  }
+
+  // 1. Check for accessible name
+  const hasLabel = inputElement.hasAttribute('aria-label') || inputElement.hasAttribute('aria-labelledby') || inputElement.labels?.length > 0;
+  if (!hasLabel) {
+    results.passed = false;
+    results.errors.push('Input must have an accessible name (label, aria-label, or aria-labelledby)');
+  }
+
+  // 2. Check for proper ID if labelledby is used
+  if (inputElement.hasAttribute('aria-labelledby')) {
+    const labelId = inputElement.getAttribute('aria-labelledby');
+    const labelElement = document.getElementById(labelId);
+    if (!labelElement) {
+      results.passed = false;
+      results.errors.push(`Referenced label element with ID "${labelId}" not found`);
+    }
+  }
+
+  // 3. Check for required field indication
+  if (inputElement.hasAttribute('required') || inputElement.hasAttribute('aria-required')) {
+    if (!inputElement.hasAttribute('aria-required')) {
+      results.warnings.push('Consider adding aria-required="true" for screen reader users');
+    }
+  }
+
+  // 4. Check for error state accessibility
+  if (inputElement.hasAttribute('aria-invalid')) {
+    const isInvalid = inputElement.getAttribute('aria-invalid') === 'true';
+    if (isInvalid && !inputElement.hasAttribute('aria-describedby')) {
+      results.warnings.push('Invalid input should have aria-describedby pointing to error message');
+    }
+  }
+
+  // 5. Check input type appropriateness
+  const inputType = inputElement.getAttribute('type') || 'text';
+  if (inputType === 'text' && inputElement.getAttribute('name')) {
+    const name = inputElement.getAttribute('name').toLowerCase();
+    if (name.includes('email')) {
+      results.warnings.push('Consider using type="email" for email inputs');
+    } else if (name.includes('phone') || name.includes('tel')) {
+      results.warnings.push('Consider using type="tel" for phone inputs');
+    } else if (name.includes('url') || name.includes('website')) {
+      results.warnings.push('Consider using type="url" for URL inputs');
+    }
+  }
+
+  // 6. Check for placeholder accessibility
+  if (inputElement.hasAttribute('placeholder')) {
+    results.warnings.push('Avoid using placeholder as the only label - ensure proper labeling exists');
+  }
+
+  // 7. Check for disabled state
+  if (inputElement.disabled) {
+    results.info.push('Input is disabled');
+  }
+
+  // 8. Check for keyboard accessibility
+  const tabIndex = inputElement.getAttribute('tabindex');
+  if (tabIndex && parseInt(tabIndex) < 0) {
+    results.warnings.push('Input has negative tabindex - may not be keyboard accessible');
+  }
+
+  // 9. Check autocomplete attributes
+  const autocomplete = inputElement.getAttribute('autocomplete');
+  if (!autocomplete && ['email', 'tel', 'url'].includes(inputType)) {
+    results.info.push(`Consider adding autocomplete attribute for ${inputType} inputs`);
+  }
+  if (results.errors.length === 0) {
+    results.info.push('Basic accessibility validation passed');
+  }
+  return results;
+};
+
+/**
+ * Input validation utility for common input types
+ * Provides validation messages and patterns
+ *
+ * @param {string} value - Current input value
+ * @param {string} type - Input type
+ * @param {Object} options - Validation options
+ * @returns {Object} Validation result with message and validity
+ */
+exports.validateTextInputAccessibility = validateTextInputAccessibility;
+const getInputValidationInfo = (value, type, options = {}) => {
+  const {
+    required = false,
+    minLength,
+    maxLength
+  } = options;
+  let isValid = true;
+  let message = '';
+  let status = 'valid';
+
+  // Required validation
+  if (required && !value.trim()) {
+    isValid = false;
+    message = 'This field is required';
+    status = 'error';
+    return {
+      isValid,
+      message,
+      status
+    };
+  }
+
+  // Length validation
+  if (minLength && value.length < minLength) {
+    isValid = false;
+    message = `Minimum ${minLength} characters required`;
+    status = 'error';
+  } else if (maxLength && value.length > maxLength) {
+    isValid = false;
+    message = `Maximum ${maxLength} characters allowed`;
+    status = 'error';
+  }
+
+  // Type-specific validation
+  if (value && isValid) {
+    switch (type) {
+      case 'email':
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(value)) {
+          isValid = false;
+          message = 'Please enter a valid email address';
+          status = 'error';
+        }
+        break;
+      case 'tel':
+        const phoneRegex = /^[\+]?[\s\-\(\)]?[\d\s\-\(\)]{10,}$/;
+        if (!phoneRegex.test(value)) {
+          isValid = false;
+          message = 'Please enter a valid phone number';
+          status = 'error';
+        }
+        break;
+      case 'url':
+        if (!value.startsWith('http://') && !value.startsWith('https://')) {
+          isValid = false;
+          message = 'Please enter a valid URL (starting with http:// or https://)';
+          status = 'error';
+        }
+        break;
+      case 'number':
+        if (isNaN(Number(value))) {
+          isValid = false;
+          message = 'Please enter a valid number';
+          status = 'error';
+        }
+        break;
+    }
+  }
+  return {
+    isValid,
+    message,
+    status,
+    charCount: value.length,
+    remainingChars: maxLength ? maxLength - value.length : null
+  };
+};
+exports.getInputValidationInfo = getInputValidationInfo;