fix(fuselage): add flex-wrap to CardControls to prevent overflow

packages/fuselage/src/components/Card/Card.styles.scss

@@ -84,3 +84,12 @@ $card-hero-padding: lengths.padding(28);
     align-items: center;
   }
 }
+
+.rcx-card__controls {
+    display: flex;
+    flex-direction: row; 
+    flex-wrap: wrap;    
+    gap: var(--rcx-card-controls-gap, 8px); 
+    align-items: center; 
+    justify-content: flex-start;
+}

packages/fuselage/src/components/Message/Message.spec.tsx

@@ -1,13 +1,40 @@
 import { composeStories } from '@storybook/react-webpack5';
-
-import { render } from '../../testing';
-
+import { render, screen } from '../../testing';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import * as stories from './Messages.stories';
+import React from 'react';
+
+expect.extend(toHaveNoViolations);
 
 const { Default } = composeStories(stories);
 
 describe('[Message Component]', () => {
   it('renders without crashing', () => {
     render(<Default />);
   });
-});
+
+  it('should have no accessibility violations', async () => {
+    const { container } = render(<Default />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have role="article" for accessibility', () => {
+    render(<Default />);
+    // Since our refactor added role='article' to the root div
+    expect(screen.getAllByRole('article')[0]).toBeInTheDocument();
+  });
+
+  it('should be focusable when it is a clickable message', () => {
+    // Testing the tabIndex logic we added to Message.tsx
+    const { container } = render(<Default clickable />);
+    const messageElement = container.querySelector('.rcx-message');
+    expect(messageElement).toHaveAttribute('tabIndex', '0');
+  });
+
+  it('should communicate selection state via aria-selected', () => {
+    const { container } = render(<Default isSelected />);
+    const messageElement = container.querySelector('.rcx-message');
+    expect(messageElement).toHaveAttribute('aria-selected', 'true');
+  });
+});