@jmruthers/pace-core 0.6.8 → 0.6.10

package/src/components/Alert/Alert.test.tsx

@@ -1,6 +1,16 @@
 /**
  * @file Alert Component Tests
- * @description Comprehensive tests for Alert, AlertTitle, and AlertDescription components
+ * @package @jmruthers/pace-core
+ * @module Components/Alert
+ * @since 0.1.0
+ *
+ * Comprehensive tests for Alert, AlertTitle, and AlertDescription components covering:
+ * - Rendering and variants
+ * - Context sharing
+ * - Accessibility
+ * - Composition
+ * - Edge cases
+ * - Integration scenarios
  */
 
 import React from 'react';
@@ -11,7 +21,7 @@ import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 describe('Alert Component', () => {
     describe('Rendering', () => {
-    it('renders as semantic p element with role="alert"', () => {
+    it('renders as semantic div element with role="alert"', () => {
       renderWithProviders(
         <Alert>
           <AlertTitle>Test Title</AlertTitle>
@@ -20,7 +30,7 @@ describe('Alert Component', () => {
       );
       
       const alert = screen.getByRole('alert');
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toBeInTheDocument();
       expect(alert).toHaveAttribute('role', 'alert');
     });
@@ -35,7 +45,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(alert).toHaveClass('relative', 'w-full', 'rounded-lg', 'border', 'p-4');
     });
@@ -50,7 +60,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(alert).toHaveClass('border-destructive', 'text-destructive');
     });
@@ -76,7 +86,7 @@ describe('Alert Component', () => {
       );
       
       const alert = screen.getByRole('alert');
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(alert).toHaveClass('custom-alert-class');
     });
@@ -92,7 +102,7 @@ describe('Alert Component', () => {
     });
 
     it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLParagraphElement>();
+      const ref = React.createRef<HTMLDivElement>();
       
       renderWithProviders(
         <Alert ref={ref}>
@@ -100,8 +110,8 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
-      expect(ref.current?.tagName).toBe('P');
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current?.tagName).toBe('DIV');
       expect(ref.current).toHaveAttribute('role', 'alert');
     });
   });
@@ -279,7 +289,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
     });
 
@@ -293,7 +303,7 @@ describe('Alert Component', () => {
       
       const status = screen.getByRole('status');
       expect(status).toBeInTheDocument();
-      expect(status.tagName).toBe('P');
+      expect(status.tagName).toBe('DIV');
       expect(status).toHaveAttribute('role', 'status');
       expect(status).toHaveAttribute('aria-live', 'polite');
       expect(screen.queryByRole('alert')).not.toBeInTheDocument();
@@ -323,7 +333,7 @@ describe('Alert Component', () => {
       
       const region = screen.getByRole('region', { name: 'Custom region' });
       expect(region).toBeInTheDocument();
-      expect(region.tagName).toBe('P');
+      expect(region.tagName).toBe('DIV');
       expect(region).toHaveAttribute('role', 'region');
       expect(screen.queryByRole('alert')).not.toBeInTheDocument();
       expect(screen.queryByRole('status')).not.toBeInTheDocument();
@@ -352,7 +362,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       
       // Screen readers will announce the content within the alert
@@ -372,7 +382,7 @@ describe('Alert Component', () => {
       const title = screen.getByRole('heading', { level: 5 });
       const description = screen.getByText('Semantic description with proper heading structure');
       
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(title).toBeInTheDocument();
       expect(description.tagName).toBe('P');
@@ -392,7 +402,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByText('⚠️')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
@@ -409,7 +419,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByText('First description')).toBeInTheDocument();
       expect(screen.getByText('Second description')).toBeInTheDocument();
@@ -424,7 +434,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByText('Description without title')).toBeInTheDocument();
     });
@@ -438,7 +448,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent('Title without description');
     });
@@ -450,7 +460,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(alert).toBeEmptyDOMElement();
     });
@@ -481,7 +491,7 @@ describe('Alert Component', () => {
       // Should fallback to default behavior
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
     });
 
@@ -513,7 +523,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
     });
   });
@@ -533,7 +543,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByRole('textbox')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
@@ -555,8 +565,8 @@ describe('Alert Component', () => {
       
       const alerts = screen.getAllByRole('alert');
       expect(alerts).toHaveLength(2);
-      expect(alerts[0].tagName).toBe('P');
-      expect(alerts[1].tagName).toBe('P');
+      expect(alerts[0].tagName).toBe('DIV');
+      expect(alerts[1].tagName).toBe('DIV');
       expect(alerts[0]).toHaveAttribute('role', 'alert');
       expect(alerts[1]).toHaveAttribute('role', 'alert');
       expect(alerts[0]).toHaveClass('bg-background', 'text-foreground');
@@ -579,7 +589,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('P');
+      expect(alert.tagName).toBe('DIV');
       expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByText('Complex Alert')).toBeInTheDocument();
       expect(screen.getByText('This is a complex description with')).toBeInTheDocument();

package/src/components/Alert/Alert.tsx

@@ -10,27 +10,27 @@
  * Features:
  * - Multiple visual variants (default, destructive, inline)
  * - Title and description support
- * - Semantic HTML: renders as `<p>` element with `role="alert"` (default) or custom role
+ * - Semantic HTML: renders as `<div>` element with `role="alert"` (default) or custom role
  * - Keyboard and screen reader accessible
  * - Composable with icons and actions
  * - Inline variant for lightweight text formatting
  *
  * @example
  * ```tsx
- * // Basic alert (renders as <p role="alert"> with <h5> title and <p> description)
+ * // Basic alert (renders as <div role="alert"> with <h5> title and <p> description)
  * <Alert>
  *   <AlertTitle>Success</AlertTitle>
  *   <AlertDescription>Your changes have been saved.</AlertDescription>
  * </Alert>
  *
- * // Destructive alert with icon (renders as <p role="alert"> with <h5> title and <p> description)
+ * // Destructive alert with icon (renders as <div role="alert"> with <h5> title and <p> description)
  * <Alert variant="destructive">
  *   <ErrorIcon />
  *   <AlertTitle>Error</AlertTitle>
  *   <AlertDescription>Something went wrong.</AlertDescription>
  * </Alert>
  *
- * // Status message (renders as <p role="status"> for informational messages)
+ * // Status message (renders as <div role="status"> for informational messages)
  * <Alert role="status" aria-live="polite">
  *   <AlertTitle>No data available</AlertTitle>
  *   <AlertDescription>Get started by adding your first entry.</AlertDescription>
@@ -44,7 +44,7 @@
  * ```
  *
  * @accessibility
- * - Uses semantic HTML: `<p>` element with `role="alert"` (default) for screen reader announcements
+ * - Uses semantic HTML: `<div>` element with `role="alert"` (default) for screen reader announcements
  * - Can be customized with `role="status"` for informational messages
  * - Title and description are semantically structured
  * - Supports keyboard navigation and focus
@@ -70,8 +70,8 @@ const getAlertClasses = (variant: "default" | "destructive" | "inline" = "defaul
 };
 
 const Alert = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement> & { 
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { 
     variant?: "default" | "destructive" | "inline";
     role?: string;
   }
@@ -88,7 +88,7 @@ const Alert = React.forwardRef<
   
   return (
     <AlertContext.Provider value={contextValue}>
-      <p
+      <div
         ref={ref}
         className={cn(getAlertClasses(variant), className)}
         role={role}