primefaces / primefaces/primeng
Accessibility Select - Can't navigate to select with keyboard if in initially closed panel
Nobody has claimed this yet.
- 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
Environment
Win11
Angular version
19.0.1
PrimeNG version
v19
Node version
No response
Browser(s)
No response
Steps to reproduce the behavior
- Go to https://stackblitz.com/edit/uvcatr26?file=src%2Fapp%2Fpanel-toggleable-demo.html,src%2Fapp%2Fpanel-toggleable-demo.ts,package.json
- Expand Panel using + icon.
- Try to navigate to Select using 'Tab' key on keyboard.
- Unable to navigate to Select.
If you change filterCollapsed value to false:
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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