#1807·puck

Three icon-only editor controls have no accessible name

Author: SomilKSharmaCreated Aug 17, 2026Updated Aug 17, 2026
Labelsreadytype: bug 🐛

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 (master at 668cfb79)
  • Browser version: any
  • Additional environment info: n/a — visible in source

Steps to reproduce

  1. Open the Puck editor with a config containing an array field and an external field.
  2. Navigate the fields panel with a screen reader (VoiceOver, NVDA) or inspect the accessibility tree in devtools.
  3. 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.