Three icon-only editor controls have no accessible name
Description
Three controls in the Puck editor render only an icon, with no text content and no aria-label. Screen readers announce them as an unlabelled "button" or "combo box", so it is not possible to tell what they do.
| Control | File |
|---|---|
Detach external item (<Unlock />) |
packages/core/components/ExternalInput/index.tsx |
Add array item (<Plus />) |
packages/core/components/AutoField/fields/ArrayField/index.tsx |
Zoom level <select> |
packages/core/components/ViewportControls/index.tsx |
This looks like an oversight rather than a decision — the neighbouring controls in each of those files are already labelled via useMessage, and IconButton sets aria-label={title}. These three seem to have been missed.
Environment
- Puck version: 0.23.0 (
masterat 668cfb79) - Browser version: any
- Additional environment info: n/a — visible in source
Steps to reproduce
- Open the Puck editor with a config containing an array field and an external field.
- Navigate the fields panel with a screen reader (VoiceOver, NVDA) or inspect the accessibility tree in devtools.
- Focus the add-item button, the detach button, or the zoom select.
Expected behaviour
Each control is announced with a meaningful name, e.g. "Add item, button".
Actual behaviour
Each is announced only by role — "button", "combo box" — with no name.
Happy to send a PR. The fix is additive: three new defaultDictionary keys following the existing {area}-{name}-{variant} convention, plus aria-label wired through useMessage in each component. No visual or behavioural change.
For disclosure: I found these with a static accessibility linter I maintain. I have deliberately left out the more debatable findings (the modal backdrop, the resize handle) since those are design calls rather than clear defects.
Source: puckeditor/puck