Calendar component – Disabled day cells rendered with aria‑selected="false" on non‑interactive <span>
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 <Calendar value={…} minDate={…} maxDate={…} /> (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.