[A11Y] [Medium] Dynamic content changes not announced to screen readers

[continue]

Accessibility Issue: Dynamic Content Changes Not Announced

WCAG Level: A
Severity: Medium
Category: Dynamic Content

Issue Description

Several components update content dynamically (calculation progress, results, errors) without using ARIA live regions. Screen reader users are not notified when important content changes occur.

User Impact

• Affected Users: Screen reader users
• Severity: Users miss important status updates and calculation results

Violations Found

File: app/calculate/page.tsx

Lines: 161-185 (Progress feedback section)

{isCalculating && (
  <div className="mt-5 space-y-4">
    {/* Phase Stepper */}
    {elapsedSeconds >= 3 && (
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
        {phases.map((phase, i) => (
          ...
        ))}
      </div>
    )}
    ...
  </div>
)}

Issue: Progress updates not announced via aria-live

---

File: app/calculate/page.tsx

Lines: 194-205 (Error display)

{error && (
  <div className="flex items-start gap-3 rounded-lg border border-red-500/30 ...">
    <AlertCircle />
    <div>
      <p className="font-mono text-sm font-bold text-red-400">
        Calculation Error
      </p>
      <p className="mt-1 font-mono text-xs text-red-400/80">
        {error}
      </p>
    </div>
  </div>
)}

Issue: Error messages not announced (should use role="alert" or aria-live="assertive")

---

File: components/calculate/structure-info.tsx

Lines: 81-88 (Loading state)

if (parsing) {
  return (
    <div className="mt-3 flex items-center gap-2 ...">
      <div className="h-3 w-3 animate-spin ..." />
      Parsing structure...
    </div>
  );
}

Issue: Loading state not announced

---

File: components/calculate/results-display.tsx

Lines: 76-93 (Status banner)

<div className="flex flex-wrap items-center justify-between gap-3 ...">
  <div className="flex items-center gap-3">
    <div className="h-2.5 w-2.5 rounded-full bg-matrix-green animate-glow-pulse" />
    <span className="font-mono text-sm font-bold text-matrix-green">
      Calculation Complete
    </span>

Issue: Success status not announced to screen reader users

---

Recommended Fix

<!-- Error messages - use role="alert" -->
{error && (
  <div 
    role="alert"
    aria-live="assertive"
    className="flex items-start gap-3 ..."
  >
    <AlertCircle aria-hidden="true" />
    <div>
      <p>Calculation Error</p>
      <p>{error}</p>
    </div>
  </div>
)}

<!-- Progress updates - use aria-live="polite" -->
<div aria-live="polite" aria-atomic="true">
  {isCalculating && (
    <div className="...">
      <span aria-label={`${currentStep}, step ${stepProgress[0]} of ${stepProgress[1]}`}>
        {currentStep}
      </span>
    </div>
  )}
</div>

<!-- Loading states - use aria-busy -->
<div 
  aria-busy={parsing}
  aria-live="polite"
>
  {parsing && <span>Parsing structure...</span>}
</div>

<!-- Success states -->
<div role="status" aria-live="polite">
  <span>Calculation Complete</span>
</div>

Changes Made:

1. Add role="alert" or aria-live="assertive" for errors
2. Add aria-live="polite" for progress updates
3. Add aria-busy="true" during loading states
4. Add role="status" for success messages
5. Use aria-atomic="true" when entire region should be re-read

---

Additional Instances

• components/semiconductor/property-calculator.tsx (progress updates)
• app/community/page.tsx (loading and error states)
• app/mace-freeze/page.tsx (training progress)

Testing Instructions

1. Run a calculation with screen reader active
2. Verify progress updates are announced
3. Trigger an error and verify its announced immediately
4. Verify success message is announced on completion

Resources

• WCAG 4.1.3 Status Messages
• MDN: ARIA live regions
• WebAIM: ARIA

Acceptance Criteria

• Error messages use role="alert"
• Progress updates use aria-live="polite"
• Success messages are announced
• Loading states indicated with aria-busy
• Tested with NVDA/VoiceOver

---