sui-components
sui-components copied to clipboard
feat(components/molecule/tabs): make tabs accesibles
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
| 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 |
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
| 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 |
| 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 |
| 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 |
| 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 |