primefaces / primefaces/primereact
Calendar component – Disabled day cells rendered with aria‑selected="false" on non‑interactive <span>
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
In version 10.9.7 of PrimeReact, using the Calendar component with e.g. minDate, maxDate, disabledDays, or non‑selectable days results in day‑cells that are non‑selectable, rendered as s (no role) but still carry the attribute aria‑selected="false".
Why this is a problem:
According to the ARIA specification, the aria‑selected attribute is only valid on elements with roles that support selection (such as gridcell, option, row, or tab).
Having aria‑selected="false" on a without a selection role triggers accessibility tool errors (e.g., Axe DevTools reports: “Ensure an element’s role supports its ARIA attributes. ARIA attribute is not allowed: aria-selected="false"”).
Reproducer
https://stackblitz.com/run?file=src%2FApp.tsx
System Information
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 20.19.1 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
primereact: latest => 10.9.7
react: 18.3.1 => 18.3.1
Steps to reproduce the behavior
-
Render (or a disabled‑dates setup)
-
Inspect a disabled‑day cell (for example, outside minDate/maxDate or a day disabled via disabledDays)
-
The cell is a <span class="p-disabled" … aria‑selected="false" …>
-
Inspect Calendar layout with Axe Dev Tools - it reports: “ARIA attribute is not allowed: aria‑selected=”false””
Expected behavior
-
For non‑selectable/disabled cells, aria‑selected should not be present, or the cell should have a role supporting aria‑selected.
-
The appropriate attribute might be aria‑disabled="true" or no ARIA selected attribute for disabled non‑interactive cells.
Please, remove the aria‑selected="false" attribute from disabled day cells (or apply the correct role) to resolve the accessibility violation.
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 with the PrimeReact Calendar component and reproduce the issue using the linked StackBlitz example with minDate, maxDate, or disabledDays. Inspect the rendered disabled day cells and verify that the accessibility violation is resolved without regressing selectable cells.
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
- 52/100