primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.96k stars 1.25k forks source link

Checkbox, Radio Button, Multiselect: CSS Style of ".p-hidden-accessible select/input" Non-compliant with NVDA/Firefox AccessibilityComponent Name: Issue Title #4214

Open nabil-elm opened 1 year ago

nabil-elm commented 1 year ago

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:

  1. Checkbox: https://primevue.org/checkbox/
  2. Radio Button: https://primevue.org/radiobutton/
  3. 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.

Reproducer

  1. Checkbox: https://primevue.org/checkbox/ 2. Radio Button: https://primevue.org/radiobutton/ 3. Multiselect: https://primevue.org/multiselect/

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.

JoseAntonioNavasSolutia commented 10 months ago

Hello, same in https://primevue.org/inputswitch/