[A11Y] [Critical] Missing accessible names for interactive elements

[continue]

Accessibility Issue: Missing Accessible Names for Interactive Elements

WCAG Level: A
Severity: Critical
Category: Form Accessibility / Keyboard Navigation

Issue Description

Several interactive elements (buttons, links, inputs) throughout the application lack accessible names. Screen readers cannot convey the purpose of these controls to users with visual impairments.

User Impact

• Affected Users: Blind and low-vision users
• Severity: Users cannot understand the purpose of interactive controls

Violations Found

File: components/calculate/file-upload-section.tsx

Lines: 78-84

<button
  onClick={removeFile}
  className="text-zinc-500 transition-colors hover:text-red-400"
>
  <X className="h-4 w-4" />
</button>

Issue: Button has no accessible name - only contains an icon

---

File: components/calculate/file-upload-section.tsx

Lines: 53-61

<input
  type="file"
  accept={ACCEPTED_FORMATS.join(",")}
  onChange={handleFileInput}
  className="absolute inset-0 cursor-pointer opacity-0"
/>

Issue: File input has no associated label or aria-label

---

File: components/calculate/structure-preview.tsx

Lines: 139-148

<button
  type="button"
  onClick={handleClose}
  title="Close preview"
  className="text-zinc-500 transition-colors hover:text-red-400"
>
  <X className="h-4 w-4" />
</button>

Issue: Button relies only on title attribute, needs aria-label

---

File: components/calculate/molecule-viewer-3d.tsx

Lines: Multiple icon-only buttons in toolbar
Issue: Toolbar buttons (representation toggles, spin, reset) have no accessible names

---

Recommended Fix

<!-- Fixed Code -->
<button
  onClick={removeFile}
  aria-label="Remove file"
  className="text-zinc-500 transition-colors hover:text-red-400"
>
  <X className="h-4 w-4" aria-hidden="true" />
</button>

Changes Made:

1. Add aria-label to all icon-only buttons
2. Add aria-hidden="true" to decorative icons
3. Add labels to file inputs via aria-label or associated <label>

---

Additional Instances

• components/calculate/mlpeg-catalog.tsx (close button)
• components/calculate/results-display.tsx (download buttons)
• components/semiconductor/defect-generator.tsx (various buttons)
• components/mace-freeze/dataset-upload.tsx (remove button)
• app/mace-freeze/page.tsx (multiple toolbar buttons)

Testing Instructions

1. Use screen reader (NVDA/JAWS/VoiceOver) to navigate to each button
2. Verify button purpose is announced
3. Use keyboard (Tab) to reach all interactive elements
4. Confirm focus indicator is visible

Resources

• WCAG 4.1.2 Name, Role, Value
• MDN: Using aria-label

Acceptance Criteria

• All icon-only buttons have aria-label
• File inputs have associated labels
• Tested with screen reader
• Keyboard navigation works as expected

---