diff --git a/packages/bindx-ui/src/datagrid/column-header.tsx b/packages/bindx-ui/src/datagrid/column-header.tsx
index bdc49fd2..3975ffa8 100644
--- a/packages/bindx-ui/src/datagrid/column-header.tsx
+++ b/packages/bindx-ui/src/datagrid/column-header.tsx
@@ -24,9 +24,10 @@ export interface DataGridColumnHeaderUIProps {
className?: string
}
-function DataGridColumnFilterIcon({ filterName }: { filterName: string }): ReactElement | null {
+// Muted when idle so a filterable column advertises itself; blue keeps an active filter distinct.
+function DataGridColumnFilterIcon({ filterName }: { filterName: string }): ReactElement {
const [, , { isEmpty }] = useDataViewFilter(filterName)
- return isEmpty ? null :
+ return
}
export function DataGridColumnHeaderUI({
diff --git a/packages/bindx-ui/src/datagrid/ui/label-ui.tsx b/packages/bindx-ui/src/datagrid/ui/label-ui.tsx
index 14f5f1f0..ab2a0385 100644
--- a/packages/bindx-ui/src/datagrid/ui/label-ui.tsx
+++ b/packages/bindx-ui/src/datagrid/ui/label-ui.tsx
@@ -1,5 +1,7 @@
import { uic } from '../../utils/uic.js'
+// Focusable so the filter affordance and its tooltip are reachable without a mouse.
export const DataGridTooltipLabel = uic('span', {
- baseClass: 'cursor-pointer underline decoration-dashed decoration-gray-400 underline-offset-4 hover:decoration-gray-800',
+ defaultProps: { tabIndex: 0 },
+ baseClass: 'cursor-pointer underline decoration-dashed decoration-transparent underline-offset-4 transition-colors hover:decoration-gray-400 focus-visible:decoration-gray-800 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring rounded-xs',
})
diff --git a/packages/bindx-ui/src/ui/tooltip.tsx b/packages/bindx-ui/src/ui/tooltip.tsx
index 7e31eff3..fbad1018 100644
--- a/packages/bindx-ui/src/ui/tooltip.tsx
+++ b/packages/bindx-ui/src/ui/tooltip.tsx
@@ -27,6 +27,7 @@ export const Tooltip = forwardRef(({