[WIP] Introduce Tabs component

[azajac-brl]

Missing:

• [ ] Chromatic tests
• [ ] A11y tests
• [x] Interfaces for CSS variables
• [x] kebab-case for CSS variables
• [ ] Extended documenation (showing different subcomponents and their props)
• [ ] Handling reduce-motion for ActiveIndicator
• [x] Working solution for a11y ids (current implementation might not work if rendered server-side)
• [x] Instead of animating width we should animate scaleX
• [ ] keyboard support
• [ ] a11y compliance
• [ ] Handle in Tab text children and component children

[coderitual]

thx @azajac-brl , could you please add to the list:

• "keyboard support"
• "a11y compliance"

as for

Working solution for a11y ids

please take a look here: https://brainly.atlassian.net/wiki/spaces/DesignSystem/pages/1274871849/Isomorphic+IDs+in+the+style+guide+for+accessibility+attributes

and example: https://github.com/brainly/style-guide/blob/44befb4cf3b360d9db79e4f910d4b6d69b18307c/src/components/icons/Icon.tsx#L522

[coderitual]

hey @azajac-brl, when it comes to accessibility and keyboard support. I know that @katarzynatobis and @bartoszlorek were working on similar support for some segmented-like/tab component in the app. Maybe that PR would be a good reference for applying same support here?

[azajac-brl]

hey @azajac-brl, when it comes to accessibility and keyboard support. I know that @katarzynatobis and @bartoszlorek > were working on similar support for some segmented-like/tab component in the app. Maybe that PR would be a good > reference for applying same support here?

Thanks for letting me know! I'll reach out to them about that! :)