Accessibility: update accessibility for the main tabs

[koenvangeert]

[Issue]
There are tabs without appropriate role, and state information.

[User Impact]
Screen reader users will be unable to determine that these controls reveal panels of content and which panel is currently revealed.

[Recommendation]
Ensure page tabs provide state and role.

For tabs, the following information is expected:

• The container for the set of tabs must have role="tablist".
• Each tab must have role="tab" and must be a descendant of the tablist element.
• Each panel container must have role="tabpanel".
• If the tablist has a visible label, the tablist element must have aria-labelledby set to the ID of the labelling element. Otherwise, the tablist element must have aria-label set to the accessible name.
• Each tab must have aria-controls set to the ID of its corresponding tabpanel.
• The selected tab must have aria-selected="true". All other tabs must have aria-selected="false".
• Tabpanel elements must have aria-labelledby set to the ID of their corresponding tab.
• If the tablist is vertically oriented, it must have aria-orientation="vertical".

[Compliant Code Example]
N/A

[Recommended Reading]
For more information about creating accessible tab controls, please see the W3C Web Accessibility Initiative's ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

[koenvangeert]

@OlgaLarina @novikov82 @tsv2013
Hey, I have a couple of pull requests open. Can you help me get these merged please. Thank you! 🙇 🙇 🙇

[tsv2013]

@dmitry-kurmanov Could you please take a look?

[dmitry-kurmanov]

@koenvangeert, thanks for your contribution! I've approved the PR. We are faced with some problems with our tests now, and I will rerun all checks for this PR as soon as we fix those problems. Then we will be able to merge.