fix: address DataTable, Modal, and ErrorBoundary review feedback (#9)

* Initial plan

* fix: address PR review comments for DataTable, Modal, and ErrorBoundary

Co-authored-by: intel352 <77607+intel352@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: intel352 <77607+intel352@users.noreply.github.com>

Author: Copilot

package-lock.json

@@ -47,7 +47,7 @@ describe('DataTable', () => {
         caption="Workflow list"
       />,
     );
-    expect(screen.getByRole('grid', { name: 'Workflow list' })).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Workflow list' })).toBeInTheDocument();
   });
 
   it('sorts by column when clicking sortable header', async () => {

src/components/DataTable/DataTable.test.tsx

@@ -1,15 +1,15 @@
-import { useState, useCallback, type CSSProperties } from 'react';
+import { useState, useCallback, useEffect, type CSSProperties, type ReactNode } from 'react';
 import { colors, baseStyles } from '../../theme';
 
 export interface DataTableColumn<T> {
   /** Unique key matching a property in the row data. */
-  key: string;
+  key: keyof T & string;
   /** Display header text. */
   header: string;
   /** Whether this column is sortable. Default: false */
   sortable?: boolean;
   /** Custom cell renderer. */
-  render?: (value: unknown, row: T) => React.ReactNode;
+  render?: (value: T[keyof T & string], row: T) => ReactNode;
 }
 
 export interface DataTableProps<T> {
@@ -37,12 +37,20 @@ export default function DataTable<T extends Record<string, unknown>>({
   caption,
   style,
 }: DataTableProps<T>) {
-  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortKey, setSortKey] = useState<(keyof T & string) | null>(null);
   const [sortDir, setSortDir] = useState<SortDirection>('asc');
   const [page, setPage] = useState(0);
 
+  // Clamp page when data length or pageSize changes to avoid empty views
+  useEffect(() => {
+    if (pageSize > 0) {
+      const total = Math.max(1, Math.ceil(data.length / pageSize));
+      setPage((p) => Math.min(p, total - 1));
+    }
+  }, [data.length, pageSize]);
+
   const handleSort = useCallback(
-    (key: string) => {
+    (key: keyof T & string) => {
       if (sortKey === key) {
         setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
       } else {
@@ -73,7 +81,7 @@ export default function DataTable<T extends Record<string, unknown>>({
 
   return (
     <div style={style}>
-      <table style={baseStyles.table} role="grid" aria-label={caption}>
+      <table style={baseStyles.table} aria-label={caption}>
         {caption && <caption style={{ ...visuallyHidden }}>{caption}</caption>}
         <thead>
           <tr>

src/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ErrorBoundary from './ErrorBoundary';

src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -44,8 +44,10 @@ describe('Modal', () => {
       </Modal>,
     );
     const dialog = screen.getByRole('dialog');
-    expect(dialog).toHaveAttribute('aria-labelledby', 'modal-title');
-    expect(screen.getByText('My Dialog')).toHaveAttribute('id', 'modal-title');
+    const labelledById = dialog.getAttribute('aria-labelledby');
+    expect(labelledById).toBeTruthy();
+    const titleEl = screen.getByText('My Dialog');
+    expect(titleEl).toHaveAttribute('id', labelledById);
   });
 
   it('calls onClose when close button is clicked', async () => {

src/components/Modal/Modal.test.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, type CSSProperties, type ReactNode } from 'react';
+import { useEffect, useRef, useCallback, useId, type CSSProperties, type ReactNode, type MouseEvent } from 'react';
 import { colors, baseStyles } from '../../theme';
 
 export type ModalVariant = 'info' | 'confirmation' | 'error';
@@ -43,6 +43,7 @@ export default function Modal({
 }: ModalProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
+  const titleId = useId();
 
   useEffect(() => {
     const dialog = dialogRef.current;
@@ -57,15 +58,6 @@ export default function Modal({
     }
   }, [open]);
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
   // Handle native dialog cancel event (ESC key)
   useEffect(() => {
     const dialog = dialogRef.current;
@@ -79,7 +71,7 @@ export default function Modal({
   }, [onClose]);
 
   const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
+    (e: MouseEvent<HTMLDialogElement>) => {
       if (e.target === dialogRef.current) {
         onClose();
       }
@@ -94,9 +86,8 @@ export default function Modal({
   return (
     <dialog
       ref={dialogRef}
-      onKeyDown={handleKeyDown}
       onClick={handleBackdropClick}
-      aria-labelledby="modal-title"
+      aria-labelledby={titleId}
       style={{
         backgroundColor: colors.surface0,
         color: colors.text,
@@ -117,7 +108,7 @@ export default function Modal({
           }}
         >
           <h2
-            id="modal-title"
+            id={titleId}
             style={{
               margin: 0,
               fontSize: '18px',