Release: Prerelease 10.3.0-alpha.16

.nvmrc

@@ -1,2 +1,2 @@
-22.21.1
+22.22.1
 

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 10.2.17
+
+- Next.js: Add support for v16.2 - [#34046](https://github.com/storybookjs/storybook/pull/34046), thanks @valentinpalkovic!
+
 ## 10.2.16
 
 - CSF-Factories: Fix ConfigFile parser false warning on `definePreview({...}).type<T>()` export default - [#33885](https://github.com/storybookjs/storybook/pull/33885), thanks @copilot-swe-agent!

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 10.3.0-alpha.16
+
+- A11y: Underline MDX links for WCAG SC 1.4.1 compliance - [#33139](https://github.com/storybookjs/storybook/pull/33139), thanks @NikhilChowdhury27!
+- Angular: Add moduleResolution: bundler to tsconfig - [#34085](https://github.com/storybookjs/storybook/pull/34085), thanks @valentinpalkovic!
+- Angular: only load webpack dependencies on demand - [#34043](https://github.com/storybookjs/storybook/pull/34043), thanks @sod!
+- CLI: Show multiple favicons warning as debug message - [#34069](https://github.com/storybookjs/storybook/pull/34069), thanks @remino!
+- Core: Fix error reporting in ManagerErrorBoundary - [#33915](https://github.com/storybookjs/storybook/pull/33915), thanks @ghengeveld!
+- Vite: Support Vite 8 - [#33788](https://github.com/storybookjs/storybook/pull/33788), thanks @valentinpalkovic!
+
 ## 10.3.0-alpha.15
 
 - Actions: Add expandLevel parameter to configure tree depth - [#33977](https://github.com/storybookjs/storybook/pull/33977), thanks @mixelburg!

code/addons/docs/src/blocks/components/DocsPage.test.tsx

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import React from 'react';
+
+import { ThemeProvider, convert, themes } from 'storybook/theming';
+
+import { DocsContent } from './DocsPage';
+
+function ThemedDocsContent({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <DocsContent>{children}</DocsContent>
+    </ThemeProvider>
+  );
+}
+
+describe('DocsContent', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('accessibility', () => {
+    it('should render links with underline text decoration for accessibility', () => {
+      const { container } = render(
+        <ThemedDocsContent>
+          <p>
+            This is a paragraph with a <a href="https://example.com">link</a> inside.
+          </p>
+        </ThemedDocsContent>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render links with underline in dark theme', () => {
+      const { container } = render(
+        <ThemeProvider theme={convert(themes.dark)}>
+          <DocsContent>
+            <p>
+              This is a paragraph with a <a href="https://example.com">link</a> inside.
+            </p>
+          </DocsContent>
+        </ThemeProvider>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render multiple links with underlines in text blocks', () => {
+      const { container } = render(
+        <ThemedDocsContent>
+          <div>
+            <p>
+              Check out <a href="https://example.com">this link</a> and also{' '}
+              <a href="https://another.com">this other link</a>.
+            </p>
+            <p>
+              Here is <a href="https://third.com">a third link</a> in another paragraph.
+            </p>
+          </div>
+        </ThemedDocsContent>
+      );
+
+      const links = container.querySelectorAll('a');
+      expect(links).toHaveLength(3);
+
+      links.forEach((link) => {
+        const styles = window.getComputedStyle(link);
+        expect(styles.textDecoration).toContain('underline');
+      });
+    });
+
+    it('should not underline anchor position markers (a.anchor)', () => {
+      const { container } = render(
+        <ThemedDocsContent>
+          <h2>
+            <a className="anchor" href="#heading">
+              Heading
+            </a>
+          </h2>
+        </ThemedDocsContent>
+      );
+
+      const anchor = container.querySelector('a.anchor');
+      expect(anchor).toBeTruthy();
+
+      const styles = window.getComputedStyle(anchor!);
+      expect(styles.textDecoration).not.toContain('underline');
+    });
+  });
+});

code/addons/docs/src/blocks/components/DocsPage.tsx

@@ -114,7 +114,10 @@ export const DocsContent = styled.div(({ theme }) => {
       lineHeight: '24px',
 
       color: theme.color.secondary,
-      textDecoration: 'none',
+      // Ensure WCAG Level A compliance (SC 1.4.1), see https://www.w3.org/WAI/WCAG22/Techniques/failures/F73
+      textDecoration: 'underline',
+      textDecorationThickness: '0.03125rem',
+      textUnderlineOffset: '0.11em',
       '&.absent': {
         color: '#cc0000',
       },
@@ -127,6 +130,10 @@ export const DocsContent = styled.div(({ theme }) => {
         top: 0,
         left: 0,
         bottom: 0,
+        textDecoration: 'none',
+      },
+      '&.anchor:hover, &.anchor:focus': {
+        textDecoration: 'underline',
       },
     },
     [toGlobalSelector('blockquote')]: {

code/builders/builder-vite/package.json

@@ -63,7 +63,7 @@
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "publishConfig": {
     "access": "public"

code/builders/builder-vite/src/build.ts

@@ -7,6 +7,7 @@ import type { InlineConfig } from 'vite';
 import { createViteLogger } from './logger';
 import type { WebpackStatsPlugin } from './plugins';
 import { hasVitePlugins } from './utils/has-vite-plugins';
+import { bundlerOptionsKey } from './utils/vite-features';
 import { withoutVitePlugins } from './utils/without-vite-plugins';
 import { commonConfig } from './vite-config';
 
@@ -19,11 +20,13 @@ export async function build(options: Options) {
   const { presets } = options;
 
   const config = await commonConfig(options, 'build');
+
   config.build = mergeConfig(config, {
     build: {
       outDir: options.outputDir,
       emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
-      rollupOptions: {
+      // TODO: Remove bundlerOptionsKey and use 'rolldownOptions' directly once support for Vite < 8 is dropped
+      [bundlerOptionsKey]: {
         external: [/\.\/sb-common-assets\/.*\.woff2/],
       },
       ...(options.test

code/builders/builder-vite/src/plugins/code-generator-plugin.ts

@@ -11,6 +11,7 @@ import { generateImportFnScriptCode } from '../codegen-importfn-script';
 import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
 import { generateAddonSetupCode } from '../codegen-set-addon-channel';
 import { transformIframeHtml } from '../transform-iframe-html';
+import { bundlerOptionsKey, ensureRolldownOptions } from '../utils/vite-features';
 import {
   SB_VIRTUAL_FILES,
   SB_VIRTUAL_FILE_IDS,
@@ -45,10 +46,17 @@ export function codeGeneratorPlugin(options: Options) {
         if (!config.build) {
           config.build = {};
         }
-        config.build.rollupOptions = {
-          ...config.build.rollupOptions,
+        // TODO: Remove bundlerOptionsKey and use 'rolldownOptions' directly once support for Vite < 8 is dropped
+        const build = config.build as Record<string, any>;
+
+        // shared options between rollup/rolldown
+        build[bundlerOptionsKey] = {
+          ...build[bundlerOptionsKey],
           input: iframePath,
         };
+
+        // necessary rolldown specific overrides
+        ensureRolldownOptions(config);
       }
     },
     configResolved(config) {

code/builders/builder-vite/src/utils/vite-features.ts

@@ -0,0 +1,30 @@
+import type { UserConfig } from 'vite';
+import { version } from 'vite';
+
+// TODO: Remove once support for Vite < 8 is dropped
+const shouldUseRolldownOptions = () => {
+  try {
+    return Number(version.split('.')[0]) >= 8;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Returns the correct bundler options key based on the installed Vite version. Vite 8 renamed
+ * `build.rollupOptions` to `build.rolldownOptions`.
+ */
+// TODO: Remove once support for Vite < 8 is dropped, and use 'rolldownOptions' directly
+export const bundlerOptionsKey = shouldUseRolldownOptions() ? 'rolldownOptions' : 'rollupOptions';
+
+export function ensureRolldownOptions(config: UserConfig) {
+  if (!shouldUseRolldownOptions()) {
+    return;
+  }
+
+  config.build ??= {};
+  // @ts-expect-error - rolldownOptions will only exist with Vite 8+
+  const rolldown = (config.build.rolldownOptions ??= {});
+  const output = (rolldown.output ??= {});
+  output.strictExecutionOrder = true;
+}

code/core/src/components/components/typography/DocumentWrapper.test.tsx

@@ -0,0 +1,83 @@
+// @vitest-environment happy-dom
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import React from 'react';
+
+import { ThemeProvider, convert, themes } from 'storybook/theming';
+
+import { DocumentWrapper } from './DocumentWrapper';
+
+function ThemedDocumentWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <DocumentWrapper>{children}</DocumentWrapper>
+    </ThemeProvider>
+  );
+}
+
+describe('DocumentWrapper', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('accessibility', () => {
+    it('should render links with underline text decoration for accessibility', () => {
+      const { container } = render(
+        <ThemedDocumentWrapper>
+          <p>
+            This is a paragraph with a <a href="https://example.com">link</a> inside.
+          </p>
+        </ThemedDocumentWrapper>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render links with underline in dark theme', () => {
+      const { container } = render(
+        <ThemeProvider theme={convert(themes.dark)}>
+          <DocumentWrapper>
+            <p>
+              This is a paragraph with a <a href="https://example.com">link</a> inside.
+            </p>
+          </DocumentWrapper>
+        </ThemeProvider>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render multiple links with underlines in text blocks', () => {
+      const { container } = render(
+        <ThemedDocumentWrapper>
+          <div>
+            <p>
+              Check out <a href="https://example.com">this link</a> and also{' '}
+              <a href="https://another.com">this other link</a>.
+            </p>
+            <p>
+              Here is <a href="https://third.com">a third link</a> in another paragraph.
+            </p>
+          </div>
+        </ThemedDocumentWrapper>
+      );
+
+      const links = container.querySelectorAll('a');
+      expect(links).toHaveLength(3);
+
+      links.forEach((link) => {
+        const styles = window.getComputedStyle(link);
+        expect(styles.textDecoration).toContain('underline');
+      });
+    });
+  });
+});

code/core/src/components/components/typography/DocumentWrapper.tsx

@@ -64,7 +64,10 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
   },
   a: {
     color: theme.color.secondary,
-    textDecoration: 'none',
+    // Ensure WCAG Level A compliance (SC 1.4.1), see https://www.w3.org/WAI/WCAG22/Techniques/failures/F73
+    textDecoration: 'underline',
+    textDecorationThickness: '0.03125rem',
+    textUnderlineOffset: '0.11em',
   },
   'a.absent': {
     color: '#cc0000',
@@ -78,6 +81,10 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
     top: 0,
     left: 0,
     bottom: 0,
+    textDecoration: 'none',
+  },
+  '&.anchor:hover, &.anchor:focus': {
+    textDecoration: 'underline',
   },
   'h1, h2, h3, h4, h5, h6': {
     margin: '20px 0 10px',