Improve Coach tabs accessibility - "Reports-Activity" tabs on a Reports learner page

[MisRob]

In #10212, we embarked on the journey toward improved accessibility of the coach plugin. Part of it is refactoring tabs logic to use new KDS tabs components that are implemented in an accessible manner. This issue is a continuation of that work.

The goal is to use the KDS tabs components for Reports-Activity tabs on a learner page in the coach reports (Coach → Reports → Learners → select a learner → learner page)

Acceptance criteria

• The current implementation is refactored to use KDS tabs components (KTabs or the combination of KTabsList + KTabsPanel)
• The new implementation satisfies these and these W3C guidelines (this is already provided by KDS tabs components, however in some cases, a bit of additional Kolibri logic may be needed as well - see comments below)
• The focus ring shows when navigating with a keyboard and stays on the selected tab after pressing enter

Comments

• KDS tabs components documentation
  • Tabs page
  • KTabs component
  • KTabsList component
  • KTabsPanel component
• You can play around with the Lessons-Quizzes-Groups-Learners tabs that are already implemented with KDS components to experience the expected behavior
  
• In some cases, due to the routing architecture, some additional Kolibri logic may be needed to ensure seamless focus behavior. If you run into issues with the focus ring disappearing after pressing enter on a tab or similar, useCoachTabs composable may help

[muditchoudhary]

Hi @MisRob Can I work on this issue? or is this for only internal team? as it does not have a help-wanted label.

I played around a bit, I think I can work on it. If I can work on it? Could you please assign it to me too?

[MisRob]

Hi @muditchoudhary, yes, this would be great improvement to Kolibri's accessibility and I believe there's even more places like this.

It may be a bit more complex, but you already have some experience and there are also many references linked in the issue description that you can use as guidance (especially the original PR and useCoachTabs composable, if that's needed).

Feel free to work step by step in a draft PR and if you had any questions, we can figure out next steps there.

[MisRob]

Closed by #11501