Improve accessibility of dashboard tabs (issue #2171)

[artyfakt]

I'm currently familiarizing myself with a4/a+ and thought I would try working on some open issues in the process. To start off, I had a stab at #2171.

• since dashboard tabs load new pages (instead of revealing some hidden content on the same page), I found that applying Bootstrap's built-in tab functionality doesn't work
• instead I added some javascript that can be loaded via the extra_js block in the django template
• the script ensures keyboard navigability in line with ARIA recommendations for tabs with manual activation (Press tab to enter the tablist, press directional keys to navigate the tablist, press enter to activate a tab)
• for the script to work, the tablist needs to have the class "dashboard-tabs" and the role="tablist"
• also each tab of the tablist needs to have the role="tab"

I'm happy to work more on this according to your feedback. Also, let me know if there are any other good first issues (preferably frontend-heavy).

Tasks

• PR name contains story or task reference
• Documentation (docs and inline)
• Tests (including n+1 and django_assert_num_queries where applicable)
• Changelog

[t-j-q]

Hello @artyfakt thank you for contributing! I'm sorry that we hadn't have time to get back to you- we are quite occupied currently. Maybe @shn-liqd or @partizipation could have a look?

Best wishes from Berlin
Tietje