Package

filament/filament

Package Version

^3.0-stable

Laravel Version

^10.10

Livewire Version

^3.0

PHP Version

8.2.6

Problem description

Hi,

First and foremost, I just wanted to say what an impressive package this is! As a blind person, this is the easiest way I've found so far to develop UIs without having to worry too much about what it looks like.

I have come across a couple of accessibility issues however. One has to do with form labels and the other involves modals.

When using a screen reader to interact with a Filament form, the screen reader sometimes fails to pick up the label. This is incredibly strange as usually an element is either accessible or it isn't, but here, every time you refresh the exact same form, it appears completely random whether a given form label will be readable or not.
Though this might be due at least in part to a bug in either Chromium and/or Microsoft's accessibility stack, the issue appears to stem from the fact that the text of a label is not a direct child of the element itself.

This can be solved either by adding aria-label="{{$label}}" to the element directly, or by rendering the "hidden" label unconditionally. In either case, you would then want to mark the visual label aria-hidden="true" to avoid any conflicts.

The other issue has to do with modals. When a modal is opened, the rest of the page contents should be marked using the aria-hidden attribute. It should also have either role="dialog" or role="alertdialog" which cause screen readers to issue a special notification that a dialog has opened. Otherwise, the user can interact with page contents that are supposed to be hidden by the modal. We also don't realize that a modal has opened up unless we manually scroll to the bottom of the page.
Please note: I am providing the live demo as a repository link as all of this is demonstrable using the demo.

Thank you for your attention to this.

Kind regards,

Jordan.

Expected behavior

Screen readers should always be able to identify form labels. Screen readers should not be able to see content that's supposed to be hidden by modal dialogs, and should notify users when a dialog has appeared.

Steps to reproduce

1. Navigate to the live demo and log in.
2. Navigate to a create or edit form (such as blog posts).
3. Load up a screen reader (such as Jaws or NVDA on Windows).
4. Read the page using your arrow keys (if you get trapped in an input field, press escape to get out).
5. Refresh the page several times and repeat attempting to read it with your arrow keys.
6. Observe that some form labels are missed by the reader seemingly at random.
7. Navigate to a confirmation modal (such as for deletion of a record) (you can perform this step using mouse navigation).
8. Attempt to read the page with your arrow keys and screen reader.
9. Observe that you are interacting with content that is supposed to be obstructed by the modal. Also note that you were given no indication that the modal appeared.

Reproduction repository

https://github.com/filamentphp/demo

Relevant log output

No response