primereact icon indicating copy to clipboard operation
primereact copied to clipboard

SplitButton: aria-controls references ID that doesn't exist in DOM until menu is oopened

Open KubaGorka opened this issue 8 months ago • 1 comments

Describe the bug

The SplitButton component sets an aria-controls attribute on the button element pointing to an ID (e.g., pr_id_256_overlay) that is not present in the DOM until the menu is opened. This violates WCAG and ARIA 1.3 specification, which require the value of aria-controls to reference an element that exists in the document.

This causes accessibility issues as assistive technologies expect the referenced element to exist in the DOM at all times for proper context and interaction.

Reproducer

No response

System Information

Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    npm: 10.8.3 - /usr/local/bin/npm
  npmPackages:
    primereact: 10.9.1
    react: 18.2.0

Steps to reproduce the behavior

  1. Visit the official PrimeReact documentation page for SplitButton
  2. Open your browser's Developer Tools
  3. In the Elements tab, locate the rendered SplitButton component
  4. Observe the button element that includes: aria-controls="pr_id_256_overlay"
  5. Notice that no element with ID pr_id_12_overlay exists in the DOM until the dropdown menu is opened

Expected behavior

If aria-controls is used, the referenced element should exist in the DOM at all times. To comply with accessibility standards, the component should either:

  • Avoid rendering aria-controls until the overlay is present
  • Pre-render the overlay (hidden) so that the ID exists in the DOM

KubaGorka avatar May 20 '25 09:05 KubaGorka

Similar issue for Calendar component reported here: https://github.com/primefaces/primereact/issues/8015

mdeperas-caspio avatar May 20 '25 11:05 mdeperas-caspio