Made icons inside topic module tab accessible

[zubairshakoorarbisoft]

Description

On Discussion page, Under Topic tab, modules sub sections are not keyboard accessible. User was not able to move inside the module to access message thread count etc now user can go inside and press enter to open the details.

Steps to Reproduce:
Open Sandbox URL

1. Through keyboard tap on topics tab.
2. Select Enter
3. Now press tab again it will focus on the modules.
4. Select Enter again
5. It will expand the module section
6. Now select Tab
7. It will move the focus to “Add a post” section"

Related to overhangio/tutor-indigo#146

How Has This Been Tested?

I set up Tutor locally with the Indigo Plugin enabled (which is enabled by default). I followed the above steps to reproduce the issue, inspected the HTML on the frontend, and identified where the adjustment was needed. After applying the fix, the keyboard tab key press can move inside the module and its nested elements, like message count, info icons.

Sandbox (optional):

Sandbox Link

Following Taiga tickets has been addressed in this PR(Access required):

1. https://tree.taiga.io/project/zaraahmed-tutor-indigo-accessibility/us/43
2. https://tree.taiga.io/project/zaraahmed-tutor-indigo-accessibility/us/33

Screenshots

Before

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
• Is there adequate test coverage for your changes?

Post-merge Checklist

• Deploy the changes to prod after verifying on stage or ask @openedx/edx-infinity to do it.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[awais-ansari]

Please update the test cases. The required checks are failing. Other than that, the changes look good to me.

[wittjeff]

There are multiple issues here.

• The topics are clickable but don't take keyboard focus (as they do for the parent items).
• The topics act as links or as tabs depending on what you do decide to do with focus when they're clicked (I recommend link semantics, and jump focus to the top of the associated discussion thread.
• You are giving focus to a thing that apparently only shows a tooltip. I think it would be better to give the icons accessible names (equivalent to the text in the tooltip).
• • If the comment and question indicators take focus or accept clicks, they should be buttons or links.
• There are (now with this change) focusable things on top of focusable things, which will throw a warning with automated accessibility checkers. This is WCAG conformant if the click targets are minimum 24x24px in size (I'm not sure if they are; usually there is no strict target size, but a strict requirement for 24x24px of clearance between click/touch targets. when they're overlapping that logically becomes a minimum target size.)
• SO MANY TAB STOPS. This UI problem occurs in some other commonly used scenarios like Facebook, etc. This got me stuck when I was making UI recommendations before. I'm sorry!
  -- Allow the user to move focus between list items in the discussion tree via arrow keys (as with tree navigation). This skips over the repeated icons. But you have implemented the needed arrow key focus change behavior in the parent list, but not here??