docs: add story for profile picture case

I also check for accessibility now.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

.storybook/main.ts

@@ -8,10 +8,11 @@ const config: StorybookConfig = {
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
-		'@storybook/addon-interactions'
+		'@storybook/addon-interactions',
+		'@storybook/addon-a11y'
 	],
 	core: {
-		builder: '@storybook/builder-vite'
+		disableTelemetry: true
 	},
 	framework: {
 		name: '@storybook/sveltekit',

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/svelte';
+import '../src/app.postcss';
 
 const preview: Preview = {
 	parameters: {

package-lock.json

@@ -15,6 +15,7 @@
 				"@playwright/test": "1.44.1",
 				"@skeletonlabs/skeleton": "2.10.1",
 				"@skeletonlabs/tw-plugin": "0.4.0",
+				"@storybook/addon-a11y": "7.6.13",
 				"@storybook/addon-essentials": "7.6.13",
 				"@storybook/addon-interactions": "7.6.13",
 				"@storybook/addon-links": "7.6.13",
@@ -4201,6 +4202,20 @@
 				"tailwindcss": ">=3.0.0"
 			}
 		},
+		"node_modules/@storybook/addon-a11y": {
+			"version": "7.6.13",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.13.tgz",
+			"integrity": "sha512-6Qf+tzt1MXXHDUpSVz3P+e7j5HkilXG1VI0UDWPsN9ztjVkK72PIE9LcHSt/ojcrHAzhNlpZaWf7CblciRs2ag==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/addon-highlight": "7.6.13",
+				"axe-core": "^4.2.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
 		"node_modules/@storybook/addon-actions": {
 			"version": "7.6.13",
 			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.13.tgz",
@@ -7009,6 +7024,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/axe-core": {
+			"version": "4.9.1",
+			"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
+			"integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/axios": {
 			"version": "1.7.2",
 			"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",

package.json

@@ -17,8 +17,8 @@
 		"test:unit:coverage": "vitest --coverage",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"storybook": "storybook dev -p 6006",
+		"storybook": "STORYBOOK_DISABLE_TELEMETRY=1 storybook dev -p 6006",
-		"build-storybook": "storybook build",
+		"build-storybook": "STORYBOOK_DISABLE_TELEMETRY=1 storybook build",
 		"deploy-storybook": "gh-pages -d storybook-static -b pages -r git@codeberg.org:Anvil/Anvil.git",
 		"predeploy-storybook": "npm run build-storybook"
 	},
@@ -26,6 +26,7 @@
 		"@playwright/test": "1.44.1",
 		"@skeletonlabs/skeleton": "2.10.1",
 		"@skeletonlabs/tw-plugin": "0.4.0",
+		"@storybook/addon-a11y": "7.6.13",
 		"@storybook/addon-essentials": "7.6.13",
 		"@storybook/addon-interactions": "7.6.13",
 		"@storybook/addon-links": "7.6.13",

stories/atoms/Avatar.stories.ts

@@ -7,8 +7,14 @@ const meta = {
 	component: Avatar,
 	tags: ['autodocs'],
 	argTypes: {
-		avatar: { control: 'text' },
+		avatar: {
-		displayName: { control: 'text' }
+			control: 'text',
+			description: 'An URL to the image'
+		},
+		displayName: {
+			control: 'text',
+			description: 'If no image is provided, derive initials'
+		}
 	}
 } satisfies Meta<Avatar>;
 
@@ -17,6 +23,15 @@ type Story = StoryObj<typeof meta>;
 
 export const Plain: Story = {
 	args: {
+		avatar: '',
 		displayName: 'Jane Doe'
 	}
 };
+
+export const ProfilePicture: Story = {
+	args: {
+		...Plain.args,
+		avatar:
+			'https://codeberg.org/avatars/a9defc12e1826458289a39e3a66792f0adef29a73fb79b71c66560b7d80aac8f?size=280'
+	}
+};