feat(components/molecule/tabs): make tabs accesibles

[oriolpuig]

Molecule/Tabs

❓ Ask

Types of changes

• [ ] 🪲 Bug fix (non-breaking change which fixes an issue)
• [x] ✨ New feature (non-breaking change which adds functionality)
• [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] 🧾 Documentation
• [ ] 📷 Demo
• [x] 🧪 Test
• [ ] 🧠 Refactor
• [ ] 💄 Styles

Description, Motivation and Context

Currently our component is not Accessibility friendly, with this PR we want to make it possible. We use the specific role for each element to improve User Experience and our Test Experience with Testing Library.

📃 DOCS: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.08↑	≍ 0.12↑	≍ 0.25↑	≍ 0.25↑
%	72.13	57.86	59.27	73.8
ABS	2602 / 3607	1461 / 2525	476 / 803	2508 / 3398

[andresz1]

Nice PR 👏🏻👏🏻👏🏻 Should we also add aria-orientation when the type is set to vertical ? https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.08↑	≍ 0.12↑	≍ 0.25↑	≍ 0.25↑
%	72.13	57.86	59.27	73.8
ABS	2602 / 3607	1461 / 2525	476 / 803	2508 / 3398

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.09↑	≍ 0.11↑	≍ 0.25↑	≍ 0.25↑
%	72.14	57.85	59.27	73.81
ABS	2603 / 3608	1462 / 2527	476 / 803	2509 / 3399

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.09↑	≍ 0.11↑	≍ 0.25↑	≍ 0.25↑
%	71.55	57.32	58.78	73.37
ABS	2654 / 3709	1495 / 2608	482 / 820	2560 / 3489

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.13↑	≍ 0.08↑	≍ 0.25↑	≍ 0.25↑
%	71.59	57.29	58.78	73.4
ABS	2656 / 3710	1493 / 2606	482 / 820	2562 / 3490