[Accessibility] Remove aria-disabled from pagination buttons OR make those buttons actual buttons

barmstrong

This is my first time here so apologies if this has already been requested and/or addressed elsewhere but I could not find it.

Currently using:

https://cdn.datatables.net/2.0.7/js/dataTables.js -- seems to be the file responsible for the offending code
https://cdn.datatables.net/2.0.7/js/dataTables.bootstrap5.js
https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js
https://cdn.datatables.net/responsive/3.0.2/js/responsive.dataTables.js
https://cdn.datatables.net/responsive/3.0.2/js/responsive.bootstrap5.js

Code was added in this commit to add aria-disabled attribute to pagination buttons: https://github.com/DataTables/DataTablesSrc/commit/93a604c3276e8a2a8cdb26e6bacdfdf37dc37f02

aria-disabled is not a valid attribute on a link. It is valid on <button> elements. My company is using an a11y tool to crawl sites we manage to find a11y issues. It is flagging all disabled pagination "button" because they are <a>, which, according to research shows this is not an element that supports aria-disabled. There are two solutions to this: remove aria-disabled OR refactor the <a>s to <button>s. I'd prefer refactoring to <button> elements because that's semantically accurate and supports aria-disabled.

I checked all newer versions of the above files and see this code present in the current version. But if there is a newer version that uses <button> instead of <a> and/or has removed aria-disabled please let me know.

Thank you!

allan

In DataTables 2.2.2 (the current release) those elements are indeed button elements. You can see that in this example.

That was done in 2.1.0 for the Bootstrap 5 integration - release notes.

Allan

barmstrong

Thank you!