[WIP] Introduce Tabs component

[azajac-brl]

Missing:

• Chromatic tests
• A11y tests
• Interfaces for CSS variables
• kebab-case for CSS variables
• Extended documenation (showing different subcomponents and their props)
• Handling reduce-motion for ActiveIndicator
• Working solution for a11y ids (current implementation might not work if rendered server-side)
• 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:

style-guide/src/components/icons/Icon.tsx

Line 522 in 44befb4

suppressHydrationWarning

[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! :)