payloadcms / payloadcms/payload
Admin list filters: condition controls have no accessible names
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Description
Describe the Bug
Each condition row in the stock admin list filter builder renders four controls without accessible names:
- the field
ReactSelect(.condition__field) - the operator
ReactSelect(.condition__operator) - the icon-only remove button (
.condition__actions-remove) - the icon-only add-AND button (
.condition__actions-add)
Screen-reader users encounter unnamed comboboxes and buttons, so they cannot tell which control chooses a field/operator or whether an icon adds or removes a condition. axe-core reports the resulting select-name / button-name findings as critical.
A downstream audit on Payload 3.85.1 observed this on 41 of 44 stock collection list views: 82 critical rule occurrences (41 list-route observations × the two rules; each occurrence contains the two affected nodes for that control type).
The controls are rendered without label props or text in Condition:
- field/operator selects: https://github.com/payloadcms/payload/blob/v3.85.1/packages/ui/src/elements/WhereBuilder/Condition/index.tsx#L140-L170
- remove/add buttons: https://github.com/payloadcms/payload/blob/v3.85.1/packages/ui/src/elements/WhereBuilder/Condition/index.tsx#L188-L216
Link to the code that reproduces this issue
This is stock admin markup, not application-specific code. A blank scaffold with any filterable collection renders the same WhereBuilder / Condition controls.
Reproduction Steps
- Run
pnpx create-payload-app@3.85.1 -t blankand create at least one document in a collection. - Open that collection's list view in the admin.
- Open Filters and add one condition.
- Inspect the two comboboxes and the plus / remove icon buttons, or run axe-core.
- Observe that none of the four controls has an accessible name.
Which area(s) are affected?
area: ui
Environment Info
payload: 3.85.1
@payloadcms/ui: 3.85.1
Next.js: 16.2.10
Node: 24.20.0
Browser: Chromium 152.0.7977.64 (agent-browser 0.35.1)
axe-core: 4.12.1
Possible fix
Give the field and operator ReactSelect controls localized labels (for example via aria-label / aria-labelledby) and give the two icon buttons localized add-condition / remove-condition accessible names. The icons can remain visual-only once the button names carry the meaning.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/ui/src/elements/WhereBuilder/Condition/index.tsx around lines 140-216, where the field and operator ReactSelect controls and the add/remove buttons are rendered. Reproduce the issue with a blank Payload app and inspect the controls with axe-core. Done means all four controls have localized accessible names and the select-name and button-name findings are resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100