Admin list view: row-select checkboxes have no accessible name (aria-label="" with no aria-labelledby target)

[citydean]

Describe the Bug

Every row-select checkbox in the admin list view renders with an empty accessible name, so screen-reader users hear only "checkbox, unchecked" with no indication of which row it selects. axe-core reports this as a critical label violation — 10 nodes per page (one per row).

Rendered markup, stock admin list view, any collection:

<input aria-label="" id="_R_26kjakuatpesneb6jd9etb_" type="checkbox">

Root cause (verified on main)

CheckboxInput hardcodes an empty aria-label and defers naming to aria-labelledby:

payload/packages/ui/src/fields/Checkbox/Input.tsx

Lines 88 to 89 in 6981aca

	aria-label=""
	aria-labelledby={name}

aria-label=""
aria-labelledby={name}

SelectRow renders it with no name and no label:

payload/packages/ui/src/elements/SelectRow/index.tsx

Lines 32 to 38 in 6981aca

	<CheckboxInput
	checked={Boolean(selected.get(rowData.id))}
	className={[baseClass, `${baseClass}__checkbox`].join(' ')}
	onToggle={() => setSelection(rowData.id)}
	variant="muted"
	/>
	)

<CheckboxInput
  checked={Boolean(selected.get(rowData.id))}
  className={[baseClass, `${baseClass}__checkbox`].join(' ')}
  onToggle={() => setSelection(rowData.id)}
  variant="muted"
/>

With name undefined React omits aria-labelledby entirely, leaving only aria-label="". The explicit empty string is the crux — it actively suppresses the name rather than merely failing to supply one.

Link to the code that reproduces this issue

The permalinks above — this is stock admin markup, not configuration-dependent, so a scaffolded repo would only re-render Payload's own SelectRow/CheckboxInput. Both files are unchanged on main at 6981aca. Happy to push a create-payload-app -t blank repo if you'd still like one; it would be the default template with no changes.

Reproduction Steps

1. pnpx create-payload-app@latest -t blank
2. Open /admin/collections/<any-collection> with at least one row.
3. Inspect a row-select checkbox — or run axe-core against the page.
4. Observe aria-label="", no aria-labelledby, and no accessible name.

Which area(s) are affected?

area: ui

Environment Info

payload:         3.84.1
@payloadcms/ui:  3.84.1
Next.js:         16.2.6
Node:            25
Browser:         Chrome 141 (headless)
axe-core:        4.12.1

Root cause verified present in main at 6981aca.

Possible fix

Passing a per-row label from SelectRow — e.g. aria-label={Select ${title}} using the collection's useAsTitle — would resolve it. More broadly, CheckboxInput emitting aria-label="" unconditionally means any consumer that doesn't pass name produces an unnamed checkbox, so it may be worth only emitting the attribute when there's a value for it.

Happy to open a PR if the direction is welcome.

[kumarshobhit-1]

Hi! 👋

I'd like to work on this issue if it's still available.

I have experience with React, Node.js, and TypeScript, and I'd be happy to work on the proposed fix. Please let me know if it's okay for me to submit a PR.

Thanks!

[kumarshobhit-1]

Hi! I'm working on this issue.

While tracing the code, I found that CheckboxInput is used in many places, and SelectRow currently doesn't receive a row title. One possible approach seems to be passing a label derived from useAsTitle down to SelectRow and then to CheckboxInput (e.g. aria-label={Select ${title}}), rather than changing the generic CheckboxInput behavior.

Does that align with the intended solution, or would you prefer handling it directly inside CheckboxInput?

Thanks!