feat: 50 component-level improvements — accessibility, UX, error handling, polish

Smarter defaults (10):
- inputMode for numeric/email/url/tel fields
- Capitalize enum display values in pills and dropdowns
- type="submit" on primary footer button

Accessibility (10):
- aria-invalid, aria-activedescendant, aria-label on all widgets
- Semantic <header> and <footer> elements
- role="switch" with state on toggle
- Full date/time aria-label on datetime block

UX patterns (15):
- Character count shows only at >80% of maxLength
- People picker and tag input show count badges
- Wizard completed steps show checkmark SVG
- Step labels below wizard circles
- Progressive disclosure + icon rotates to x
- Relative time display on datetime ("in 2h")
- Arrow keys hint on number input focus
- Subtle header bottom border

Error handling (10):
- Red border on ALL widgets when validation fails
- Scroll to first error field on submit
- Focus first error input after scrolling

Polish (5):
- data-formweave attribute on root form
- Semantic HTML elements throughout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: amuralit

packages/react/src/Form.tsx

@@ -321,6 +321,34 @@ interface AccordionWrapperProps {
 function AccordionWrapper({ title, defaultOpen, mode, onQuickApprove, onQuickDeny, children }: AccordionWrapperProps) {
   const [open, setOpen] = useState(defaultOpen ?? true);
   const isApproval = mode === 'approval';
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  // Animate height on toggle
+  useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+    if (open) {
+      el.style.height = '0px';
+      el.style.overflow = 'hidden';
+      requestAnimationFrame(() => {
+        el.style.transition = 'height 0.25s ease';
+        el.style.height = `${el.scrollHeight}px`;
+        const handler = () => {
+          el.style.height = 'auto';
+          el.style.overflow = '';
+          el.style.transition = '';
+        };
+        el.addEventListener('transitionend', handler, { once: true });
+      });
+    } else {
+      el.style.height = `${el.scrollHeight}px`;
+      el.style.overflow = 'hidden';
+      requestAnimationFrame(() => {
+        el.style.transition = 'height 0.25s ease';
+        el.style.height = '0px';
+      });
+    }
+  }, [open]);
 
   return (
     <div className={`fw-accordion ${open ? 'fw-accordion--open' : ''}`}>
@@ -344,7 +372,9 @@ function AccordionWrapper({ title, defaultOpen, mode, onQuickApprove, onQuickDen
           {open ? '\u25B2' : '\u25BC'}
         </span>
       </div>
-      {open && <div className="fw-accordion__body">{children}</div>}
+      <div ref={bodyRef} className="fw-accordion__body">
+        {children}
+      </div>
     </div>
   );
 }
@@ -539,8 +569,23 @@ export function Form(props: FormProps) {
         store.getState().setError(field.path, errors[field.path]);
       }
 
-      // If there are errors, don't submit
+      // If there are errors, scroll to and focus the first error field
       if (Object.keys(errors).length > 0) {
+        const firstErrorPath = analysis.fields.find((f) => errors[f.path])?.path;
+        if (firstErrorPath && formRef.current) {
+          const errorEl = formRef.current.querySelector(
+            `[class*="fw-field--has-error"], [aria-invalid="true"]`
+          ) as HTMLElement | null;
+          if (errorEl) {
+            errorEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            requestAnimationFrame(() => {
+              const focusable = errorEl.querySelector<HTMLElement>(
+                'input, textarea, select, button, [tabindex]'
+              );
+              focusable?.focus();
+            });
+          }
+        }
         return;
       }
 
@@ -806,6 +851,7 @@ export function Form(props: FormProps) {
         onSubmit={handleSubmit}
         noValidate
         aria-label={heading || analysis.title || 'Form'}
+        data-formweave=""
       >
         {/* Header for card and panel modes (accordion has its own title) */}
         {(display === 'card' || display === 'panel') &&