tristen / tablesort

:arrow_up_down: A small tablesorter in plain JavaScript
https://tristen.ca/tablesort/demo/
MIT License
1.1k stars 179 forks source link

Add accessibility features (tabindex, space, enter) #228

Closed zoglo closed 1 year ago

zoglo commented 2 years ago

This PR does following things:

Bugfix: Change tabindex to tabIndex (056c63c4999eff34ba8dff713fae566791d095bc)

Whilst tabindex exists as a global attribute tabindex https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/tabindex, creating it in JavaScript uses tabIndex https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex.

__

Enhancement: Add modeButton to options (a4f849f32e1406d6f799a64dfc296325ef7e8f4e, bf4df7aece780627a81a6cedc2f7d41e351a91ff)

Currently, it isn't possible to properly use table sorting with keybinds such as 'Space' and 'Enter'. By adding a button, it is possible to tab through it and using space or enter without the need for additional event listeners for the mentioned keybinds.

image

Following example of aria-practices uses the same method: https://w3c.github.io/aria-practices/examples/table/sortable-table.html

image

The button element within the th element can be initialized with:

new Tablesort(document.getElementById('table-id'), {
  modeButton: true
});

I made sure to add it as an option so it would not activate by default if anyone updates the plugin.

__

Additional things:

Tests: image

m-vo commented 2 years ago

I made sure to add it as an option so it would not activate by default if anyone updates the plugin.

IMHO this is a major improvement and should be the default. Maybe this would justify a new major version? /cc @tristen