pulse-js-framework 1.7.9 → 1.7.10

package/runtime/dom-binding.js

@@ -8,6 +8,9 @@
 import { effect, onCleanup } from './pulse.js';
 import { sanitizeUrl, safeSetStyle } from './utils.js';
 import { getAdapter } from './dom-adapter.js';
+import { loggers } from './logger.js';
+
+const log = loggers.dom;
 
 // =============================================================================
 // URL ATTRIBUTES (XSS Protection)
@@ -53,8 +56,8 @@ export function bind(element, attr, getValue) {
         if (isUrlAttr) {
           const sanitized = sanitizeUrl(String(value));
           if (sanitized === null) {
-            console.warn(
-              `[Pulse Security] Dangerous URL blocked in bind() for ${attr}: "${String(value).slice(0, 50)}"`
+            log.warn(
+              `[Security] Dangerous URL blocked in bind() for ${attr}: "${String(value).slice(0, 50)}"`
             );
             dom.removeAttribute(element, attr);
             return;
@@ -70,8 +73,8 @@ export function bind(element, attr, getValue) {
     if (isUrlAttr) {
       const sanitized = sanitizeUrl(String(getValue));
       if (sanitized === null) {
-        console.warn(
-          `[Pulse Security] Dangerous URL blocked in bind() for ${attr}: "${String(getValue).slice(0, 50)}"`
+        log.warn(
+          `[Security] Dangerous URL blocked in bind() for ${attr}: "${String(getValue).slice(0, 50)}"`
         );
         return element;
       }

package/runtime/dom-element.js

@@ -17,6 +17,193 @@ const log = loggers.dom;
 // ELEMENT CREATION
 // =============================================================================
 
+// A11y configuration
+let a11yConfig = {
+  enabled: true,
+  autoAria: true,
+  warnMissingAlt: true,
+  warnMissingLabel: true
+};
+
+/**
+ * Configure accessibility features
+ * @param {object} config - A11y configuration
+ */
+export function configureA11y(config) {
+  a11yConfig = { ...a11yConfig, ...config };
+}
+
+/**
+ * Apply automatic ARIA attributes based on element type
+ * @private
+ */
+function applyAutoAria(element, tag, attrs, dom) {
+  if (!a11yConfig.enabled || !a11yConfig.autoAria) return;
+
+  const hasAttr = (name) => attrs[name] !== undefined || dom.getAttribute?.(element, name);
+
+  switch (tag) {
+    case 'dialog':
+      // Dialogs should have role and modal indication
+      if (!hasAttr('role')) {
+        safeSetAttribute(element, 'role', 'dialog', {}, dom);
+      }
+      if (!hasAttr('aria-modal')) {
+        safeSetAttribute(element, 'aria-modal', 'true', {}, dom);
+      }
+      break;
+
+    case 'nav':
+      // Navigation landmarks benefit from labels
+      if (!hasAttr('aria-label') && !hasAttr('aria-labelledby') && a11yConfig.warnMissingLabel) {
+        log.warn('A11y: <nav> element should have aria-label or aria-labelledby for accessibility');
+      }
+      break;
+
+    case 'main':
+    case 'header':
+    case 'footer':
+    case 'aside':
+      // Landmark roles - warn if multiple without labels
+      if (!hasAttr('aria-label') && !hasAttr('aria-labelledby')) {
+        // These are valid as landmarks, just note for multiple instances
+      }
+      break;
+
+    case 'img':
+      // Images must have alt
+      if (!hasAttr('alt') && !hasAttr('aria-label') && !hasAttr('aria-hidden') && a11yConfig.warnMissingAlt) {
+        log.warn('A11y: <img> element missing alt attribute. Add alt="" for decorative images.');
+      }
+      break;
+
+    case 'input':
+    case 'textarea':
+    case 'select':
+      // Form controls need labels
+      if (!hasAttr('aria-label') && !hasAttr('aria-labelledby') && !hasAttr('id') && a11yConfig.warnMissingLabel) {
+        const inputType = attrs.type || 'text';
+        if (!['hidden', 'submit', 'button', 'reset', 'image'].includes(inputType)) {
+          log.warn(`A11y: <${tag}> element should have aria-label, aria-labelledby, or an associated <label>`);
+        }
+      }
+      break;
+
+    case 'button':
+      // Buttons are already focusable, ensure type if not specified
+      if (!hasAttr('type')) {
+        safeSetAttribute(element, 'type', 'button', {}, dom);
+      }
+      break;
+
+    case 'a':
+      // Links without href should have role="button" if interactive
+      if (!hasAttr('href') && !hasAttr('role')) {
+        safeSetAttribute(element, 'role', 'button', {}, dom);
+        if (!hasAttr('tabindex')) {
+          safeSetAttribute(element, 'tabindex', '0', {}, dom);
+        }
+      }
+      break;
+
+    case 'ul':
+    case 'ol':
+      // Lists with role="menu" or "listbox" need special handling
+      if (attrs.role === 'menu' || attrs.role === 'listbox') {
+        if (!hasAttr('aria-label') && !hasAttr('aria-labelledby')) {
+          log.warn(`A11y: <${tag} role="${attrs.role}"> should have aria-label or aria-labelledby`);
+        }
+      }
+      break;
+
+    case 'table':
+      // Tables benefit from captions or aria-label
+      if (!hasAttr('aria-label') && !hasAttr('aria-labelledby')) {
+        // Will be checked if no <caption> child is found later
+      }
+      break;
+
+    case 'progress':
+      // Progress should have accessible name
+      if (!hasAttr('aria-label') && !hasAttr('aria-labelledby')) {
+        log.warn('A11y: <progress> element should have aria-label or aria-labelledby');
+      }
+      break;
+
+    case 'meter':
+      // Meter should have accessible name
+      if (!hasAttr('aria-label') && !hasAttr('aria-labelledby')) {
+        log.warn('A11y: <meter> element should have aria-label or aria-labelledby');
+      }
+      break;
+  }
+
+  // Handle role-specific requirements
+  const role = attrs.role;
+  if (role) {
+    applyRoleRequirements(element, role, attrs, dom);
+  }
+}
+
+/**
+ * Apply ARIA requirements for specific roles
+ * @private
+ */
+function applyRoleRequirements(element, role, attrs, dom) {
+  const hasAttr = (name) => attrs[name] !== undefined;
+
+  switch (role) {
+    case 'checkbox':
+    case 'radio':
+    case 'switch':
+      if (!hasAttr('aria-checked')) {
+        safeSetAttribute(element, 'aria-checked', 'false', {}, dom);
+      }
+      break;
+
+    case 'slider':
+    case 'spinbutton':
+    case 'progressbar':
+      if (!hasAttr('aria-valuenow')) {
+        safeSetAttribute(element, 'aria-valuenow', '0', {}, dom);
+      }
+      if (!hasAttr('aria-valuemin')) {
+        safeSetAttribute(element, 'aria-valuemin', '0', {}, dom);
+      }
+      if (!hasAttr('aria-valuemax')) {
+        safeSetAttribute(element, 'aria-valuemax', '100', {}, dom);
+      }
+      break;
+
+    case 'combobox':
+      if (!hasAttr('aria-expanded')) {
+        safeSetAttribute(element, 'aria-expanded', 'false', {}, dom);
+      }
+      break;
+
+    case 'tablist':
+      if (!hasAttr('aria-orientation')) {
+        safeSetAttribute(element, 'aria-orientation', 'horizontal', {}, dom);
+      }
+      break;
+
+    case 'tab':
+      if (!hasAttr('aria-selected')) {
+        safeSetAttribute(element, 'aria-selected', 'false', {}, dom);
+      }
+      break;
+
+    case 'button':
+    case 'link':
+    case 'menuitem':
+      // Ensure focusability for interactive roles on non-focusable elements
+      if (!hasAttr('tabindex')) {
+        safeSetAttribute(element, 'tabindex', '0', {}, dom);
+      }
+      break;
+  }
+}
+
 /**
  * Create a DOM element from a CSS selector-like string
  *
@@ -42,6 +229,9 @@ export function el(selector, ...children) {
     safeSetAttribute(element, key, value, {}, dom);
   }
 
+  // Apply automatic ARIA attributes based on element type
+  applyAutoAria(element, config.tag, config.attrs, dom);
+
   // Process children
   for (const child of children) {
     appendChild(element, child);
@@ -138,5 +328,6 @@ export function text(getValue) {
 
 export default {
   el,
-  text
+  text,
+  configureA11y
 };

package/runtime/dom.js

@@ -38,8 +38,8 @@ import {
   resetCacheMetrics
 } from './dom-selector.js';
 
-// Core element creation
-import { el, text } from './dom-element.js';
+// Core element creation and a11y configuration
+import { el, text, configureA11y } from './dom-element.js';
 
 // Reactive bindings
 import { bind, prop, cls, style, on, model } from './dom-binding.js';
@@ -99,6 +99,9 @@ export {
   el,
   text,
 
+  // Accessibility
+  configureA11y,
+
   // Reactive bindings
   bind,
   prop,
@@ -140,6 +143,9 @@ export default {
   el,
   text,
 
+  // Accessibility
+  configureA11y,
+
   // Reactive bindings
   bind,
   prop,

package/runtime/index.js

@@ -8,6 +8,7 @@ export * from './router.js';
 export * from './store.js';
 export * from './native.js';
 export * from './logger.js';
+export * from './a11y.js';
 
 export { default as PulseCore } from './pulse.js';
 export { default as PulseDOM } from './dom.js';
@@ -15,3 +16,4 @@ export { default as PulseRouter } from './router.js';
 export { default as PulseStore } from './store.js';
 export { default as PulseNative } from './native.js';
 export { default as PulseLogger } from './logger.js';
+export { default as PulseA11y } from './a11y.js';

package/runtime/native.js

@@ -9,6 +9,7 @@
 
 import { pulse, effect, batch } from './pulse.js';
 import { loggers } from './logger.js';
+import { DANGEROUS_KEYS } from './security.js';
 
 const log = loggers.native;
 
@@ -205,8 +206,7 @@ function _validateBridge(bridge) {
   }
 
   // 7. Check for suspicious properties (potential tampering)
-  const suspiciousProps = ['eval', 'Function', '__proto__', 'constructor'];
-  for (const prop of suspiciousProps) {
+  for (const prop of DANGEROUS_KEYS) {
     if (prop in bridge && typeof bridge[prop] === 'function') {
       warnings.push(`Suspicious property detected on bridge: ${prop}`);
     }