Hidden wizard steps are focusable
izzudin96 opened this issue · comments
Package
filament/filament
Package Version
v3.2.85
Laravel Version
10.48.12
Livewire Version
v3.5.0
PHP Version
8.1.26
Problem description
When using the Filament Wizard in accessibility mode or when navigating with the keyboard (tabbing), the form fields on the first step tab into the hidden fields of the second step instead of moving to the "Next" button. This behavior disrupts the form-filling process and impacts the accessibility and usability of the wizard.
Note: This issue does not occur in version v3.2.63; the tabbing functionality works as expected in that version.
Expected behavior
When filling out the forms in the first step of the wizard, tabbing should sequentially move through all the form fields and then to the "Next" button. Only after clicking the "Next" button should the focus move to the fields in the second step.
Steps to reproduce
- Activate accessibility mode or navigate using the keyboard (tab key).
- Fill out any form fields in the first step of the Filament Wizard.
- Observe that tabbing skips to the hidden fields in the second step instead of the "Next" button.
- Notice that the second step fields are tab-accessible even though they are not visible.
Reproduction repository
https://github.com/izzudin96/filament-a11y
Relevant log output
No response
Donate 💰 to fund this issue
- You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
- 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
- Thank you in advance for helping us make maintenance sustainable!
Hey @izzudin96! We're sorry to hear that you've hit this issue. 💛
However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?
We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.
Thank you for providing reproduction steps! Reopening the issue now.