As a screen reader user I want the file upload area to be announced and keyboard-operable so I can log a workout without a mouse

[ChristopherRotnes]

Summary

The drag-and-drop upload zone in MuscleMap.jsx (lines 262–323) is a plain <div> with drag event handlers and an onClick that triggers a hidden <input type=\"file\">. It has no semantic role, no accessible label, and no live region to announce when images are added or removed. Screen reader users have no way to discover or operate the upload area without prior knowledge of how it works.

Priority

High

UI spec (Carbon g100)

• The dropzone <div> must have role=\"region\" and aria-label=\"Last opp treningsbilde\"
• The inner visible instruction text ("Dra og slipp" / "Velg filer") is sufficient as a visual cue; the <button> that triggers the file picker must have clear visible text
• An aria-live=\"polite\" region should be added inside or adjacent to the dropzone; it announces the number of images selected when files are added or removed (e.g. "2 bilder valgt")
• aria-busy=\"true\" should be set on the dropzone container while files are being processed

Acceptance criteria

• Dropzone <div> has role=\"region\" and aria-label
• An aria-live=\"polite\" region announces file count changes to screen readers
• The hidden <input type=\"file\"> is correctly associated with its trigger button
• Upload flow is completable without a mouse (Tab to button → Enter → file picker opens)