`;
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/stories/upload-artifact.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/stories/upload-artifact.stories.ts
index 70573cdef77..108d3956af6 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/stories/upload-artifact.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/stories/upload-artifact.stories.ts
@@ -162,13 +162,27 @@ export const Card: Story = {
};
/**
- * Media type uses a larger preview region without title and subtitle text.
+ * Media type uses a square preview region. Optional badge text identifies document types such as PDF.
*/
export const Media: Story = {
render: () => html`
-
+
+
+
+
+
+
+
+
+
+
+ Launch brief budget
+ Excel
+
+
+
+ FY26Q1 Competitor analysis
+ PDF
+
+
+ Can you help me create a 45-minute presentation, with animations, for
+ an executive update?
+
+
`,
parameters: { 'section-order': 1 },
tags: ['options'],
};
-// ────────────────────────────────
-// ACCESSIBILITY STORY
-// ────────────────────────────────
+export const OverflowIndicator: Story = {
+ render: () => html`
+
+
+
+
+
+
+
+
+
+
+
-/**
- * ### Features
- *
- * The `` element implements the following accessibility features:
- *
- * #### Semantic structure
- *
- * - The bubble is rendered as a `
` acting as a visual container
- * - `type="copy"` uses the default slot for message text
- * - `type="card"` and `type="media"` use named slots for thumbnail, title, and subtitle
- *
- * ### Best practices
- *
- * - Ensure message text is descriptive and self-contained
- * - For card and media attachments, ensure titles/subtitles and `aria-label`/`alt` text are present for previews
- */
-export const Accessibility: Story = {
- args: {
- type: 'copy',
- 'default-slot':
- 'Can you help me create a 45-minute presentation, with animations, for an executive update?',
- },
+
+
+ Launch brief budget
+ Excel
+
+
+
+ FY26Q1 Competitor analysis
+ PDF
+
+
+ Can you help me create a 45-minute presentation, with animations, for an
+ executive update?
+
+ `,
+ decorators: [withUserTurn],
+ tags: ['states'],
+};
+
+@customElement('swc-user-message-overflow-demo')
+class UserMessageOverflowDemo extends LitElement {
+ @state()
+ private open = false;
+
+ protected override createRenderRoot(): this {
+ return this;
+ }
+
+ private _openOverlay(): void {
+ this.open = true;
+ }
+
+ private _closeOverlay(): void {
+ this.open = false;
+ }
+
+ public override render() {
+ return html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Launch brief budget
+ Excel
+
+
+
+ FY26Q1 Competitor analysis
+ PDF
+
+ Can you help me create a 45-minute presentation, with animations,
+ for an executive update?
+
+
+
+ ${this.open
+ ? html`
+
+ `;
+ }
+}
+
+void UserMessageOverflowDemo;
+
+export const ViewAllOverlay: Story = {
+ render: () => html`
+
+ `,
+ tags: ['states'],
+};
+
+export const MediaGrid: Story = {
+ render: () => html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Launch brief budget
+ Excel
+
+
+
+ FY26Q1 Competitor analysis
+ PDF
+
+
+ Can you help me create a 45-minute presentation, with animations, for an
+ executive update?
+
+ `,
decorators: [withUserTurn],
- tags: ['a11y'],
+ tags: ['states'],
};
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.a11y.spec.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.a11y.spec.ts
index e96fa10ed77..472863bbcc1 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.a11y.spec.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.a11y.spec.ts
@@ -1,28 +1,11 @@
/**
* Copyright 2026 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
*/
import { expect, test } from '@playwright/test';
import { gotoStory } from '../../../../utils/a11y-helpers.js';
-/**
- * Accessibility tests for UserMessage pattern (2nd Generation)
- *
- * ARIA snapshot tests validate the accessibility tree structure.
- * aXe WCAG compliance and color contrast validation are run via
- * test-storybook (see .storybook/test-runner.ts). Both are included
- * in the `test:a11y` command.
- */
-
test.describe('UserMessage - ARIA Snapshots', () => {
test('should have correct accessibility tree for default user message', async ({
page,
@@ -37,31 +20,21 @@ test.describe('UserMessage - ARIA Snapshots', () => {
`);
});
- test('should expose accessible card attachment content', async ({ page }) => {
+ test('should expose mixed artifacts and text content', async ({ page }) => {
const root = await gotoStory(
page,
'patterns-conversational-ai-user-message--content',
'swc-user-message'
);
- const cardMessage = root.locator('swc-user-message').nth(1);
- await expect(cardMessage).toMatchAriaSnapshot(`
- - img "File"
- - text: Hilton commercial assets 2026
- `);
- });
-
- test('should expose accessible media attachment content', async ({
- page,
- }) => {
- const root = await gotoStory(
- page,
- 'patterns-conversational-ai-user-message--content',
- 'swc-user-message'
- );
- const mediaMessage = root.locator('swc-user-message').nth(2);
- await expect(mediaMessage).toMatchAriaSnapshot(`
- - img "Campaign preview"
- - text: Hilton commercial assets 2026
+ await expect(root).toMatchAriaSnapshot(`
+ - img "Campaign still"
+ - img "Storyboard frame"
+ - img "Moodboard"
+ - img "Excel"
+ - text: Launch brief budget Excel
+ - img "PDF"
+ - text: FY26Q1 Competitor analysis PDF
+ - text: /Can you help me/
`);
});
});
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.test.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.test.ts
index 7ab95ecfb2e..9843779bca6 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.test.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.test.ts
@@ -3,21 +3,14 @@
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
*/
-import { html } from 'lit';
import { expect } from '@storybook/test';
import type { Meta, StoryObj as Story } from '@storybook/web-components';
-import '../../conversation-turn/index.js';
import '../index.js';
-import { getComponent, getComponents } from '../../../../utils/test-utils.js';
+import { getComponent } from '../../../../utils/test-utils.js';
import { meta, Overview } from '../stories/user-message.stories.js';
import { UserMessage } from '../UserMessage.js';
@@ -39,196 +32,10 @@ export const OverviewTest: Story = {
'swc-user-message'
);
- await step('uses copy type by default', async () => {
- expect(el.type).toBe('copy');
- expect(el.getAttribute('type')).toBe('copy');
+ await step('renders composed user-message shell', async () => {
+ const root = el.shadowRoot;
+ expect(root?.querySelector('.swc-UserMessage')).toBeTruthy();
+ expect(root?.querySelector('.swc-UserMessage-text-bubble')).toBeTruthy();
});
},
};
-
-export const TypeAndSlotTest: Story = {
- ...Overview,
- play: async ({ canvasElement, step }) => {
- const el = await getComponent(
- canvasElement,
- 'swc-user-message'
- );
-
- await step(
- 'type reflects to the host and drives card structure',
- async () => {
- el.type = 'card';
- el.innerHTML = `
-
- Brand guidelines
- PDF
- `;
- await el.updateComplete;
-
- const title = el.shadowRoot?.querySelector('.swc-UserMessage-title');
- const subtitle = el.shadowRoot?.querySelector(
- '.swc-UserMessage-subtitle'
- );
- expect(el.getAttribute('type')).toBe('card');
- expect(title).toBeTruthy();
- expect(subtitle).toBeTruthy();
- }
- );
-
- await step(
- 'media type renders the media attachment container',
- async () => {
- el.type = 'media';
- el.innerHTML = `
-
- Preview image
- PNG
- `;
- await el.updateComplete;
-
- const attachment = el.shadowRoot?.querySelector(
- '.swc-UserMessage-attachment--media'
- );
- expect(el.getAttribute('type')).toBe('media');
- expect(attachment).toBeTruthy();
- }
- );
-
- await step('copy type uses the default slot text path', async () => {
- el.type = 'copy';
- el.innerHTML = `Can you summarize this document?`;
- await el.updateComplete;
-
- const textSlot =
- el.shadowRoot?.querySelector('slot:not([name])');
- const assignedText = textSlot
- ?.assignedNodes({ flatten: true })
- .map((node) => node.textContent ?? '')
- .join('')
- .trim();
-
- expect(el.getAttribute('type')).toBe('copy');
- expect(assignedText).toBe('Can you summarize this document?');
- });
- },
-};
-
-export const DefaultSlotHiddenForAttachmentTypesTest: Story = {
- name: 'Default slot not used for card and media',
- ...Overview,
- play: async ({ canvasElement, step }) => {
- const el = await getComponent(
- canvasElement,
- 'swc-user-message'
- );
-
- const attachmentMarkup = (label: string) => `
-
${label}
-
- T
- S
- `;
-
- for (const type of ['card', 'media'] as const) {
- await step(
- `type="${type}": no unnamed slot; default-slot children are not shown`,
- async () => {
- el.type = type;
- el.innerHTML = attachmentMarkup(
- 'Default copy that must not appear in the bubble for attachment types.'
- );
- await el.updateComplete;
-
- expect(el.shadowRoot?.querySelector('slot:not([name])')).toBeNull();
-
- const leaked = el.querySelector(
- '[data-test-default-slotted]'
- );
- expect(leaked).toBeTruthy();
- const { width, height } = leaked!.getBoundingClientRect();
- expect(width * height).toBe(0);
- }
- );
- }
-
- await step(
- 'type="copy" keeps an unnamed (default) slot in the shadow root',
- async () => {
- el.type = 'copy';
- el.innerHTML = 'Visible copy text';
- await el.updateComplete;
-
- const defaultSlot =
- el.shadowRoot?.querySelector('slot:not([name])');
- expect(defaultSlot).toBeTruthy();
- }
- );
- },
-};
-
-const longSpacedCopy =
- 'This is a deliberately long line of user copy that should wrap within a narrow column without horizontal overflow. '.repeat(
- 3
- );
-
-const longUnbrokenFileName = `${'VeryLongAttachmentNamePortion'.repeat(12)}.pdf`;
-
-/**
- * Exercises long copy in a tight column and a long unbroken card title
- * (ellipsis) so the bubble does not grow past its layout width.
- */
-export const LongTextWrapTest: Story = {
- name: 'Long text wrap and containment',
- render: () => html`
-