Screen Reader Accessibility for Filament Modals?

Hey everyone,

I'm working on making my Laravel Filament site accessible for a blind caseworker using a screen reader (macOS VoiceOver). The issue I'm facing is that modals don’t announce themselves when opened. I want the click that triggers the modal to notify the screen reader of the new content.

What I've Tried:

- Adding

'aria-live' => 'assertive'

'aria-live' => 'assertive'

inside

extraModalWindowAttributes()

extraModalWindowAttributes()

.
- Changing it to

'role' => 'alert'

'role' => 'alert'

—which forces the announcement, but causes the entire modal to be re-read every time an additional field is revealed, which is disruptive.
- Using both

'role' => 'alert'

'role' => 'alert'

and

'aria-live' => 'polite'

'aria-live' => 'polite'

, but that didn't work as expected.

Here’s a snippet of my current setup:

$this->icon('heroicon-o-plus')
    ->color('success')
    ->label('Add Need')
    ->size('xs')
    ->form([
        Grid::make()->schema([
            TextInput::make('custom')
                ->label('Item Name'),
            // ...
        ]),
        Hidden::make('tier'),
        Hidden::make('name'),
        Hidden::make('need'),
    ])
    ->extraModalWindowAttributes([
        'aria-label' => 'Add Need Modal opened.',
        'role' => 'alert',
        'aria-live' => 'polite'
    ]);

$this->icon('heroicon-o-plus')
    ->color('success')
    ->label('Add Need')
    ->size('xs')
    ->form([
        Grid::make()->schema([
            TextInput::make('custom')
                ->label('Item Name'),
            // ...
        ]),
        Hidden::make('tier'),
        Hidden::make('name'),
        Hidden::make('need'),
    ])
    ->extraModalWindowAttributes([
        'aria-label' => 'Add Need Modal opened.',
        'role' => 'alert',
        'aria-live' => 'polite'
    ]);

What I Need Help With:

How can I get the modal to announce itself only when it opens, without re-reading everything on every state update? Has anyone successfully handled this in Filament?

Would appreciate any insights! Thanks in advance.

I have limited experience with PHP, Filament, lararavel and livewire. Also any other resources on Laravel Filament Accessibility standards, tricks, documentation would be very helpful, the information I've found has been very limited.

Screen Reader Accessibility for Filament Modals?

What I've Tried:

- Adding

'aria-live' => 'assertive'

'aria-live' => 'assertive'

inside

extraModalWindowAttributes()

extraModalWindowAttributes()

.
- Changing it to

'role' => 'alert'

'role' => 'alert'

—which forces the announcement, but causes the entire modal to be re-read every time an additional field is revealed, which is disruptive.
- Using both

'role' => 'alert'

'role' => 'alert'

and

'aria-live' => 'polite'

'aria-live' => 'polite'

, but that didn't work as expected.

Here’s a snippet of my current setup:

$this->icon('heroicon-o-plus')
    ->color('success')
    ->label('Add Need')
    ->size('xs')
    ->form([
        Grid::make()->schema([
            TextInput::make('custom')
                ->label('Item Name'),
            // ...
        ]),
        Hidden::make('tier'),
        Hidden::make('name'),
        Hidden::make('need'),
    ])
    ->extraModalWindowAttributes([
        'aria-label' => 'Add Need Modal opened.',
        'role' => 'alert',
        'aria-live' => 'polite'
    ]);

$this->icon('heroicon-o-plus')
    ->color('success')
    ->label('Add Need')
    ->size('xs')
    ->form([
        Grid::make()->schema([
            TextInput::make('custom')
                ->label('Item Name'),
            // ...
        ]),
        Hidden::make('tier'),
        Hidden::make('name'),
        Hidden::make('need'),
    ])
    ->extraModalWindowAttributes([
        'aria-label' => 'Add Need Modal opened.',
        'role' => 'alert',
        'aria-live' => 'polite'
    ]);

Screen Reader Accessibility for Filament Modals?

What I've Tried:

What I Need Help With:

Screen Reader Accessibility for Filament Modals?

What I've Tried:

What I Need Help With:

Similar Threads

Similar Threads

Similar Threads