primefaces / primefaces/primeng

Accessibility Select - Can't navigate to select with keyboard if in initially closed panel

Open
#17,545 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Component: Accessibility Resolution: Stale Status: Needs Triage
Dominant language
TypeScript
Stars
12.5k
Forks
5.1k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

There is an issue with keyboard accessibility when Select is used inside initially collapsed Panel.
When Panels input collapsed initially is set to false keyboard accessibility works as exptected.

Pull Request Link

No response

Reason for not contributing a PR
  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other
Other Reason

No response

Reproducer

https://stackblitz.com/edit/uvcatr26?file=src%2Fapp%2Fpanel-toggleable-demo.html,src%2Fapp%2Fpanel-toggleable-demo.ts

Environment

Win11

Angular version

19.0.1

PrimeNG version

v19

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior
  1. Go to https://stackblitz.com/edit/uvcatr26?file=src%2Fapp%2Fpanel-toggleable-demo.html,src%2Fapp%2Fpanel-toggleable-demo.ts,package.json
  2. Expand Panel using + icon.
  3. Try to navigate to Select using 'Tab' key on keyboard.
  4. Unable to navigate to Select.

If you change filterCollapsed value to false:

Image

you will be able to navigate to select using 'Tab' key on keyboard.

For some reason tabindex input of select is ignored in first scenario.

Expected behavior

User should be able to navigate to Select using keyboard even if panel is initially closed.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the StackBlitz reproducer files src/app/panel-toggleable-demo.html and src/app/panel-toggleable-demo.ts, and compare keyboard navigation when the Panel is initially collapsed versus expanded. Trace the Select and Panel accessibility behavior, then verify that expanding the initially closed Panel allows Tab to reach the Select.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.