tabs hydration error

[valerydluski]

EPAM AI DIAL UI Kit version

0.5.0-rc.53

How to reproduce

1. Use Next.js 15 with App Router and SSR enabled.
2. Render the Tabs component from EPAM AI DIAL UI Kit on a page
3. Open the page in the browser with dev overlay enabled.
4. Observe that on initial page load a Next.js hydration error appears:
   "Hydration failed because the server rendered HTML didn't match the client."
5. In the error diff you can see that for the TabsList container
   the role attribute is null on the server but "tablist" on the client.

Actual result

Next.js shows a recoverable hydration error on initial page load:

"Hydration failed because the server rendered HTML didn't match the client.
As a result this tree will be regenerated on the client."

The diff in the error overlay highlights the Tabs list container:

• On the server: <div ref={{current: null}} role={null} ...>
• On the client: <div ref={{current: null}} role="tablist" ...>

Because of this mismatch, the whole Tabs subtree is re-rendered on the client.
This happens consistently when the Tabs component is rendered with SSR.

Expected result

The Tabs component should render with identical HTML on the server and the client,
so that hydration completes without any warnings or errors.

The role attribute on the Tabs list container should have the same value
("tablist") both on the server and on the client, and the Tabs tree
should not need to be regenerated on the client during hydration.

Confidential information

• I confirm that do not share any confidential information