fix(table): sortable column headers focus state (#939)

kronostechnologies · Jul 16, 2024 · 3a07774 · 3a07774
1 parent 8d9cb34
commit 3a07774
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/react/src/components/table/table-header.tsx b/packages/react/src/components/table/table-header.tsx
@@ -12,6 +12,7 @@ import { devConsole } from '../../utils/dev-console';
 import { SortButtonIcon, SortState } from './sort-button-icon';
 import { TableColumn } from './types';
 import { isAGroupColumn, isLastColumnInAGroup } from './utils/table-utils';
+import { focus } from '../../utils/css-state';
 
 interface CustomHeader<TData extends RowData, TValue = unknown> extends Header<TData, TValue> {
     column: Column<TData, TValue> & {
@@ -21,14 +22,13 @@ interface CustomHeader<TData extends RowData, TValue = unknown> extends Header<T
 
 const SortButton = styled.button<{ $textAlign: string }>`
     align-items: center;
+    border-radius: var(--border-radius);
     cursor: pointer;
     display: flex;
     font: inherit;
     text-align: ${({ $textAlign }) => $textAlign};
 
-    &:focus {
-        outline: none;
-    }
+    ${({ theme }) => focus({ theme }, { focusType: 'focus-visible', insideOnly: true })};
 `;
 
 interface StyledHeaderProps {

diff --git a/packages/react/src/components/table/table.test.tsx.snap b/packages/react/src/components/table/table.test.tsx.snap
@@ -1955,6 +1955,7 @@ exports[`Table has sorting styles 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: var(--border-radius);
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1964,8 +1965,15 @@ exports[`Table has sorting styles 1`] = `
   text-align: left;
 }
 
-.c4:focus {
-  outline: none;
+.c4 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c4:focus-visible {
+  box-shadow: 0 0 0 0 transparent;
+  outline: 2px solid #006296;
+  outline-offset: -2px;
 }
 
 .c3 {