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

Dialog - accessibility: hiding modal dialog does not restore focus on the button that invoked it #4158

Closed
ChristosLex opened this issue Mar 14, 2023 · 4 comments · Fixed by #4561
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA
Milestone

Comments

@ChristosLex
Copy link

Describe the bug

Dialog component does not comply with accessibility when it comes to restoring the focus to the element that invoked showing the dialog after closing/hiding it.

Currently, when closing a modal dialog the focus is restored to the browser.

Reproducer

https://codesandbox.io/s/m799wh

PrimeReact version

9.2.0

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

  1. Navigate to the button that opens the model dialog with tab
  2. Press ENTER -> the modal dialog is opened
  3. Press ESC -> the modal dialog is closed
  4. Focus is not restored to the button but to the page

Expected behavior

The expected behaviour is to restore the focus back to the button after closing the dialog

@ChristosLex ChristosLex added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 14, 2023
@melloware melloware 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 Mar 14, 2023
@Luisa-Cavalheiro
Copy link

I'm also having some accessibilty issues using PrimeReact, such as the components have too many embedded aria attributes that NVDA reads many unnecessary information.
I hope I could get some assistance in this matter,

@melloware
Copy link
Member

I'm also having some accessibilty issues using PrimeReact, such as the components have too many embedded aria attributes that NVDA reads many unnecessary information. I hope I could get some assistance in this matter,

@Luisa-Cavalheiro PrimeTek has this on their Roadmap for 10.0.0 Improve accessibility based on WCAG standards focusing on keyboard support and screen readers. In addition, add an accessibility section for each component documenting the keys, aria roles as well as scores from accessibility tools.

I would check the PrimeVue showcase and see how things are going there as many of the fixes for accessibilty for PrimeVue are coming to PrimeReact.

@Folgadus
Copy link

I can definitely empathize with the accessibility challenges you're facing while using Prime React.
I look forward to, and barely holding on, the news of version 10, version 10 will come as soon as possible.

@melloware
Copy link
Member

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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants