agentsqripts/lib/ui-problems/usabilityAnalyzer.js

Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems

/**
 * @file Usability analysis
 * @description Analyzes UI code for usability problems
 */

/**
 * Analyze usability issues in UI code
 * @param {string} content - Code content to analyze
 * @param {string} filePath - File path for context
 * @returns {Array} Array of usability issues
 */
function analyzeUsabilityIssues(content, filePath) {
  const issues = [];
  const lines = content.split('\n');
  
  lines.forEach((line, index) => {
    const trimmed = line.trim();
    
    // Check for ambiguous button labels
    if (trimmed.includes('<button') && !trimmed.match(/aria-label|title=/)) {
      const labelMatch = trimmed.match(/>([^<]+)</);
      if (labelMatch && ['Click', 'Submit', 'Button', 'Here'].includes(labelMatch[1].trim())) {
        issues.push({
          type: 'ambiguous_labels',
          line: index + 1,
          content: trimmed,
          severity: 'HIGH',
          description: 'Button has ambiguous or generic label',
          suggestion: 'Use descriptive labels that explain the action'
        });
      }
    }
    
    // Check for missing loading states
    if (trimmed.includes('fetch(') || trimmed.includes('axios.') || trimmed.includes('async ')) {
      if (!content.includes('loading') && !content.includes('spinner') && !content.includes('isLoading')) {
        issues.push({
          type: 'missing_loading_states',
          line: index + 1,
          content: trimmed,
          severity: 'HIGH',
          description: 'Async operation without loading state indication',
          suggestion: 'Add loading indicators for better user feedback'
        });
      }
    }
    
    // Check for excessive inline styles
    const inlineStyleMatches = trimmed.match(/style={{[^}]+}}/g);
    if (inlineStyleMatches && inlineStyleMatches.length > 3) {
      issues.push({
        type: 'excessive_inline_styles',
        line: index + 1,
        content: trimmed,
        severity: 'MEDIUM',
        description: 'Excessive inline styles detected',
        suggestion: 'Extract styles to CSS classes for better maintainability'
      });
    }
    
    // Check for missing error handling in forms
    if (trimmed.includes('<form') || trimmed.includes('<input')) {
      if (!content.includes('error') && !content.includes('validation')) {
        issues.push({
          type: 'missing_error_handling',
          line: index + 1,
          content: trimmed,
          severity: 'HIGH',
          description: 'Form elements without error handling',
          suggestion: 'Add validation and error message display'
        });
      }
    }
  });
  
  return issues;
}

module.exports = {
  analyzeUsabilityIssues
};