Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
nabil-elm opened this issue Jul 27, 2023 · 2 comments · Fixed by #7037
Assignees
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

Comments

@nabil-elm
Copy link

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.

@nabil-elm nabil-elm added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 27, 2023
@tugcekucukoglu tugcekucukoglu added Component: Accessibility Issue or pull request is related to WCAG or ARIA and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 7, 2023
@JoseAntonioNavasSolutia

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

@melloware
Copy link
Member

PR submitted I had already fixed this in PrimeFaces and PrimeReact.

melloware added a commit to melloware/primevue that referenced this issue Jan 2, 2025
melloware added a commit to melloware/primevue that referenced this issue Jan 2, 2025
melloware added a commit to melloware/primevue that referenced this issue Jan 2, 2025
melloware added a commit to melloware/primevue that referenced this issue Jan 2, 2025
@tugcekucukoglu tugcekucukoglu added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Jan 7, 2025
@tugcekucukoglu tugcekucukoglu added this to the 4.3.0 milestone Jan 7, 2025
@github-project-automation github-project-automation bot moved this to Review in PrimeVue Jan 7, 2025
tugcekucukoglu added a commit that referenced this issue Jan 7, 2025
Fix #4214: Screenreader improve hidden accessible
@github-project-automation github-project-automation bot moved this from Review to Done in PrimeVue Jan 7, 2025
@tugcekucukoglu tugcekucukoglu self-assigned this Jan 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

4 participants