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

Fieldset: Content focusable and announced by assistive technology even when collapsed #17126

Open
roesnera opened this issue Dec 18, 2024 · 0 comments · Fixed by #17127
Open
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Milestone

Comments

@roesnera
Copy link

Describe the bug

Same as #16972 except for fieldsets.

When using toggleable panel components, the content of the panel is still focusable when collapsed and therefore available to screen readers. This makes it confusing and inconsistent for users who navigate around using just the keyboard, as they will be focusing content that is not displayed visually, and screen readers will still announce these elements despite their parent element having aria-hidden="true" because their content is focusable.

Environment

I encountered this bug using Orca and the Ungoogled Chromium browser, and I have been advised that it also occurs when using Jaws in an unspecified browser.

Reproducer

https://stackblitz.com/edit/github-8zuq3k7w?file=src%2Fapp%2Fapp.component.html

Angular version

18.0.1

PrimeNG version

18.0.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.17.0

Browser(s)

No response

Steps to reproduce the behavior

Go to a toggleable fieldset with focusable content elements
Collapse the fieldset
Using your tab key to navigate, navigate forwards to the next focusable element

Expected behavior

Once the fieldest is collapsed and the focusable content is focused, you can interact with it as normal using your keyboard. If you are using assistive technology, you can also prompt it to announce the focused element, despite being the child of an element that (when the panel is in a collapsed state) is marked with "aria-hidden='true'"

@roesnera roesnera added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 18, 2024
@roesnera roesnera mentioned this issue Dec 18, 2024
@mertsincan mertsincan added this to the 19.0.2 milestone Dec 19, 2024
@github-project-automation github-project-automation bot moved this to Review in PrimeNG Dec 19, 2024
@mertsincan mertsincan added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 19, 2024
@cetincakiroglu cetincakiroglu modified the milestones: 19.0.2, 19.0.3 Dec 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
Status: Review
Development

Successfully merging a pull request may close this issue.

3 participants