From 29ebbf00a2f011891cb10bc8bc9e87cefc7f4bbe Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Fri, 3 Jul 2026 17:11:29 +0300
Subject: [PATCH] feat(Table): add data attributes to sort icon wrapper

---
 .../components/src/components/Table/Table.test.tsx     | 10 +++++++++-
 .../TableColumnHeader/TableColumnHeader.module.css     |  2 +-
 .../components/TableColumnHeader/TableColumnHeader.tsx |  2 ++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Table/Table.test.tsx b/packages/components/src/components/Table/Table.test.tsx
index af2e06014..52a204fce 100644
--- a/packages/components/src/components/Table/Table.test.tsx
+++ b/packages/components/src/components/Table/Table.test.tsx
@@ -240,7 +240,10 @@ describe('Table', () => {
       isActive: false,
     });
 
-    expect(screen.getByTestId('sort-icon')).toBeInTheDocument();
+    const sortIcon = screen.getByTestId('sort-icon').parentElement;
+
+    expect(sortIcon).toHaveAttribute('data-slot', 'sort-icon');
+    expect(sortIcon).not.toHaveAttribute('data-sort-direction');
   });
 
   it('should pass active sort direction to renderSortIcon', () => {
@@ -271,5 +274,10 @@ describe('Table', () => {
       direction: 'ascending',
       isActive: true,
     });
+
+    expect(screen.getByTestId('sort-icon').parentElement).toHaveAttribute(
+      'data-sort-direction',
+      'ascending'
+    );
   });
 });
diff --git a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
index 30be4205a..ffe0130da 100644
--- a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
+++ b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
@@ -102,7 +102,7 @@
   justify-content: center;
   inline-size: var(--kbq-size-l);
 
-  &.active {
+  &:where(.active) {
     visibility: visible;
   }
 
diff --git a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
index 1f2b2683e..19bf70ff6 100644
--- a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
+++ b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
@@ -82,6 +82,8 @@ export function TableColumnHeader<T>({
   const columnSortIcon = allowsSorting && (
     <span
       aria-hidden="true"
+      data-slot="sort-icon"
+      data-sort-direction={direction || undefined}
       className={clsx(s.sortIcon, (isActive || isHovered) && s.active)}
     >
       {iconToRender}