@opencorestack/opengridx 2.1.0 → 3.0.1

package/lib/components/Cell/GridEditInputCell.tsx

@@ -1,14 +1,34 @@
 import { useEffect, useRef, useState } from 'react';
-import type { GridRenderCellParams } from '../../types';
+import type { KeyboardEvent } from 'react';
+import type { GridColDef, GridRenderEditCellParams } from '../../types';
 
-export interface GridEditInputCellProps extends GridRenderCellParams {
-    onValueChange: (value: unknown) => void;
-    onCommit: () => void;
-    onCancel: () => void;
+export type GridEditInputCellProps = GridRenderEditCellParams;
+
+type ValueOption = NonNullable<GridColDef['valueOptions']>[number];
+
+/** The accessible name of an editor: its column header, or the field when there is none. */
+function editorLabel(colDef: GridColDef): string {
+    return colDef.headerName || colDef.field;
+}
+
+/** An IME is composing (keyCode 229 covers Safari and older engines): Enter/Escape belong to the IME. */
+function isComposing(e: KeyboardEvent): boolean {
+    return e.nativeEvent.isComposing || e.keyCode === 229;
+}
+
+function makeKeyDownHandler(onCommit: () => void, onCancel: () => void, commitOnEnter = true) {
+    return (e: KeyboardEvent) => {
+        if (isComposing(e)) {
+            e.stopPropagation();
+            return;
+        }
+        if (commitOnEnter && e.key === 'Enter') { e.stopPropagation(); onCommit(); }
+        if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
+    };
 }
 
 // ─── Text / String ────────────────────────────────────────────────────────────
-function TextEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+function TextEditor({ value, colDef, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
     const [local, setLocal] = useState(String(value ?? ''));
     const ref = useRef<HTMLInputElement>(null);
     useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
@@ -18,19 +38,17 @@ function TextEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputC
             ref={ref}
             type="text"
             className="ogx__edit-input"
+            aria-label={editorLabel(colDef)}
             value={local}
             onChange={e => { setLocal(e.target.value); onValueChange(e.target.value); }}
             onBlur={onCommit}
-            onKeyDown={e => {
-                if (e.key === 'Enter') { e.stopPropagation(); onCommit(); }
-                if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
-            }}
+            onKeyDown={makeKeyDownHandler(onCommit, onCancel)}
         />
     );
 }
 
 // ─── Number ───────────────────────────────────────────────────────────────────
-function NumberEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+function NumberEditor({ value, colDef, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
     const [local, setLocal] = useState<string | number>(typeof value === 'number' ? value : '');
     const ref = useRef<HTMLInputElement>(null);
     useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
@@ -40,6 +58,7 @@ function NumberEditor({ value, onValueChange, onCommit, onCancel }: GridEditInpu
             ref={ref}
             type="number"
             className="ogx__edit-input ogx__edit-input--number"
+            aria-label={editorLabel(colDef)}
             value={local}
             onChange={e => {
                 const v = e.target.value === '' ? '' : Number(e.target.value);
@@ -47,24 +66,20 @@ function NumberEditor({ value, onValueChange, onCommit, onCancel }: GridEditInpu
                 onValueChange(v === '' ? null : v);
             }}
             onBlur={onCommit}
-            onKeyDown={e => {
-                if (e.key === 'Enter') { e.stopPropagation(); onCommit(); }
-                if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
-            }}
+            onKeyDown={makeKeyDownHandler(onCommit, onCancel)}
         />
     );
 }
 
 // ─── Boolean ──────────────────────────────────────────────────────────────────
-function BooleanEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+function BooleanEditor({ value, colDef, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
     const ref = useRef<HTMLInputElement>(null);
     useEffect(() => { ref.current?.focus(); }, []);
 
     const handleChange = () => {
-        const next = !value;
-        onValueChange(next);
-        // Commit immediately on toggle
-        setTimeout(onCommit, 0);
+        // The grid records the new value synchronously, so the toggle can be committed straight away.
+        onValueChange(!value);
+        onCommit();
     };
 
     return (
@@ -73,47 +88,107 @@ function BooleanEditor({ value, onValueChange, onCommit, onCancel }: GridEditInp
                 ref={ref}
                 type="checkbox"
                 className="ogx__edit-checkbox"
+                aria-label={editorLabel(colDef)}
                 checked={!!value}
                 onChange={handleChange}
-                onKeyDown={e => {
-                    if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
-                }}
+                onBlur={onCommit}
+                onKeyDown={makeKeyDownHandler(onCommit, onCancel, false)}
             />
         </div>
     );
 }
 
 // ─── SingleSelect / Enum ──────────────────────────────────────────────────────
+const optionValue = (opt: ValueOption): unknown => (typeof opt === 'object' ? opt.value : opt);
+const optionLabel = (opt: ValueOption): string => (typeof opt === 'object' ? opt.label : String(opt));
+
+function sameOptionValue(a: unknown, b: unknown): boolean {
+    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+    return Object.is(a, b);
+}
+
 function SelectEditor({ value, colDef, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
     const ref = useRef<HTMLSelectElement>(null);
     useEffect(() => { ref.current?.focus(); }, []);
 
     const options = colDef.valueOptions ?? [];
+    const keys = options.map(opt => String(optionValue(opt)));
+    let selectedIndex = options.findIndex(opt => sameOptionValue(optionValue(opt), value));
+    if (selectedIndex === -1 && value !== null && value !== undefined) {
+        // Loose match so a string '2' in the row still selects the numeric option 2.
+        selectedIndex = keys.indexOf(String(value));
+    }
+    // With no matching option the browser would show the first option as chosen while the value
+    // is still null, and re-picking that option fires no change event. Show an empty choice instead.
+    const showEmptyChoice = selectedIndex === -1;
 
     return (
         <select
             ref={ref}
             className="ogx__edit-select"
-            value={String(value ?? '')}
-            onChange={e => { onValueChange(e.target.value); }}
-            onBlur={onCommit}
-            onKeyDown={e => {
-                if (e.key === 'Enter') { e.stopPropagation(); onCommit(); }
-                if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
+            aria-label={editorLabel(colDef)}
+            value={showEmptyChoice ? '' : keys[selectedIndex]}
+            onChange={e => {
+                const index = keys.indexOf(e.target.value);
+                // Commit the option's own value (a number stays a number), not the DOM string.
+                onValueChange(index === -1 ? null : optionValue(options[index]));
             }}
+            onBlur={onCommit}
+            onKeyDown={makeKeyDownHandler(onCommit, onCancel)}
         >
-            {options.map(opt => {
-                const v = typeof opt === 'object' ? opt.value : opt;
-                const l = typeof opt === 'object' ? opt.label : String(opt);
-                return <option key={String(v)} value={String(v)}>{l}</option>;
-            })}
+            {showEmptyChoice && <option value="" />}
+            {options.map((opt, i) => (
+                <option key={i} value={keys[i]}>{optionLabel(opt)}</option>
+            ))}
         </select>
     );
 }
 
 // ─── Date ─────────────────────────────────────────────────────────────────────
-function DateEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
-    const [local, setLocal] = useState<string>(typeof value === 'string' ? value : String(value ?? ''));
+const pad2 = (n: number) => String(n).padStart(2, '0');
+const ISO_DATE_PREFIX = /^(\d{4}-\d{2}-\d{2})/;
+
+/** The `YYYY-MM-DD` an `<input type="date">` needs; Dates use their local calendar day. */
+function toDateInputValue(value: unknown): string {
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime())
+            ? ''
+            : `${value.getFullYear()}-${pad2(value.getMonth() + 1)}-${pad2(value.getDate())}`;
+    }
+    if (typeof value === 'string') {
+        const iso = ISO_DATE_PREFIX.exec(value);
+        if (iso) return iso[1];
+        return value === '' ? '' : toDateInputValue(new Date(value));
+    }
+    if (typeof value === 'number') return toDateInputValue(new Date(value));
+    return '';
+}
+
+/**
+ * Turns the picked `YYYY-MM-DD` back into the kind of value the cell held: a Date stays a Date
+ * (keeping its time of day), a timestamp stays a timestamp, an ISO date-time string keeps its time
+ * part. A cleared input commits `null`.
+ */
+function fromDateInputValue(picked: string, original: unknown): unknown {
+    if (picked === '') return null;
+    const [year, month, day] = picked.split('-').map(Number);
+    const withDay = (base: Date) => {
+        const next = new Date(base.getTime());
+        next.setFullYear(year, month - 1, day);
+        return next;
+    };
+    if (original instanceof Date && !Number.isNaN(original.getTime())) return withDay(original);
+    if (typeof original === 'number' && Number.isFinite(original)) return withDay(new Date(original)).getTime();
+    if (typeof original === 'string' && ISO_DATE_PREFIX.test(original) && original.length > 10) {
+        return picked + original.slice(10);
+    }
+    return picked;
+}
+
+function DateEditor({ value, colDef, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+    // The value the edit started from decides the type that is committed back.
+    const [initialValue] = useState(value);
+    const [local, setLocal] = useState(() => toDateInputValue(value));
     const ref = useRef<HTMLInputElement>(null);
     useEffect(() => { ref.current?.focus(); }, []);
 
@@ -122,13 +197,11 @@ function DateEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputC
             ref={ref}
             type="date"
             className="ogx__edit-input"
+            aria-label={editorLabel(colDef)}
             value={local}
-            onChange={e => { setLocal(e.target.value); onValueChange(e.target.value); }}
+            onChange={e => { setLocal(e.target.value); onValueChange(fromDateInputValue(e.target.value, initialValue)); }}
             onBlur={onCommit}
-            onKeyDown={e => {
-                if (e.key === 'Enter') { e.stopPropagation(); onCommit(); }
-                if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
-            }}
+            onKeyDown={makeKeyDownHandler(onCommit, onCancel)}
         />
     );
 }

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.css

@@ -9,7 +9,7 @@
     align-items: stretch;
     background: var(--ogx-grid-header-background);
     border-bottom: 1px solid var(--ogx-grid-border-color);
-    overflow: hidden;
+    /* No overflow clipping: it would make the row the scroll container of its sticky (pinned) cells. */
     flex-shrink: 0;
     min-height: var(--ogx-header-height, 48px);
 }
@@ -46,6 +46,12 @@
     background: transparent;
 }
 
+/* ─── Pinned group cell (sticky over pinned columns) ────────────────────────*/
+.ogx-col-group-cell--pinned {
+    background: var(--ogx-grid-header-background);
+    z-index: 12;
+}
+
 /* ─── Label text ─────────────────────────────────────────────────────────────*/
 .ogx-col-group-cell__label {
     font-size: 0.75rem;

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.css

@@ -1,15 +1,28 @@
 .ogx-column-resize-handle {
   position: absolute;
   top: 0;
-  right: -4px;
+  /* Inside the header cell: the cell clips overflow, so a handle straddling the border lost its outer half. */
+  right: 0;
   width: 8px;
   height: 100%;
   cursor: col-resize;
   z-index: 10;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
   user-select: none;
+  /* Touch and pen drags resize the column instead of scrolling the grid. */
+  touch-action: none;
+}
+/* Right-pinned columns grow leftwards: their handle sits on the left edge. */
+.ogx-column-resize-handle--start {
+  right: auto;
+  left: 0;
+  justify-content: flex-start;
+}
+.ogx-column-resize-handle:focus-visible .ogx-column-resize-handle__line {
+  background: var(--ogx-color-primary);
+  opacity: 1;
 }
 .ogx-column-resize-handle:hover .ogx-column-resize-handle__line,
 .ogx-column-resize-handle--dragging .ogx-column-resize-handle__line {

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.tsx

@@ -1,58 +1,113 @@
-
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { clampResizeWidth } from './clampResizeWidth';
 
 
 export interface ColumnResizeHandleProps {
     field: string;
     currentWidth: number;
     onResize: (field: string, newWidth: number) => void;
+    /** Defaults to 50 (the layout's default minimum), or the current width if that is smaller. */
     minWidth?: number;
+    /** Defaults to no limit. */
     maxWidth?: number;
+    /**
+     * Which edge of the column the handle sits on. `'start'` (the left edge) is for right-pinned
+     * columns, which are anchored on the right and grow leftwards. Default `'end'`.
+     */
+    edge?: 'start' | 'end';
 }
 
-export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
-    const { field, currentWidth, onResize, minWidth = 50, maxWidth = 1000 } = props;
-    const [isDragging, setIsDragging] = useState(false);
-    const startXRef = useRef<number>(0);
-    const startWidthRef = useRef<number>(0);
+interface ActiveResize {
+    pointerId: number;
+    startX: number;
+    startWidth: number;
+    lastUpdate: number;
+    moved: boolean;
+}
 
-    const handleMouseDown = useCallback((event: React.MouseEvent) => {
-        event.preventDefault();
+const THROTTLE_MS = 16;
+
+function preventMouseDefault(event: React.MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+}
+
+/** Swallows the click the browser synthesizes after a drag, so ending a resize never sorts. */
+function suppressNextClick(): void {
+    const swallow = (event: MouseEvent) => {
         event.stopPropagation();
+        event.preventDefault();
+    };
+    window.addEventListener('click', swallow, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 0);
+}
 
-        setIsDragging(true);
-        startXRef.current = event.clientX;
-        // Use the logical stored width — reliable for pinned, flex, and normal columns
-        startWidthRef.current = currentWidth;
-
-        let lastUpdateTime = 0;
-        const throttleMs = 16;
-
-        const handleMouseMove = (e: MouseEvent) => {
-            const deltaX = e.clientX - startXRef.current;
-            const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidthRef.current + deltaX));
-
-            const now = Date.now();
-            if (now - lastUpdateTime >= throttleMs) {
-                onResize(field, newWidth);
-                lastUpdateTime = now;
-            }
-        };
+export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
+    const { field, currentWidth, onResize, minWidth, maxWidth, edge = 'end' } = props;
+    const [isDragging, setIsDragging] = useState(false);
+    const activeRef = useRef<ActiveResize | null>(null);
 
-        const handleMouseUp = (e: MouseEvent) => {
-            setIsDragging(false);
+    // A resize in progress ends with the handle: nothing is reported after unmount.
+    useEffect(() => () => { activeRef.current = null; }, []);
 
-            const deltaX = e.clientX - startXRef.current;
-            const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidthRef.current + deltaX));
+    const widthAt = useCallback((active: ActiveResize, clientX: number) => {
+        const deltaX = clientX - active.startX;
+        const raw = active.startWidth + (edge === 'start' ? -deltaX : deltaX);
+        return clampResizeWidth(raw, active.startWidth, minWidth, maxWidth);
+    }, [edge, minWidth, maxWidth]);
 
-            onResize(field, newWidth);
+    const handlePointerDown = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+        if (event.button !== 0) return;
+        event.stopPropagation();
 
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
+        activeRef.current = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            // The logical stored width: reliable for pinned, flex, and normal columns.
+            startWidth: currentWidth,
+            lastUpdate: 0,
+            moved: false,
         };
-
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
+        setIsDragging(true);
+        // Keeps pointermove / pointerup coming to the handle wherever the pointer goes (also touch and pen).
+        try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        } catch {
+            // The pointer is no longer active (synthetic events); moves over the handle still work.
+        }
+    }, [currentWidth]);
+
+    const handlePointerMove = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+        const active = activeRef.current;
+        if (!active || event.pointerId !== active.pointerId) return;
+        if (event.clientX !== active.startX) active.moved = true;
+        if (!active.moved) return;
+
+        const now = Date.now();
+        if (now - active.lastUpdate >= THROTTLE_MS) {
+            active.lastUpdate = now;
+            onResize(field, widthAt(active, event.clientX));
+        }
+    }, [field, onResize, widthAt]);
+
+    const finish = useCallback((event: React.PointerEvent<HTMLDivElement>, commit: boolean) => {
+        const active = activeRef.current;
+        if (!active || event.pointerId !== active.pointerId) return;
+        activeRef.current = null;
+        setIsDragging(false);
+        if (active.moved || event.clientX !== active.startX) {
+            // The drag may end over the header cell, which would take the synthesized click as a sort.
+            suppressNextClick();
+            if (commit) onResize(field, widthAt(active, event.clientX));
+        }
+    }, [field, onResize, widthAt]);
+
+    const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+        event.preventDefault();
+        event.stopPropagation();
+        const step = (event.shiftKey ? 50 : 10) * (event.key === 'ArrowRight' ? 1 : -1);
+        onResize(field, clampResizeWidth(currentWidth + step, currentWidth, minWidth, maxWidth));
     }, [field, currentWidth, onResize, minWidth, maxWidth]);
 
     const handleDoubleClick = useCallback((event: React.MouseEvent) => {
@@ -62,22 +117,33 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
 
     const classNames = [
         'ogx-column-resize-handle',
+        edge === 'start' && 'ogx-column-resize-handle--start',
         isDragging && 'ogx-column-resize-handle--dragging'
     ].filter(Boolean).join(' ');
 
     return (
         <div
             className={classNames}
-            onMouseDown={handleMouseDown}
+            onPointerDown={handlePointerDown}
+            // The mouse's default action would start dragging the (draggable) header or select text.
+            onMouseDown={preventMouseDefault}
+            onPointerMove={handlePointerMove}
+            onPointerUp={(e) => finish(e, true)}
+            onPointerCancel={(e) => finish(e, false)}
             onClick={(e) => e.stopPropagation()}
             onDragStart={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
             }}
             onDoubleClick={handleDoubleClick}
+            onKeyDown={handleKeyDown}
             role="separator"
             aria-orientation="vertical"
             aria-label={`Resize ${field} column`}
+            aria-valuenow={Math.round(currentWidth)}
+            aria-valuemin={Math.round(Math.min(minWidth ?? 50, currentWidth))}
+            aria-valuemax={maxWidth}
+            tabIndex={-1}
         >
             <div className="ogx-column-resize-handle__line" />
         </div>

package/lib/components/ColumnResizeHandle/clampResizeWidth.ts

@@ -0,0 +1,13 @@
+/** The layout's minimum for a column without `minWidth` (see useLayout's flex solver). */
+export const DEFAULT_MIN_COLUMN_WIDTH = 50;
+
+/**
+ * Clamps a width a resize asks for to the column's `minWidth` / `maxWidth`. Without `minWidth` the
+ * floor is 50px, and without `maxWidth` there is no ceiling. A column that already sits outside
+ * those bounds (a 30px icon column) is never snapped to them: its own width stays reachable.
+ */
+export function clampResizeWidth(width: number, startWidth: number, minWidth?: number, maxWidth?: number): number {
+    const min = Math.min(minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, startWidth);
+    const max = Math.max(maxWidth ?? Infinity, startWidth);
+    return Math.max(min, Math.min(max, width));
+}

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.css

@@ -109,6 +109,12 @@
   font-size: var(--ogx-font-size-xs);
   color: var(--ogx-overlay-text, var(--ogx-color-gray-900));
   user-select: none;
+  cursor: inherit;
+}
+
+/* The column name fills the row, so a click anywhere after the checkbox toggles it. */
+.ogx-column-visibility-panel__item-label .ogx-column-visibility-panel__label {
+  flex: 1;
 }
 
 .ogx-column-visibility-panel__footer {

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -1,9 +1,9 @@
-import { useState, useMemo, useRef } from 'react';
+import { useState, useMemo, useRef, useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
-import type { GridColDef, GridRowModel } from '../../types';
+import type { GridColDef, GridRowModel, GridValidRowModel } from '../../types';
 
 
-export interface ColumnVisibilityPanelProps<R extends GridRowModel = GridRowModel> {
+export interface ColumnVisibilityPanelProps<R extends GridValidRowModel = GridRowModel> {
     columns: GridColDef<R>[];
     visibleColumns: Set<string>;
     onVisibilityChange: (field: string, isVisible: boolean) => void;
@@ -43,11 +43,15 @@ function DragHandleIcon() {
     );
 }
 
-export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
+export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel>(
     props: ColumnVisibilityPanelProps<R>
 ) {
     const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder, onColumnOrderReset, showNonHideableColumns } = props;
     const [searchQuery, setSearchQuery] = useState('');
+    // Each checkbox is named by a <label htmlFor> holding the column name. (Wrapping Checkbox,
+    // which renders its own <label>, in another <label> nested labels and left the name to a
+    // generic fallback.)
+    const idBase = useId();
     const [dragOverField, setDragOverField] = useState<string | null>(null);
     const dragFieldRef = useRef<string | null>(null);
 
@@ -122,7 +126,8 @@ export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
             </div>
 
             <div className="ogx-column-visibility-panel__list">
-                {filteredColumns.map(col => {
+                {filteredColumns.map((col, index) => {
+                    const checkboxId = `${idBase}-col-${index}`;
                     const isVisible = visibleColumns.has(col.field);
                     const isHideable = col.hideable !== false;
                     const isDragOver = dragOverField === col.field;
@@ -152,35 +157,38 @@ export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
                                     <DragHandleIcon />
                                 </span>
                             )}
-                            <label
+                            <div
                                 className="ogx-column-visibility-panel__item-label"
                                 style={{ display: 'flex', alignItems: 'center', gap: 'var(--ogx-spacing-md)', flex: 1, cursor: isHideable ? 'pointer' : 'not-allowed' }}
                             >
                                 <Checkbox
+                                    id={checkboxId}
                                     checked={isVisible}
                                     onChange={(e) => onVisibilityChange(col.field, e.target.checked)}
                                     disabled={!isHideable}
                                 />
-                                <span className="ogx-column-visibility-panel__label">
+                                <label htmlFor={checkboxId} className="ogx-column-visibility-panel__label">
                                     {col.headerName || col.field}
-                                </span>
-                            </label>
+                                </label>
+                            </div>
                         </div>
                     );
                 })}
             </div>
 
             <div className="ogx-column-visibility-panel__footer">
-                <label className="ogx-column-visibility-panel__item">
+                <div className="ogx-column-visibility-panel__item">
                     <Checkbox
+                        id={`${idBase}-all`}
                         checked={allVisible}
                         onChange={handleToggleAll}
                     />
-                    <span className="ogx-column-visibility-panel__label">
+                    <label htmlFor={`${idBase}-all`} className="ogx-column-visibility-panel__label">
                         Show/Hide All
-                    </span>
-                </label>
+                    </label>
+                </div>
                 <button
+                    type="button"
                     className="ogx-column-visibility-panel__reset-btn"
                     onClick={() => { onShowAll(); onColumnOrderReset?.(); }}
                 >