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(({