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 · May be fixed by #14303
Open

Table actions column header WCAG compliance #14299

honeyguppy opened this issue Sep 19, 2024 · 0 comments · May be fixed by #14303
Labels
Milestone

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
@yogesh16 yogesh16 linked a pull request Sep 20, 2024 that will close this issue
3 tasks
@zepfietje zepfietje added this to the v3 milestone Sep 26, 2024
@zepfietje zepfietje linked a pull request Sep 26, 2024 that will close this issue
3 tasks
@zepfietje zepfietje added the a11y label Sep 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Todo
Development

Successfully merging a pull request may close this issue.

2 participants