webui : [ChatFormActionAdd][a11y] fix accessibility issues in add menu trigger and items (#22736)

* fix tab order on attach button, and dont focus on disabled mennu item * add a11y tests
2026-05-16 12:00:46 +02:00
parent 366c5e2a3b
commit 1428004808
3 changed files with 114 additions and 41 deletions
@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatScreenForm from '$lib/components/app/chat/ChatScreen/ChatScreenForm.svelte';
+	import { expect, screen, waitFor } from 'storybook/test';
+	import { ATTACHMENT_TOOLTIP_TEXT } from '$lib/constants';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatScreen/ChatScreenForm/Accessibility',
+		component: ChatScreenForm,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	name="AddButtonSingleTabStop"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async ({ canvas, userEvent }) => {
+		const textarea = await canvas.findByRole('textbox');
+		await userEvent.clear(textarea);
+		await userEvent.type(textarea, 'What is the meaning of life?');
+
+		const trigger = await canvas.findByRole('button', { name: ATTACHMENT_TOOLTIP_TEXT });
+
+		trigger.focus();
+		await expect(trigger).toHaveFocus();
+
+		await userEvent.tab();
+
+		await expect(trigger).not.toHaveFocus();
+	}}
+/>
+
+<Story
+	name="AddDropdownFocusesFirstEnabled"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async ({ canvas, userEvent }) => {
+		const trigger = await canvas.findByRole('button', { name: ATTACHMENT_TOOLTIP_TEXT });
+
+		trigger.focus();
+		await userEvent.keyboard('{Enter}');
+		await screen.findByRole('menu');
+
+		await waitFor(() => {
+			expect(document.activeElement).toHaveTextContent('Text Files');
+		});
+	}}
+/>