Checkbox, Radio Button, Multiselect: CSS Style of ".p-hidden-accessible select/input" Non-compliant with NVDA/Firefox AccessibilityComponent Name: Issue Title #4214
CSS hidden accessibility for screen readers is not compatible with the NVDA/Firefox screen reader/browser combination. The issue arises due to Firefox's interpretation of the transform: scale(0); property.
Specifically, the CSS style that causes problems for Firefox is as follows:
css
.p-hidden-accessible input,
.p-hidden-accessible select {
transform: scale(0);
}
This non-compliant CSS technique renders the following components unusable on Firefox, impacting their accessibility:
Multiselect: https://primevue.org/multiselect/
It is desirable to address this issue to ensure that these components remain accessible and fully functional for users relying on screen readers with the NVDA/Firefox combination.
Describe the bug
CSS hidden accessibility for screen readers is not compatible with the NVDA/Firefox screen reader/browser combination. The issue arises due to Firefox's interpretation of the
transform: scale(0);
property. Specifically, the CSS style that causes problems for Firefox is as follows: css .p-hidden-accessible input, .p-hidden-accessible select { transform: scale(0); } This non-compliant CSS technique renders the following components unusable on Firefox, impacting their accessibility:Reproducer
PrimeVue version
3.30.2
Vue version
3.x
Language
TypeScript
Build / Runtime
Vite
Browser(s)
Firefox 115.0.2 (64 bits)
Steps to reproduce the behavior
No response
Expected behavior
Information hidden on the screen intended only for assistive technologies must be accessible on Firefox as is the case on Chrome.