Address feedback

docs/_snippets/addon-a11y-meta-tag.md

@@ -0,0 +1,236 @@
+```ts filename="Button.stories.ts" renderer="angular" language="ts"
+import type { Meta } from '@storybook/angular/';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="html" language="js"
+export default {
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```js filename="Button.stories.js|jsx" renderer="common" language="js"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js"
+import Button from './Button.vue';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js"
+export default {
+  component: 'demo-button',
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-button',
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```

docs/_snippets/vitest-plugin-install-coverage-support-packages.md

@@ -0,0 +1,23 @@
+```shell renderer="common" language="js" packageManager="npm"
+# For v8
+npm install --save-dev @vitest/coverage-v8
+
+# For istanbul
+npm install --save-dev @vitest/coverage-istanbul
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+# For v8
+pnpm add --save-dev @vitest/coverage-v8
+
+# For istanbul
+pnpm add --save-dev @vitest/coverage-istanbul
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+# For v8
+yarn add --dev @vitest/coverage-v8
+
+# For istanbul
+yarn add --dev @vitest/coverage-istanbul
+```

docs/_snippets/vitest-plugin-run-with-coverage.md

@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npm run test-storybook -- --coverage
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm run test-storybook --coverage
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn test-storybook --coverage
+```

docs/writing-tests/accessibility-testing.mdx

@@ -155,20 +155,11 @@ You can use tags to progressively work toward a more accessible UI by enabling a
 
 1. Pick a good starting point (we recommend something like Button, for its simplicity and likelihood of being used within other components) and re-include it in the accessibility tests.
 
-   ```ts title="Button.stories.ts"
-   // Replace your-renderer with the renderer you are using (e.g., react, vue3)
-   import { Meta } from '@storybook/your-renderer';
+   {/* prettier-ignore-start */}
 
-   import { Button } from './Button';
-
-   const meta = {
-     component: Button,
-     // 👇 Re-apply the a11ytest tag for this component's stories
-     tags: ['a11ytest'],
-   };
-
-   export default preview;
-   ```
+   <CodeSnippets path="addon-a11y-meta-tag.md" />
+
+   {/* prettier-ignore-end */}
 
 1. Pick another component and repeat the process until you've covered all your components and you're an accessibility hero!