primefaces / primefaces/primereact

ListBox: Role must have accessible name (ARIA issue)

Open
#8,280 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

The ListBox component fails accessibility requirements. The element with role="listbox" does not have an accessible name.

This can be observed in the official documentation:
https://primereact.org/listbox/

Example node:
<ul class="p-listbox-list" role="listbox" aria-multiselectable="false" tabindex="-1" data-pc-section="list">

Reproducer

No response

System Information
primereact: 10.9.7
Steps to reproduce the behavior

Go to https://primereact.org/listbox/

Inspect the main

    element of the ListBox

    Notice that role="listbox" has no accessible name

    Expected behavior

    The role="listbox" element should have an accessible name (e.g., via aria-label or aria-labelledby).

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 at the ListBox component and inspect the rendered listbox element shown on the official documentation page. Ensure the role="listbox" element receives an accessible name through aria-label or aria-labelledby, then verify the result on the ListBox documentation page with an accessibility check.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.