fix(webapp): enforce keyboard interaction safeguards

Author: carderne

.oxlintrc.json

@@ -76,7 +76,7 @@
     "react/no-unknown-property": "error",
     "jsx-a11y/alt-text": "error",
     "jsx-a11y/aria-role": "error",
-    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/click-events-have-key-events": "error",
     "jsx-a11y/control-has-associated-label": [
       "error",
       {
@@ -87,7 +87,7 @@
     "jsx-a11y/label-has-associated-control": "error",
     "jsx-a11y/no-autofocus": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "error",
-    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/no-static-element-interactions": "error",
     "jsx-a11y/prefer-tag-over-role": "off",
     "jsx-a11y/anchor-ambiguous-text": "error",
     "jsx-a11y/anchor-has-content": "error",

apps/webapp/app/components/code/TSQLEditor.tsx

@@ -264,6 +264,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
 
   const showButtons = showClearButton || showCopyButton || showFormatButton || additionalActions;
 
+  /* oxlint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- The CodeMirror mount forwards pointer focus to CodeMirror's own keyboard-accessible editor. */
   return (
     <div
       className={cn("relative flex h-full flex-col", opts.className)}
@@ -337,6 +338,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
     </div>
   );
 }
+/* oxlint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
 
 // SQL keywords that legitimately appear before parentheses with a space
 const SQL_KEYWORDS_BEFORE_PAREN = new Set([

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -14,6 +14,7 @@ import {
   type ColumnFiltersState,
   type ColumnResizeMode,
   type FilterFn,
+  type Header,
   type SortDirection,
   type SortingState,
 } from "@tanstack/react-table";
@@ -1041,6 +1042,24 @@ function FilterCell({
   );
 }
 
+/* oxlint-disable jsx-a11y/no-static-element-interactions -- Column resizing is a pointer-drag interaction provided by TanStack Table. */
+function ColumnResizeHandle({ header }: { header: Header<RowData, unknown> }) {
+  return (
+    <div
+      onDoubleClick={() => header.column.resetSize()}
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+      className={cn(
+        "absolute right-0 top-0 h-full w-0.5 cursor-col-resize touch-none select-none",
+        "opacity-0 group-hover/header:opacity-100",
+        "bg-surface-control hover:bg-indigo-500",
+        header.column.getIsResizing() && "bg-indigo-500 opacity-100"
+      )}
+    />
+  );
+}
+/* oxlint-enable jsx-a11y/no-static-element-interactions */
+
 export const TSQLResultsTable = memo(function TSQLResultsTable({
   rows,
   columns,
@@ -1233,18 +1252,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                     </HeaderCellContent>
-                    {/* Column resizer */}
-                    <div
-                      onDoubleClick={() => header.column.resetSize()}
-                      onMouseDown={header.getResizeHandler()}
-                      onTouchStart={header.getResizeHandler()}
-                      className={cn(
-                        "absolute right-0 top-0 h-full w-0.5 cursor-col-resize touch-none select-none",
-                        "opacity-0 group-hover/header:opacity-100",
-                        "bg-surface-control hover:bg-indigo-500",
-                        header.column.getIsResizing() && "bg-indigo-500 opacity-100"
-                      )}
-                    />
+                    <ColumnResizeHandle header={header} />
                   </th>
                 );
               })}

apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx

@@ -581,6 +581,7 @@ export function DashboardAgentPanel({
   // Not filtered to active: the wake banner needs watches that already fired.
   const chatWatches = activeChat?.watches ?? [];
 
+  /* oxlint-disable jsx-a11y/no-static-element-interactions -- Escape handling intentionally bubbles from focused controls inside the panel. */
   return (
     <div
       ref={panelRef}
@@ -667,3 +668,4 @@ export function DashboardAgentPanel({
     </div>
   );
 }
+/* oxlint-enable jsx-a11y/no-static-element-interactions */

apps/webapp/app/components/primitives/Input.tsx

@@ -95,6 +95,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const inputClassName = variants[variant].input;
     const variantIconClassName = variants[variant].iconSize;
 
+    /* oxlint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- The wrapper only forwards pointer focus to its nested input. */
     return (
       <div
         className={cn(
@@ -125,6 +126,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     );
   }
 );
+/* oxlint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
 Input.displayName = "Input";
 
 export { Input };