Coach Reports and Plan routing structure is problematic for tab behavior

[MisRob]

Observed behavior

When you go to Coach -> Reports and click on one of these tabs:

the whole page is reloaded (in contrast to re-rendering only the tab panel) and because of that, focus information is lost.

This is causing the following behavior that is problematic in regards to a11y:

1. Navigate to the "Quizzes" tab with the keyboard and press ENTER
2. Press TAB
3. See focus being placed on the "Skip to main content" link instead of the "Quizzes" tab panel

The same applies to the Coach -> Plan tabs.

Expected behavior

In the keyboard navigation sequence described above, the "Quizzes" tab panel receives focus after pressing TAB

User-facing consequences

Bad a11y

Context

Kolibri 0.16.0.dev0+git.20230213143851

Comments

There are more a11y issues with current tabs which will be resolved by learningequality/kolibri-design-system#420. As part of that work, this particular issue will too be resolved to some extent (by automatically focusing the active tab when arriving on Coach -> Reports/Plan, however, it's not an ideal solution because it will cause focus moving to the active tab even when it is not expected like when arriving on the page for the first time). I imagine in long term it'd be better to change the routing architecture so that only tab content is reloaded instead of the whole page.

[MisRob]

Even though I believe it may still be helpful to think about the routing structure, I realized there are many other sub-tabs and such refactor would need more research at first so I resolved issues that were the main motivation in another way in this commit to make sure not to compromise a11y as soon as possible so closing.