Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table actions column header WCAG compliance #14299

Open
honeyguppy opened this issue Sep 19, 2024 · 0 comments
Open

Table actions column header WCAG compliance #14299

honeyguppy opened this issue Sep 19, 2024 · 0 comments
Labels

Comments

@honeyguppy
Copy link

honeyguppy commented Sep 19, 2024

Package

filament/tables

Package Version

v3.2.113

Laravel Version

v11.23.5

Livewire Version

v3.5.6

PHP Version

8.3.4

Problem description

I encountered an issue during accessibility checks: when creating a table with an actions column, the table header for that column lacks an accessible name, which is required for elements with the columnheader role.

W3C docs: https://www.w3.org/TR/wai-aria-1.2/#columnheader

I found this using the WAVE accessibility evaluation tool. https://wave.webaim.org/

Expected behavior

Filament currently renders the actions column header as this

<th class="w-1"></th>

I see 2 solutions to remedy, either;

  1. Swap the <th> element to a <td> so it no longer has the columnheader role
<td class="w-1"></td>
  1. Add an aria-label to the <th> element
<th class="w-1" aria-label="actions"></th>

Steps to reproduce

  • Clone repository
  • Install dependencies
  • Make user with php artisan make:filament-user
  • Login with user at /admin/login
  • Navigate to users resource
  • Use browser element inspector or WAVE extension to see the error with the column header

Reproduction repository (issue will be closed if this is not valid)

https://github.com/honeyguppy/filament-issue-table-wcag

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!
Fund with Polar
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Todo
Development

No branches or pull requests

1 participant