A11y tables - Improve accessibility of interactive tables

[luistoptal]

User story

• Tables such as this one: http://gigadb.gigasciencejournal.com:9170/adminDatasetAuthor/admin are lacking in some accessibility aspects:
  • A11y sorting: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/
  • Labelling of filtering inputs (i.e. indicate to screen readers the purpose of filter inputs)
  • WAVE audit shows some errors such as empty <th>s
• Filtering might not be working as expected in some cases:
  • https://app.lambdatest.com/console/realtime/browser Chrome + Windows + Screen reader, on keyboard navigation, it is not possible to clean filtering input
  • On sorting or filtering, focus might be lost

Acceptance criteria

• Implement a generalized solution to improve accessibilty of tables with similar features (most admin pages have these tables)
• Fix issues described above on interaction with table controls
• test with different browsers and screen readers using lambdatest site and identify additional issues

[luistoptal]

@rija because the tables are rendered using zii.widgets.grid.CGridView, customizing them to improve their accessibility is quite more complicated than just updating a html file. Meaning that this might take some time (perhaps about one day, if I don't find many complications, and some more time to extend to all other similar tables)

Right now these tables present some accessibility issues (e.g. lack of clarity as to filter and sorting features, loss of focus when sorting or filtering is triggered, ...). Fixing this involves customizing the widget

Improving a11y of admin pages is not explicitly mentioned in the tasks (https://github.com/gigascience/gigadb-website/issues/1334) so I want to cross check before I spend any more time on this. Are we happy to spend time on this?