SplitButton: aria-controls references ID that doesn't exist in DOM until menu is oopened
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
- Visit the official PrimeReact documentation page for SplitButton
- Open your browser's Developer Tools
- In the Elements tab, locate the rendered SplitButton component
- Observe the button element that includes: aria-controls="pr_id_256_overlay"
- 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
Similar issue for Calendar component reported here: https://github.com/primefaces/primereact/issues/8015