Additional feedback addressed

docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// .storybook/main.js
+// .storybook/main.js|ts
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

docs/snippets/common/storybook-main-enable-interactive-debugger.ts.mdx

@@ -1,19 +0,0 @@
-```ts
-// .storybook/main.ts
-
-// Imports Storybook's configuration API
-import type { StorybookConfig } from '@storybook/core-common';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-interactions', // 👈 Addon is registered here
-  ],
-  features: {
-    interactionsDebugger: true, // 👈 Enable playback controls
-  },
-};
-
-module.exports = config;
-```

docs/snippets/common/storybook-test-runner-a11y-config.js.mdx

@@ -8,11 +8,16 @@ const { injectAxe, checkA11y } = require('axe-playwright');
 * to learn more about the test-runner hooks API.
 */
 module.exports = {
-  async preRender(page, context) {
+  async preRender(page) {
     await injectAxe(page);
   },
-  async postRender(page, context) {
-    await checkA11y(page, context.title.includes('Page') ? undefined : '#root');
+  async postRender(page) {
+    await checkA11y(page, '#root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
   },
 };
 ```

docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx

@@ -10,11 +10,16 @@ import type { TestRunnerConfig } from '@storybook/test-runner';
 * to learn more about the test-runner hooks API.
 */
 const a11yConfig: TestRunnerConfig = {
-  async preRender(page, context) {
+  async preRender(page) {
     await injectAxe(page);
   },
-  async postRender(page, context) {
-    await checkA11y(page, context.title.includes('Page') ? undefined : '#root');
+  async postRender(page) {
+    await checkA11y(page, '#root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
   },
 };
 

docs/writing-tests/accessibility-testing.md

@@ -198,10 +198,10 @@ Add a new [configuration file](./test-runner.md#test-hook-api-experimental) insi
 
 </div>
 
-By default, Axe assumes that you're testing a page and checks whether you've specified an `<h1>` and `<main>`. However, not all of your stories are for page-level components. That's why we use the `context.title.includes('Page')` check to [enable/disable](https://github.com/abhinaba-ghosh/axe-playwright#context-optional) Axe's page-level rules.
-
 When you execute the test runner (for example, with `yarn test-storybook`), it will run the accessibility audit and any [interaction tests](./interaction-testing.md) you might have configured for each component story.
 
+It starts checking for issues by traversing the DOM tree starting from the story's root element and generates a detailed report based on the issues it encountered.
+
 ![Accessibility testing with the test runner](./test-runner-a11y-optimized.png)
 
 ---

docs/writing-tests/interaction-testing.md

@@ -12,7 +12,7 @@ In Storybook, this familiar workflow happens in your browser. That makes it easi
 
 ## How does component testing in Storybook work?
 
-You start by writing a [**story**](../writing-stories/introduction.md) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the Storybook **test-runner** to verify the DOM structure. Additionally, you can automate test execution via the [command line](./test-runner.md#cli-options) or in your [CI environment](./test-runner.md#set-up-ci-to-run-tests).
+You start by writing a [**story**](../writing-stories/introduction.md) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the **test-runner** to confirm that the component renders correctly and that your interaction tests with the **play** function pass. Additionally, you can automate test execution via the [command line](./test-runner.md#cli-options) or in your [CI environment](./test-runner.md#set-up-ci-to-run-tests).
 
 - The [`play`](../writing-stories/play-function.md) function is a small snippet of code that runs after a story finishes rendering. You can use this to test user workflows.
 - The test is written using Storybook-instrumented versions of [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/).
@@ -43,7 +43,6 @@ Update your Storybook configuration (in `.storybook/main.js|ts`) to include the
 <CodeSnippets
   paths={[
     'common/storybook-main-enable-interactive-debugger.js.mdx',
-    'common/storybook-main-enable-interactive-debugger.ts.mdx',
   ]}
 />
 

docs/writing-tests/test-runner.md

@@ -293,6 +293,10 @@ It might be that Playwright couldn't handle testing the number of stories you ha
 }
 ```
 
+### The error output in the CLI is too short
+
+By default, the test runner truncates error outputs at 1000 characters, and you can check the full output directly in Storybook in the browser. However, if you want to change that limit, you can do so by setting the `DEBUG_PRINT_LIMIT` environment variable to a number of your choosing, for example, `DEBUG_PRINT_LIMIT=5000 yarn test-storybook`.
+
 ### Run the test runner in other CI environments
 
 As the test runner is based on Playwright, you might need to use specific docker images or other configurations depending on your CI setup. In that case, you can refer to the [Playwright CI docs](https://playwright.dev/docs/ci) for more information.