Hidden wizard steps are focusable

[izzudin96]

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

1. Activate accessibility mode or navigate using the keyboard (tab key).
2. Fill out any form fields in the first step of the Filament Wizard.
3. Observe that tabbing skips to the hidden fields in the second step instead of the "Next" button.
4. 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!

[github-actions[bot]]

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.

[github-actions[bot]]

Thank you for providing reproduction steps! Reopening the issue now.

[izzudin96]

Link to wizard: https://github.com/izzudin96/filament-a11y/blob/0c5ca9f54aaed9a945f61300f950858f44763929/app/Filament/Resources/PatientResource.php#L26C12-L27C6

[zepfietje]

Might this be related to https://github.com/filamentphp/filament/pull/12985 (@sebapastore)?

Could you check if this issue occurs in Filament v3.2.84 too, @izzudin96?

[izzudin96]

Hi @zepfietje,

Thanks for the reply.

I had a quick look on version 3.2.84 and it seems like it is working as expected.

[zepfietje]

Thanks for checking, @izzudin96!

This confirms this bug is caused by the changes in https://github.com/filamentphp/filament/pull/12985. Marking this as high priority. CC @danharrin @sebapastore

[sebapastore]

I will look into it now!