Checkbox, Radio Button, Multiselect: CSS Style of ".p-hidden-accessible select/input" Non-compliant with NVDA/Firefox AccessibilityComponent Name: Issue Title #4214
Labels
Component: Accessibility
Issue or pull request is related to WCAG or ARIA
Type: Enhancement
Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone
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:
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.
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.
The text was updated successfully, but these errors were encountered: