primefaces / primefaces/primereact

Calendar component – Disabled day cells rendered with aria‑selected="false" on non‑interactive <span>

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

Nobody has claimed this yet.

Component: Accessibility
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
  1. Render (or a disabled‑dates setup)

  2. Inspect a disabled‑day cell (for example, outside minDate/maxDate or a day disabled via disabledDays)

  3. The cell is a <span class="p-disabled" … aria‑selected="false" …>

  4. 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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.