[TabButton] Improve accessibility. Create TabList component.

[vasilii-kovalev]

Description

Main changes

• Create TabList component in uui package
• Add unit tests for TabList
• Add documentation page
• Make references to TabList on TabButton page in documentation
• [TabButton] Activate tab button by pressing "Space" key
• Set green background color in "Fresh Light 4px" skin only for picker input rows with aria-selected="true" instead of all elements with such selector
• Replace FlexRow + TabButton with TabList where possible

Bonus changes

• Replace examples with _examples in CONTRIBUTING.md
• Set Stylelint as a default formatted for Visual Studio Code users

Issue link

#2525

QA notes

[vasilii-kovalev]

Currently, there is a problem with "Fresh Light 4px" skin. It adds a green background to a tab when it is selected (has aria-selected="true"). It happens, because the skin sets this rule globally.

How should it be fixed: the original CSS rule in the skin should be reduced to certain components, or TabList should reset its styles (as an exclusion from the rule)?

Update: discussed that. Changed the styles so that they target only picker input.

[vasilii-kovalev]

It is necessary to discuss if it is needed to add tabIndex="0" in examples to stick to the ARIA examples. Because it turns out for people that use screen readers in browse mode it doesn't matter.

Update: discussed that. tabIndex is unnecessary in this case.

[github-actions]

Generated by: track-bundle-size
Generated at: Mon, 11 Aug 2025 05:51:11 GMT
Bundle size diff (in kBytes). Not gzipped. Both CSS & JS included.
Baseline: v6.1.5-beta.1 (2025-07-15)
CI Status: ok

Module	Baseline Size (v6.1.5-beta.1)	Size	Diff	Within Threshold	Threshold (min - max)
templateApp	646.65	662.84	+16.19 js:+6.94 css:+9.26	🆗	581.98 - 711.31
@epam/app	5368.95	5537.22	+168.26 js:+160.42 css:+7.84	🆗	4832.06 - 5905.85
@epam/electric	5.03	5.04	+0.01 js:+0.01 css:0	🆗	4.53 - 5.54
@epam/promo	55.43	55.61	+0.19 js:+0.01 css:+0.18	🆗	49.89 - 60.97
@epam/uui-extra	0.21	0.21	0 js:0 css:0	🆗	0.19 - 0.23
@epam/loveship	92.62	92.8	+0.19 js:+0.02 css:+0.17	🆗	83.35 - 101.88
@epam/uui-components	251.75	250.93	-0.83 js:-0.85 css:+0.03	🆗	226.58 - 276.93
@epam/uui-core	325.46	326.36	+0.89 js:+0.89 css:0	🆗	292.92 - 358.01
@epam/uui-db	41.63	41.63	0 js:0 css:0	🆗	37.47 - 45.8
@epam/uui-docs	179.06	181.02	+1.96 js:+1.96 css:0	🆗	161.15 - 196.96
@epam/uui-editor	173.82	173.87	+0.06 js:+0.03 css:+0.02	🆗	156.44 - 191.2
@epam/uui-timeline	75.5	75.5	+0 js:+0 css:+0	🆗	67.95 - 83.04
@epam/uui	503.4	517.87	+14.46 js:+9.06 css:+5.41	🆗	453.06 - 553.74

new sizes (raw)

To set the sizes as a new baseline, you can copy/paste next content to the uui-build/config/bundleSizeBaseLine.json and commit the file.

{
  "version": "6.2.0",
  "timestamp": "2025-08-11",
  "sizes": {
    "templateApp": {
      "css": 242414,
      "js": 436338
    },
    "@epam/app": {
      "css": 703822,
      "js": 4966286
    },
    "@epam/electric": {
      "css": 2275,
      "js": 2886
    },
    "@epam/promo": {
      "css": 47803,
      "js": 9148
    },
    "@epam/uui-extra": {
      "css": 0,
      "js": 213
    },
    "@epam/loveship": {
      "css": 55372,
      "js": 39661
    },
    "@epam/uui-components": {
      "css": 23250,
      "js": 233699
    },
    "@epam/uui-core": {
      "css": 0,
      "js": 334188
    },
    "@epam/uui-db": {
      "css": 0,
      "js": 42633
    },
    "@epam/uui-docs": {
      "css": 2154,
      "js": 183211
    },
    "@epam/uui-editor": {
      "css": 12936,
      "js": 165114
    },
    "@epam/uui-timeline": {
      "css": 2202,
      "js": 75109
    },
    "@epam/uui": {
      "css": 197484,
      "js": 332808
    }
  }
}

---

Generated by: generate-components-api
CI Status: ok

Total amount of exported types/props without JSDoc comments

	Amount
Types	337 (+2) ⚠️🆗
Props	221 (+0) 🆗

New missing comments

NOTE: It's either a new exported types/props without JSDoc, or it's an existing code from which you deleted the JSDoc comments.

Types:
- @epam/uui:TabListItemProps
- @epam/uui:TabListProps
Props:
- <empty>

[vasilii-kovalev]

FlexRow in Loveship and Promo skins has different props (background, spacing and type) comparing to uui version. How do I correctly adjust the TabList to support it? Is it just this snippet, or something else?

// Skin-specific `FlexRow` prop types.
import { type FlexRowProps } from "./FlexItems/FlexRow";

export interface TabListProps extends Omit<uui.TabListProps, keyof FlexRowProps>, FlexRowProps {}

export const TabList = uui.TabList as unknown as FC<TabListProps>;

Update: discussed that. Users don't need to rely on how a component is build under the hood, so if the props of the skin's FlexRow don't match the TabList props, that's OK, because it makes it possible to change the implementation if needed without relying on the surroundings (skin).