@jmruthers/pace-core 0.5.188 → 0.5.190

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

@@ -11,6 +11,19 @@ import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 describe('Alert Component', () => {
     describe('Rendering', () => {
+    it('renders as semantic aside element', () => {
+      renderWithProviders(
+        <Alert>
+          <AlertTitle>Test Title</AlertTitle>
+          <AlertDescription>Test description</AlertDescription>
+        </Alert>
+      );
+      
+      const alert = screen.getByRole('alert');
+      expect(alert.tagName).toBe('ASIDE');
+      expect(alert).toBeInTheDocument();
+    });
+
     it('renders with default variant', () => {
       renderWithProviders(
         <Alert>
@@ -21,6 +34,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(alert).toHaveClass('relative', 'w-full', 'rounded-lg', 'border', 'p-4');
     });
 
@@ -34,6 +48,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(alert).toHaveClass('border-destructive', 'text-destructive');
     });
 
@@ -58,6 +73,7 @@ describe('Alert Component', () => {
       );
       
       const alert = screen.getByRole('alert');
+      expect(alert.tagName).toBe('ASIDE');
       expect(alert).toHaveClass('custom-alert-class');
     });
 
@@ -72,7 +88,7 @@ describe('Alert Component', () => {
     });
 
     it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLDivElement>();
+      const ref = React.createRef<HTMLElement>();
       
       renderWithProviders(
         <Alert ref={ref}>
@@ -80,7 +96,8 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toBeInstanceOf(HTMLElement);
+      expect(ref.current?.tagName).toBe('ASIDE');
       expect(ref.current).toHaveAttribute('role', 'alert');
     });
   });
@@ -258,6 +275,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
     });
 
     it('does not have role="alert" for inline variant', () => {
@@ -283,6 +301,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       
       // Screen readers will announce the content within the alert
       expect(screen.getByText('Important Notice')).toBeInTheDocument();
@@ -297,9 +316,11 @@ describe('Alert Component', () => {
         </Alert>
       );
       
+      const alert = screen.getByRole('alert');
       const title = screen.getByRole('heading', { level: 5 });
       const description = screen.getByText('Semantic description with proper heading structure');
       
+      expect(alert.tagName).toBe('ASIDE');
       expect(title).toBeInTheDocument();
       expect(description.tagName).toBe('P');
     });
@@ -320,7 +341,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByText('⚠️')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
     });
@@ -334,7 +357,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByText('First description')).toBeInTheDocument();
       expect(screen.getByText('Second description')).toBeInTheDocument();
     });
@@ -346,7 +371,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByText('Description without title')).toBeInTheDocument();
     });
 
@@ -357,7 +384,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent('Title without description');
     });
   });
@@ -368,6 +397,7 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(alert).toBeEmptyDOMElement();
     });
 
@@ -395,7 +425,9 @@ describe('Alert Component', () => {
       );
       
       // Should fallback to default behavior
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
     });
 
     it('handles rapid variant changes', () => {
@@ -424,7 +456,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
     });
   });
 
@@ -441,7 +475,9 @@ describe('Alert Component', () => {
         </form>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByRole('textbox')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
     });
@@ -462,6 +498,8 @@ describe('Alert Component', () => {
       
       const alerts = screen.getAllByRole('alert');
       expect(alerts).toHaveLength(2);
+      expect(alerts[0].tagName).toBe('ASIDE');
+      expect(alerts[1].tagName).toBe('ASIDE');
       expect(alerts[0]).toHaveClass('bg-background', 'text-foreground');
       expect(alerts[1]).toHaveClass('border-destructive', 'text-destructive');
     });
@@ -482,7 +520,9 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert.tagName).toBe('ASIDE');
       expect(screen.getByText('Complex Alert')).toBeInTheDocument();
       expect(screen.getByText('This is a complex description with')).toBeInTheDocument();
       expect(screen.getByText('Multiple elements')).toBeInTheDocument();

package/src/components/Alert/Alert.tsx

@@ -10,6 +10,7 @@
  * Features:
  * - Multiple visual variants (default, destructive, inline)
  * - Title and description support
+ * - Semantic HTML: renders as `<aside>` element
  * - ARIA role="alert" for accessibility
  * - Keyboard and screen reader accessible
  * - Composable with icons and actions
@@ -40,6 +41,7 @@
  * ```
  *
  * @accessibility
+ * - Uses semantic HTML: `<aside>` element for better semantic meaning
  * - Uses role="alert" for screen reader announcement
  * - Title and description are semantically structured
  * - Supports keyboard navigation and focus
@@ -65,8 +67,8 @@ const getAlertClasses = (variant: "default" | "destructive" | "inline" = "defaul
 };
 
 const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { variant?: "default" | "destructive" | "inline" }
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { variant?: "default" | "destructive" | "inline" }
 >(({ className, variant = "default", ...props }, ref) => {
   const contextValue = React.useMemo(() => ({ variant }), [variant])
   
@@ -80,7 +82,7 @@ const Alert = React.forwardRef<
   
   return (
     <AlertContext.Provider value={contextValue}>
-      <div
+      <aside
         ref={ref}
         className={cn(getAlertClasses(variant), className)}
         role="alert"