@jmruthers/pace-core 0.6.3 → 0.6.5

package/src/components/DataTable/__tests__/keyboard.test.tsx

@@ -232,6 +232,16 @@ const KeyboardNavigationTestTable: React.FC = () => {
 
 describe('DataTable Keyboard Navigation', () => {
   beforeEach(() => {
+    // Mock showModal for dialog elements (needed for test environments)
+    HTMLDialogElement.prototype.showModal = vi.fn(function(this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+      this.dispatchEvent(new Event('show', { bubbles: true }));
+    });
+    HTMLDialogElement.prototype.close = vi.fn(function(this: HTMLDialogElement) {
+      this.removeAttribute('open');
+      this.dispatchEvent(new Event('close', { bubbles: true }));
+    });
+    
     // Clear any existing live regions
     const existingLiveRegions = document.querySelectorAll('[aria-live]');
     existingLiveRegions.forEach(region => {
@@ -517,8 +527,11 @@ describe('DataTable Keyboard Navigation', () => {
       const importButton = await screen.findByRole('button', { name: /import/i });
       await user.click(importButton);
 
-      // Confirm the modal is open
-      await screen.findByRole('dialog');
+      // Confirm the modal is open - wait for dialog to be accessible
+      await waitFor(() => {
+        const dialog = screen.queryByRole('dialog') || document.querySelector('dialog[role="dialog"]');
+        expect(dialog).toBeInTheDocument();
+      }, { timeout: 5000 });
 
       // Close modal via Escape key
       await user.keyboard('{Escape}');

package/src/components/DataTable/components/ImportModal.tsx

@@ -36,7 +36,7 @@
  * - Customizable text content
  */
 import React, { useState, useRef, useEffect } from 'react';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../Dialog';
+import { Dialog, DialogContent, DialogHeader } from '../../Dialog';
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
 import { Progress } from '../../Progress';
@@ -372,12 +372,10 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-2xl bg-main-50">
+      <DialogContent className="sm:max-w-2xl bg-main-50" title={title} description={description}>
         <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>
-            {description}
-          </DialogDescription>
+          <h2>{title}</h2>
+          <p>{description}</p>
         </DialogHeader>
 
         <div className="space-y-4">

package/src/components/DataTable/components/ViewRowModal.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../Dialog/Dialog';
+import { Dialog, DialogContent, DialogHeader } from '../../Dialog/Dialog';
 import { Button } from '../../Button/Button';
 import { X } from 'lucide-react';
 
@@ -27,9 +27,9 @@ export function ViewRowModal<TData extends Record<string, any>>({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto" title={title}>
         <DialogHeader>
-          <DialogTitle className="flex items-center justify-between">
+          <h2 className="flex items-center justify-between">
             {title}
             <Button
               variant="ghost"
@@ -39,7 +39,7 @@ export function ViewRowModal<TData extends Record<string, any>>({
             >
               <X className="size-4" />
             </Button>
-          </DialogTitle>
+          </h2>
         </DialogHeader>
         
         <div className="mt-4">