pulse-js-framework 1.7.9 → 1.7.10

package/cli/lint.js

@@ -20,6 +20,18 @@ export const LintRules = {
   // Security rules (warnings)
   'xss-vulnerability': { severity: 'warning', fixable: false },
 
+  // Accessibility rules (warnings)
+  'a11y-img-alt': { severity: 'warning', fixable: true },  // Can add alt=""
+  'a11y-button-text': { severity: 'warning', fixable: false },
+  'a11y-link-text': { severity: 'warning', fixable: false },
+  'a11y-input-label': { severity: 'warning', fixable: false },
+  'a11y-click-key': { severity: 'warning', fixable: false },
+  'a11y-no-autofocus': { severity: 'warning', fixable: true },  // Can remove autofocus
+  'a11y-no-positive-tabindex': { severity: 'warning', fixable: true },  // Can change to 0
+  'a11y-heading-order': { severity: 'warning', fixable: false },
+  'a11y-aria-props': { severity: 'warning', fixable: false },
+  'a11y-role-props': { severity: 'warning', fixable: false },
+
   // Usage rules (warnings)
   'unused-import': { severity: 'warning', fixable: true },
   'unused-state': { severity: 'warning', fixable: false },
@@ -136,6 +148,9 @@ export class SemanticAnalyzer {
     // Phase 5: Security checks (XSS detection)
     this.checkSecurity();
 
+    // Phase 6: Accessibility checks
+    this.checkAccessibility();
+
     return this.diagnostics;
   }
 
@@ -639,17 +654,374 @@ export class SemanticAnalyzer {
     }
   }
 
+  /**
+   * Check for accessibility issues
+   */
+  checkAccessibility() {
+    if (!this.ast.view) return;
+
+    this.lastHeadingLevel = 0;
+    this.checkViewAccessibility(this.ast.view);
+  }
+
+  /**
+   * Recursively check view nodes for accessibility
+   */
+  checkViewAccessibility(node) {
+    if (!node) return;
+
+    const children = node.children || [];
+    for (const child of children) {
+      if (!child) continue;
+      this.checkNodeAccessibility(child);
+      this.checkViewAccessibility(child);
+    }
+  }
+
+  /**
+   * Check a single node for accessibility issues
+   */
+  checkNodeAccessibility(node) {
+    if (!node || node.type !== 'Element') return;
+
+    const selector = node.selector || node.tag || '';
+    const tagMatch = selector.match(/^([a-z][a-z0-9]*)/i);
+    const tagName = tagMatch ? tagMatch[1].toLowerCase() : '';
+
+    // Skip custom components (PascalCase)
+    if (/^[A-Z]/.test(tagMatch?.[1] || '')) return;
+
+    const line = node.line || 1;
+    const column = node.column || 1;
+
+    // Extract attributes from selector and directives
+    const attrs = this.extractAttributes(node);
+
+    // Rule: img-alt - Images must have alt attribute
+    if (tagName === 'img') {
+      if (!attrs.has('alt') && !attrs.has('aria-label') && !attrs.has('aria-labelledby')) {
+        const selector = node.selector || 'img';
+        this.addDiagnostic('warning', 'a11y-img-alt',
+          'Image missing alt attribute. Add alt="" for decorative images or descriptive text for informative images.',
+          line, column, {
+            type: 'replace',
+            oldText: selector,
+            newText: selector + '[alt=""]',
+            description: 'Add empty alt attribute for decorative image'
+          });
+      }
+    }
+
+    // Rule: button-text - Buttons must have accessible name
+    if (tagName === 'button') {
+      const hasText = this.hasTextContent(node);
+      const hasAriaLabel = attrs.has('aria-label') || attrs.has('aria-labelledby') || attrs.has('title');
+      if (!hasText && !hasAriaLabel) {
+        this.addDiagnostic('warning', 'a11y-button-text',
+          'Button has no accessible name. Add text content, aria-label, or aria-labelledby.',
+          line, column);
+      }
+    }
+
+    // Rule: link-text - Links must have accessible name
+    if (tagName === 'a') {
+      const hasText = this.hasTextContent(node);
+      const hasAriaLabel = attrs.has('aria-label') || attrs.has('aria-labelledby');
+      const hasImgAlt = this.hasChildWithAlt(node);
+      if (!hasText && !hasAriaLabel && !hasImgAlt) {
+        this.addDiagnostic('warning', 'a11y-link-text',
+          'Link has no accessible name. Add text content, aria-label, or an image with alt.',
+          line, column);
+      }
+    }
+
+    // Rule: input-label - Form inputs must have labels
+    if (['input', 'select', 'textarea'].includes(tagName)) {
+      const inputType = attrs.get('type') || 'text';
+      if (!['hidden', 'submit', 'button', 'reset', 'image'].includes(inputType)) {
+        const hasLabel = attrs.has('aria-label') || attrs.has('aria-labelledby') || attrs.has('id');
+        const hasPlaceholder = attrs.has('placeholder');
+        if (!hasLabel) {
+          const msg = hasPlaceholder
+            ? 'Input uses placeholder but missing label. Placeholder is not a substitute for label.'
+            : 'Form input missing label. Add aria-label, aria-labelledby, or associate with <label>.';
+          this.addDiagnostic('warning', 'a11y-input-label', msg, line, column);
+        }
+      }
+    }
+
+    // Rule: click-key - Click handlers on non-interactive elements need keyboard support
+    if (['div', 'span', 'section', 'article', 'aside', 'main', 'nav', 'header', 'footer', 'p', 'li'].includes(tagName)) {
+      const hasClick = this.hasDirective(node, 'click');
+      const hasKeyHandler = this.hasDirective(node, 'keydown') || this.hasDirective(node, 'keyup') || this.hasDirective(node, 'keypress');
+      const hasRole = attrs.has('role');
+      const hasTabindex = attrs.has('tabindex');
+
+      if (hasClick && !hasKeyHandler && !hasRole) {
+        this.addDiagnostic('warning', 'a11y-click-key',
+          `Click handler on <${tagName}> requires keyboard support. Add role="button", tabindex="0", and onKeyDown handler, or use <button>.`,
+          line, column);
+      }
+    }
+
+    // Rule: no-autofocus - Avoid autofocus as it can disorient screen readers
+    if (attrs.has('autofocus')) {
+      const selector = node.selector || '';
+      // Create fix to remove [autofocus] from selector
+      const fixedSelector = selector.replace(/\[autofocus\]/gi, '');
+      this.addDiagnostic('warning', 'a11y-no-autofocus',
+        'Avoid autofocus - it can disorient screen reader users and cause accessibility issues.',
+        line, column, {
+          type: 'replace',
+          oldText: selector,
+          newText: fixedSelector,
+          description: 'Remove autofocus attribute'
+        });
+    }
+
+    // Rule: no-positive-tabindex - Avoid positive tabindex
+    const tabindex = attrs.get('tabindex');
+    if (tabindex && parseInt(tabindex, 10) > 0) {
+      const selector = node.selector || '';
+      // Create fix to change tabindex to 0
+      const fixedSelector = selector.replace(/\[tabindex=["']?\d+["']?\]/gi, '[tabindex="0"]');
+      this.addDiagnostic('warning', 'a11y-no-positive-tabindex',
+        'Avoid positive tabindex values. Use tabindex="0" or "-1" and rely on DOM order.',
+        line, column, {
+          type: 'replace',
+          oldText: selector,
+          newText: fixedSelector,
+          description: 'Change tabindex to 0'
+        });
+    }
+
+    // Rule: heading-order - Headings should follow hierarchy
+    const headingMatch = tagName.match(/^h([1-6])$/);
+    if (headingMatch) {
+      const level = parseInt(headingMatch[1], 10);
+      if (this.lastHeadingLevel > 0 && level > this.lastHeadingLevel + 1) {
+        this.addDiagnostic('warning', 'a11y-heading-order',
+          `Heading level skipped: <h${this.lastHeadingLevel}> to <h${level}>. Use sequential heading levels.`,
+          line, column);
+      }
+      this.lastHeadingLevel = level;
+    }
+
+    // Rule: aria-props - Check ARIA attribute validity
+    this.checkAriaProps(node, attrs, line, column);
+
+    // Rule: role-props - Check role requirements
+    this.checkRoleProps(node, attrs, tagName, line, column);
+  }
+
+  /**
+   * Extract attributes from node selector and directives
+   */
+  extractAttributes(node) {
+    const attrs = new Map();
+    const selector = node.selector || '';
+
+    // Parse attributes from selector [attr=value] or [attr]
+    const attrRegex = /\[([a-z][a-z0-9-]*)(?:=["']?([^"'\]]+)["']?)?\]/gi;
+    let match;
+    while ((match = attrRegex.exec(selector)) !== null) {
+      attrs.set(match[1].toLowerCase(), match[2] || true);
+    }
+
+    // Check directives for attributes
+    for (const directive of node.directives || []) {
+      if (directive.name === 'attr' || directive.name === 'bind') {
+        const attrName = directive.arg || directive.attribute;
+        if (attrName) {
+          attrs.set(attrName.toLowerCase(), directive.value || true);
+        }
+      }
+    }
+
+    // Check props for component-like attribute passing
+    if (node.props) {
+      for (const prop of Object.keys(node.props)) {
+        attrs.set(prop.toLowerCase(), node.props[prop]);
+      }
+    }
+
+    return attrs;
+  }
+
+  /**
+   * Check if node has text content
+   */
+  hasTextContent(node) {
+    if (node.textContent && node.textContent.length > 0) {
+      return node.textContent.some(t => {
+        // Direct string
+        if (typeof t === 'string' && t.trim().length > 0) return true;
+        // Interpolation
+        if (typeof t === 'object' && t.type === 'Interpolation') return true;
+        // TextNode with parts
+        if (typeof t === 'object' && t.type === 'TextNode' && t.parts) {
+          return t.parts.some(part =>
+            (typeof part === 'string' && part.trim().length > 0) ||
+            (typeof part === 'object')
+          );
+        }
+        return false;
+      });
+    }
+    // Check children for text nodes
+    if (node.children) {
+      return node.children.some(child =>
+        child && (child.type === 'TextNode' || this.hasTextContent(child))
+      );
+    }
+    return false;
+  }
+
+  /**
+   * Check if node has child with alt attribute
+   */
+  hasChildWithAlt(node) {
+    if (!node.children) return false;
+    return node.children.some(child => {
+      if (!child) return false;
+      const selector = child.selector || child.tag || '';
+      if (/^img/i.test(selector) && /\[alt/.test(selector)) {
+        return true;
+      }
+      return this.hasChildWithAlt(child);
+    });
+  }
+
+  /**
+   * Check if node has a specific directive
+   */
+  hasDirective(node, name) {
+    if (!node.directives) return false;
+    return node.directives.some(d =>
+      d.name === name ||
+      d.event === name ||
+      (d.type === 'EventDirective' && d.event === name)
+    );
+  }
+
+  /**
+   * Check ARIA attribute validity
+   */
+  checkAriaProps(node, attrs, line, column) {
+    const validAriaAttrs = new Set([
+      'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-braillelabel',
+      'aria-brailleroledescription', 'aria-busy', 'aria-checked', 'aria-colcount',
+      'aria-colindex', 'aria-colindextext', 'aria-colspan', 'aria-controls',
+      'aria-current', 'aria-describedby', 'aria-description', 'aria-details',
+      'aria-disabled', 'aria-dropeffect', 'aria-errormessage', 'aria-expanded',
+      'aria-flowto', 'aria-grabbed', 'aria-haspopup', 'aria-hidden', 'aria-invalid',
+      'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live',
+      'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation',
+      'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly',
+      'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount',
+      'aria-rowindex', 'aria-rowindextext', 'aria-rowspan', 'aria-selected',
+      'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow',
+      'aria-valuetext'
+    ]);
+
+    for (const [attr] of attrs) {
+      if (attr.startsWith('aria-') && !validAriaAttrs.has(attr)) {
+        this.addDiagnostic('warning', 'a11y-aria-props',
+          `Invalid ARIA attribute: ${attr}`,
+          line, column);
+      }
+    }
+  }
+
+  /**
+   * Check role-specific required attributes
+   */
+  checkRoleProps(node, attrs, tagName, line, column) {
+    const role = attrs.get('role');
+    if (!role) return;
+
+    const roleRequirements = {
+      'checkbox': ['aria-checked'],
+      'combobox': ['aria-expanded'],
+      'heading': ['aria-level'],
+      'meter': ['aria-valuenow'],
+      'option': [],
+      'progressbar': [],
+      'radio': ['aria-checked'],
+      'scrollbar': ['aria-controls', 'aria-valuenow'],
+      'separator': [],
+      'slider': ['aria-valuenow'],
+      'spinbutton': [],
+      'switch': ['aria-checked'],
+      'tab': [],
+      'tabpanel': [],
+      'treeitem': []
+    };
+
+    const required = roleRequirements[role];
+    if (required && required.length > 0) {
+      for (const reqAttr of required) {
+        if (!attrs.has(reqAttr)) {
+          this.addDiagnostic('warning', 'a11y-role-props',
+            `Role "${role}" requires ${reqAttr} attribute`,
+            line, column);
+        }
+      }
+    }
+
+    // Check for redundant roles on semantic elements
+    const implicitRoles = {
+      'button': 'button',
+      'a': 'link',
+      'input': 'textbox',
+      'img': 'img',
+      'nav': 'navigation',
+      'main': 'main',
+      'header': 'banner',
+      'footer': 'contentinfo',
+      'aside': 'complementary',
+      'form': 'form',
+      'table': 'table',
+      'ul': 'list',
+      'ol': 'list',
+      'li': 'listitem'
+    };
+
+    if (implicitRoles[tagName] === role) {
+      this.addDiagnostic('warning', 'a11y-role-props',
+        `Redundant role="${role}" on <${tagName}> - element has implicit role`,
+        line, column);
+    }
+  }
+
   /**
    * Add a diagnostic message
+   * @param {string} severity - 'error' | 'warning' | 'info'
+   * @param {string} code - Rule code
+   * @param {string} message - Diagnostic message
+   * @param {number} line - Line number
+   * @param {number} column - Column number
+   * @param {Object} [fix] - Optional fix information
+   * @param {string} [fix.type] - Fix type: 'replace' | 'insert' | 'delete'
+   * @param {string} [fix.oldText] - Text to replace (for 'replace')
+   * @param {string} [fix.newText] - Replacement text
+   * @param {number} [fix.start] - Start position in source
+   * @param {number} [fix.end] - End position in source
    */
-  addDiagnostic(severity, code, message, line, column) {
-    this.diagnostics.push({
+  addDiagnostic(severity, code, message, line, column, fix = null) {
+    const diag = {
       severity,
       code,
       message,
       line: line || 1,
       column: column || 1
-    });
+    };
+
+    if (fix && LintRules[code]?.fixable) {
+      diag.fix = fix;
+    }
+
+    this.diagnostics.push(diag);
   }
 }
 
@@ -702,6 +1074,47 @@ export async function lintFile(filePath, options = {}) {
   };
 }
 
+/**
+ * Apply fixes to a source file
+ * @param {string} source - Original source code
+ * @param {Array} diagnostics - Diagnostics with fixes
+ * @returns {{fixed: string, count: number}} Fixed source and fix count
+ */
+export function applyFixes(source, diagnostics) {
+  // Get fixable diagnostics, sorted by line in reverse order to avoid offset issues
+  const fixable = diagnostics
+    .filter(d => d.fix && d.fix.oldText && d.fix.newText)
+    .sort((a, b) => b.line - a.line);
+
+  if (fixable.length === 0) {
+    return { fixed: source, count: 0 };
+  }
+
+  let fixed = source;
+  let count = 0;
+
+  for (const diag of fixable) {
+    const { fix } = diag;
+
+    // Find and replace the old text with new text
+    // We do line-by-line replacement to be more precise
+    const lines = fixed.split('\n');
+    const lineIndex = diag.line - 1;
+
+    if (lineIndex >= 0 && lineIndex < lines.length) {
+      const line = lines[lineIndex];
+      if (line.includes(fix.oldText)) {
+        lines[lineIndex] = line.replace(fix.oldText, fix.newText);
+        count++;
+      }
+    }
+
+    fixed = lines.join('\n');
+  }
+
+  return { fixed, count };
+}
+
 /**
  * Lint files and return summary
  * @param {string[]} files - Files to lint
@@ -718,11 +1131,36 @@ async function lintFiles(files, options = {}) {
   let totalErrors = 0;
   let totalWarnings = 0;
   let totalInfo = 0;
+  let totalFixed = 0;
 
   for (const file of files) {
     const result = await lintFile(file, { fix });
     const relPath = relativePath(file);
 
+    // Apply fixes if requested
+    if (fix && result.diagnostics.some(d => d.fix)) {
+      const source = readFileSync(file, 'utf-8');
+      const { fixed, count } = applyFixes(source, result.diagnostics);
+
+      if (count > 0) {
+        if (dryRun) {
+          if (!quiet) {
+            log.info(`\n${relPath} - ${count} fix(es) available (dry run)`);
+          }
+        } else {
+          writeFileSync(file, fixed, 'utf-8');
+          if (!quiet) {
+            log.success(`\n${relPath} - ${count} fix(es) applied`);
+          }
+        }
+        totalFixed += count;
+
+        // Re-lint to show remaining issues
+        const recheck = await lintFile(file, {});
+        result.diagnostics = recheck.diagnostics;
+      }
+    }
+
     if (result.diagnostics.length > 0 && !quiet) {
       log.info(`\n${relPath}`);
 
@@ -742,6 +1180,7 @@ async function lintFiles(files, options = {}) {
     errors: totalErrors,
     warnings: totalWarnings,
     info: totalInfo,
+    fixed: totalFixed,
     elapsed: timer.elapsed()
   };
 }

package/compiler/lexer.js

@@ -697,6 +697,12 @@ export class Lexer {
     let inView = false;
     let parenDepth = 0;
 
+    // After @ token, next word is directive name (not selector)
+    const lastToken = this.tokens[this.tokens.length - 1];
+    if (lastToken && lastToken.type === TokenType.AT) {
+      return false;
+    }
+
     for (let i = this.tokens.length - 1; i >= 0; i--) {
       const token = this.tokens[i];
 

package/compiler/parser.js

@@ -27,6 +27,12 @@ export const NodeType = {
   IfDirective: 'IfDirective',
   EachDirective: 'EachDirective',
   EventDirective: 'EventDirective',
+
+  // Accessibility directives
+  A11yDirective: 'A11yDirective',
+  LiveDirective: 'LiveDirective',
+  FocusTrapDirective: 'FocusTrapDirective',
+
   Property: 'Property',
   ObjectLiteral: 'ObjectLiteral',
   ArrayLiteral: 'ArrayLiteral',
@@ -770,6 +776,20 @@ export class Parser {
       return this.parseEachDirective();
     }
 
+    // Accessibility directives
+    if (name === 'a11y') {
+      return this.parseA11yDirective();
+    }
+    if (name === 'live') {
+      return this.parseLiveDirective();
+    }
+    if (name === 'focusTrap') {
+      return this.parseFocusTrapDirective();
+    }
+    if (name === 'srOnly') {
+      return this.parseSrOnlyDirective();
+    }
+
     // Event directive like @click
     return this.parseEventDirective(name);
   }
@@ -781,7 +801,21 @@ export class Parser {
     this.expect(TokenType.AT);
     const name = this.expect(TokenType.IDENT).value;
 
-    // Event directive
+    // Check for a11y directives
+    if (name === 'a11y') {
+      return this.parseA11yDirective();
+    }
+    if (name === 'live') {
+      return this.parseLiveDirective();
+    }
+    if (name === 'focusTrap') {
+      return this.parseFocusTrapDirective();
+    }
+    if (name === 'srOnly') {
+      return this.parseSrOnlyDirective();
+    }
+
+    // Event directive (click, submit, etc.)
     this.expect(TokenType.LPAREN);
     const expression = this.parseExpression();
     this.expect(TokenType.RPAREN);
@@ -866,6 +900,115 @@ export class Parser {
     return new ASTNode(NodeType.EventDirective, { event, handler, children });
   }
 
+  /**
+   * Parse @a11y directive - sets aria attributes
+   * @a11y(label="Close menu") or @a11y(label="Close", describedby="desc")
+   */
+  parseA11yDirective() {
+    this.expect(TokenType.LPAREN);
+
+    const attrs = {};
+
+    // Parse key=value pairs
+    while (!this.is(TokenType.RPAREN) && !this.is(TokenType.EOF)) {
+      const key = this.expect(TokenType.IDENT).value;
+      this.expect(TokenType.EQ);
+
+      let value;
+      if (this.is(TokenType.STRING)) {
+        value = this.advance().value;
+      } else if (this.is(TokenType.TRUE)) {
+        value = true;
+        this.advance();
+      } else if (this.is(TokenType.FALSE)) {
+        value = false;
+        this.advance();
+      } else if (this.is(TokenType.IDENT)) {
+        // Treat unquoted identifier as a string (e.g., role=dialog -> "dialog")
+        value = this.advance().value;
+      } else {
+        value = this.parseExpression();
+      }
+
+      attrs[key] = value;
+
+      if (this.is(TokenType.COMMA)) {
+        this.advance();
+      }
+    }
+
+    this.expect(TokenType.RPAREN);
+
+    return new ASTNode(NodeType.A11yDirective, { attrs });
+  }
+
+  /**
+   * Parse @live directive - creates live region for screen readers
+   * @live(polite) or @live(assertive)
+   */
+  parseLiveDirective() {
+    this.expect(TokenType.LPAREN);
+
+    let priority = 'polite';
+    if (this.is(TokenType.IDENT)) {
+      priority = this.advance().value;
+    }
+
+    this.expect(TokenType.RPAREN);
+
+    return new ASTNode(NodeType.LiveDirective, { priority });
+  }
+
+  /**
+   * Parse @focusTrap directive - traps focus within element
+   * @focusTrap or @focusTrap(autoFocus=true)
+   */
+  parseFocusTrapDirective() {
+    const options = {};
+
+    if (this.is(TokenType.LPAREN)) {
+      this.advance();
+
+      while (!this.is(TokenType.RPAREN) && !this.is(TokenType.EOF)) {
+        const key = this.expect(TokenType.IDENT).value;
+
+        if (this.is(TokenType.EQ)) {
+          this.advance();
+          if (this.is(TokenType.TRUE)) {
+            options[key] = true;
+            this.advance();
+          } else if (this.is(TokenType.FALSE)) {
+            options[key] = false;
+            this.advance();
+          } else if (this.is(TokenType.STRING)) {
+            options[key] = this.advance().value;
+          } else {
+            options[key] = this.parseExpression();
+          }
+        } else {
+          options[key] = true;
+        }
+
+        if (this.is(TokenType.COMMA)) {
+          this.advance();
+        }
+      }
+
+      this.expect(TokenType.RPAREN);
+    }
+
+    return new ASTNode(NodeType.FocusTrapDirective, { options });
+  }
+
+  /**
+   * Parse @srOnly directive - visually hidden but accessible text
+   */
+  parseSrOnlyDirective() {
+    return new ASTNode(NodeType.A11yDirective, {
+      attrs: { srOnly: true }
+    });
+  }
+
   /**
    * Parse expression
    */

package/compiler/transformer/imports.js

@@ -47,6 +47,21 @@ export function generateImports(transformer) {
 
   lines.push(`import { ${runtimeImports.join(', ')} } from '${options.runtime}';`);
 
+  // A11y imports (if a11y features are used)
+  const a11yImports = [];
+  if (transformer.usesA11y.srOnly) {
+    a11yImports.push('srOnly');
+  }
+  if (transformer.usesA11y.trapFocus) {
+    a11yImports.push('trapFocus');
+  }
+  if (transformer.usesA11y.announce) {
+    a11yImports.push('announce');
+  }
+  if (a11yImports.length > 0) {
+    lines.push(`import { ${a11yImports.join(', ')} } from '${options.runtime}/a11y';`);
+  }
+
   // Router imports (if router block exists)
   if (ast.router) {
     lines.push(`import { createRouter } from '${options.runtime}/router';`);