payloadcms / payloadcms/payload

Admin list filters: condition controls have no accessible names

Open Beginner friendly
#18,067 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug
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:

Link to the code that reproduces this issue

https://github.com/payloadcms/payload/blob/v3.85.1/packages/ui/src/elements/WhereBuilder/Condition/index.tsx#L140-L216

This is stock admin markup, not application-specific code. A blank scaffold with any filterable collection renders the same WhereBuilder / Condition controls.

Reproduction Steps
  1. Run pnpx create-payload-app@3.85.1 -t blank and create at least one document in a collection.
  2. Open that collection's list view in the admin.
  3. Open Filters and add one condition.
  4. Inspect the two comboboxes and the plus / remove icon buttons, or run axe-core.
  5. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.