A11y: Handle lang attribute throughout preview#35321
Open
Sidnioulz wants to merge 23 commits into
Open
Conversation
Removes the StorybookConfig htmlLang option and its build-time template plumbing (vite/webpack preview templates, common-preset, config types, main-config docs). htmlLang becomes a runtime story parameter instead. Migrates the internal test value from main.ts to preview parameters. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… English Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sidnioulz
added
accessibility
ci:normal
Sidnioulz
added
a11y: aria
Sidnioulz
commented
Jun 29, 2026
Comment on lines
+55
to
+76
| ### `htmlLang` | ||
|
|
||
| Type: `string` | ||
|
|
||
| Default: `'en'` | ||
|
|
||
| A [BCP-47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag) (e.g. `'ja'`, `'de'`, `'fr-CH'`) describing the language of the **rendered story UI**. In story view it sets the `lang` attribute on the preview's `<html>` element; in docs view it sets `lang` on each embedded story canvas. Inherited project → meta → story. | ||
|
|
||
| Use this to language the components you render — for example, a German story added for copy-length validation inside an otherwise English design system. | ||
|
|
||
| Storybook's own interface (the manager UI and docs chrome such as toolbars and ArgTypes headers) always reports as English and is unaffected by this parameter. | ||
|
|
||
| ### `docs.lang` | ||
|
|
||
| Type: `string` | ||
|
|
||
| Default: `'en'` | ||
|
|
||
| A BCP-47 language tag describing the language of the **docs prose** that Storybook renders — component and story descriptions, ArgTypes description cells, and free-form MDX prose. Resolved project → meta for page-level content and project → meta → story for per-story content. | ||
|
|
||
| This is independent of [`htmlLang`](#htmllang): the language you _document_ in can differ from the language your stories _render_ in. Storybook chrome (toolbars, ArgTypes column headers, anchor links) stays English regardless. | ||
|
|
Contributor
Author
There was a problem hiding this comment.
@jonniebigodes this is AI generated, full disclosure.
Could you please do a pass over the copy? I think it's well explained but likely not matching our doc style.
(I recreated the branch due to Chromatic ancestor issues)
9 tasks
Contributor
📝 WalkthroughWalkthroughAdds two new BCP-47 parameters — ChangesBCP-47 lang attribute support for stories and docs
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
✨ Finishing Touches📝 Generate docstrings
⚔️ Resolve merge conflicts
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (5)
code/addons/docs/src/blocks/blocks/DocsContainer.tsx (1)
13-13: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd the
.tsextension to this relative import.
./docsLangis a new relative TypeScript import, so it should be written with an explicit extension to match the repo rule. As per coding guidelines,**/*.{ts,tsx}: "Use explicit file extensions on relative imports and exports in TypeScript source (for example./foo.tsor./bar.tsx)."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/blocks/DocsContainer.tsx` at line 13, The relative import in DocsContainer should use an explicit TypeScript extension to match the repo rule. Update the import of resolveDocsLang in DocsContainer.tsx to reference the file with its .ts extension, keeping the same symbol and relative path otherwise.Source: Coding guidelines
code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.lang.test.tsx (2)
9-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd explicit extensions to these relative imports.
Repo rules require extensionful relative imports in TypeScript source, so these should be
./ArgRow.stories.tsxand./ArgsTable.tsx. As per coding guidelines, "**/*.{ts,tsx}: Use explicit file extensions on relative imports and exports in TypeScript source (for example./foo.tsor./bar.tsx)."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.lang.test.tsx` around lines 9 - 10, The relative imports in ArgsTable.lang.test.tsx use extensionless TypeScript paths, which violates the repo rule for explicit extensions. Update the import of ArgRow.stories and ArgsTable to reference their full TypeScript file names, using the same symbols ArgRow and ArgsTable so the test file resolves them via extensionful relative imports.Source: Coding guidelines
12-35: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMove this component coverage into a story
playtest instead of a new*.test.tsxfile.This file is asserting React component behavior/accessibility, which the repo wants in Storybook stories rather than standalone
*.test.tsxtests. Please add/update a story and put these assertions in aplayfunction, then verify it with the Storybook Vitest config. As per coding guidelines, "**/*.test.tsx: For React components, do not add*.test.tsxunit tests; behavior, accessibility, and interaction assertions should live in Storybook stories withplayfunctions." and "**/*.stories.tsx: When updating component stories, verifyplayassertions withvitest --config code/vitest.config.storybook.ts <story-file>."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.lang.test.tsx` around lines 12 - 35, This ArgsTable coverage should not live in a standalone .test.tsx file; move the English-lang assertions into the component’s Storybook story play function. Update the relevant ArgsTable story so it renders the same wrapped setup and uses play to assert the header and arg-name cell keep lang="en", referencing ArgsTable and the story export that exercises it. Then verify the story behavior with the Storybook Vitest config instead of adding/keeping the separate unit test.Source: Coding guidelines
code/addons/docs/src/blocks/blocks/Description.tsx (1)
7-13: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse explicit extensions for the new relative imports.
This block mixes
./use-service-docgen.ts/./use-service-story-docs.tswith extensionless imports like./DocsContext,./docsLang,./Markdown, and./useOf, which breaks the repo’s TS import convention. As per coding guidelines,**/*.{ts,tsx}: Use explicit file extensions on relative imports and exports in TypeScript source (for example./foo.tsor./bar.tsx).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/blocks/Description.tsx` around lines 7 - 13, Update the relative imports in Description.tsx to follow the repository’s TypeScript import convention by using explicit file extensions everywhere. The issue is that this block currently mixes extensionless imports like DocsContext, resolveDocsLang, Markdown, and useOf with explicit .ts imports; make all relative imports consistent by adding the proper extensions to each referenced module in this file.Source: Coding guidelines
code/addons/docs/src/blocks/blocks/docsLangProse.test.tsx (1)
31-58: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMove this coverage into Storybook
playtests instead of a*.test.tsxfile.This is a new React component behavior suite, but the repo’s test policy keeps those assertions in stories. As per coding guidelines,
**/*.test.tsx: For React components, do not add*.test.tsxunit tests; behavior, accessibility, and interaction assertions should live in Storybook stories withplayfunctions. As per coding guidelines,**/*.stories.tsx: When writing tests for components, add or update<Component>.stories.tsxand cover each behavior withplayfunctions usingexpect,userEvent, andwithinfromstorybook/test.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/blocks/docsLangProse.test.tsx` around lines 31 - 58, Move the `Title` and `Subtitle` language assertions out of `docsLangProse.test.tsx` and into the corresponding Storybook story file for these components. Update the relevant stories to cover the `docs.lang` behavior with `play` functions using `expect`/`within` (and `userEvent` if needed), and remove the React component unit test file so the coverage follows the repo’s Storybook test policy.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@code/addons/docs/src/blocks/blocks/docsLang.test.ts`:
- Line 3: The relative import in docsLang.test.ts should use an explicit
TypeScript extension to match the repo import rule. Update the import of
resolveDocsLang from ./docsLang to reference ./docsLang.ts so the test file
follows the same explicit-extension convention used across TypeScript sources.
In `@code/addons/docs/src/blocks/blocks/docsLang.ts`:
- Around line 10-11: The resolveDocsLang helper currently uses nullish
coalescing, which preserves empty docs.lang strings instead of falling back.
Update resolveDocsLang to treat blank or whitespace-only parameters?.docs?.lang
and projectParameters?.docs?.lang as unset, so it falls through to the project
value or the 'en' default. Keep the change localized to resolveDocsLang and
preserve the existing fallback order.
In `@code/addons/docs/src/blocks/blocks/Subtitle.tsx`:
- Around line 51-54: The Subtitle lang lookup is missing the project-level docs
language fallback, so update the `Subtitle` component to resolve the language
using both `preparedMeta?.parameters` and the project annotations’ docs
parameters. Mirror the `Title` fix by passing
`projectAnnotations.parameters.docs.lang` (or the equivalent merged docs
parameters source) into `resolveDocsLang` so a global docs language is respected
when no local override is present.
In `@code/addons/docs/src/blocks/blocks/Title.tsx`:
- Around line 53-56: The Title block is not passing the project-level docs
language into resolveDocsLang, so it can fall back to the default language
instead of the globally configured one. Update the Title component to thread the
docs lang from the project context into resolveDocsLang alongside
preparedMeta?.parameters, matching the pattern used by Description and ensuring
the rendered PureTitle gets the correct lang value.
In `@code/addons/docs/src/blocks/components/DocsPage.test.tsx`:
- Around line 83-94: Move this assertion out of the DocsContent unit test
because it bypasses DocsPageWrapper and does not validate the changed forwarding
behavior in DocsPage.tsx. Add the lang forwarding check to the appropriate
Storybook story using a play function that renders the wrapper and asserts the
content region receives the lang attribute, and remove the *.test.tsx component
test for this case.
In `@code/addons/docs/src/blocks/components/Preview.tsx`:
- Around line 234-238: The `ActionBar` in `Preview` is applying `lang="en"` to
both Storybook-owned controls and caller-provided `additionalActionItems`, which
can incorrectly force user content to be announced as English. Move the English
override off the `ActionBar` container and apply it only to the built-in
buttons/actions rendered by `Preview`, keeping `additionalActionItems` outside
that language scope.
In `@code/core/src/types/modules/csf.ts`:
- Around line 83-90: Update the JSDoc for htmlLang in csf.ts to match actual
behavior: document that WebView.prepareForStory() applies the value to the story
root element, not the document <html> element, and remove the claim that story
view sets <html lang> or that the default is always 'en'. Keep the inheritance
note (project → meta → story) and align the description with the tests around
document.documentElement.lang remaining unchanged.
---
Nitpick comments:
In `@code/addons/docs/src/blocks/blocks/Description.tsx`:
- Around line 7-13: Update the relative imports in Description.tsx to follow the
repository’s TypeScript import convention by using explicit file extensions
everywhere. The issue is that this block currently mixes extensionless imports
like DocsContext, resolveDocsLang, Markdown, and useOf with explicit .ts
imports; make all relative imports consistent by adding the proper extensions to
each referenced module in this file.
In `@code/addons/docs/src/blocks/blocks/DocsContainer.tsx`:
- Line 13: The relative import in DocsContainer should use an explicit
TypeScript extension to match the repo rule. Update the import of
resolveDocsLang in DocsContainer.tsx to reference the file with its .ts
extension, keeping the same symbol and relative path otherwise.
In `@code/addons/docs/src/blocks/blocks/docsLangProse.test.tsx`:
- Around line 31-58: Move the `Title` and `Subtitle` language assertions out of
`docsLangProse.test.tsx` and into the corresponding Storybook story file for
these components. Update the relevant stories to cover the `docs.lang` behavior
with `play` functions using `expect`/`within` (and `userEvent` if needed), and
remove the React component unit test file so the coverage follows the repo’s
Storybook test policy.
In `@code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.lang.test.tsx`:
- Around line 9-10: The relative imports in ArgsTable.lang.test.tsx use
extensionless TypeScript paths, which violates the repo rule for explicit
extensions. Update the import of ArgRow.stories and ArgsTable to reference their
full TypeScript file names, using the same symbols ArgRow and ArgsTable so the
test file resolves them via extensionful relative imports.
- Around line 12-35: This ArgsTable coverage should not live in a standalone
.test.tsx file; move the English-lang assertions into the component’s Storybook
story play function. Update the relevant ArgsTable story so it renders the same
wrapped setup and uses play to assert the header and arg-name cell keep
lang="en", referencing ArgsTable and the story export that exercises it. Then
verify the story behavior with the Storybook Vitest config instead of
adding/keeping the separate unit test.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 01c85115-612d-4875-89fc-ea8bca4f9960
📒 Files selected for processing (34)
code/addons/docs/src/blocks/blocks/Description.tsxcode/addons/docs/src/blocks/blocks/DocsContainer.tsxcode/addons/docs/src/blocks/blocks/Story.stories.tsxcode/addons/docs/src/blocks/blocks/Subtitle.tsxcode/addons/docs/src/blocks/blocks/Title.tsxcode/addons/docs/src/blocks/blocks/docsLang.test.tscode/addons/docs/src/blocks/blocks/docsLang.tscode/addons/docs/src/blocks/blocks/docsLangProse.test.tsxcode/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsxcode/addons/docs/src/blocks/components/ArgsTable/ArgsTable.lang.test.tsxcode/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsxcode/addons/docs/src/blocks/components/DocsPage.test.tsxcode/addons/docs/src/blocks/components/DocsPage.tsxcode/addons/docs/src/blocks/components/Preview.tsxcode/addons/docs/src/blocks/components/Story.tsxcode/addons/docs/src/blocks/examples/StoryParameters.stories.tsxcode/addons/docs/src/types.tscode/core/src/preview-api/modules/preview-web/WebView.test.tscode/core/src/preview-api/modules/preview-web/WebView.tscode/core/src/types/modules/csf.tsdocs/api/main-config/main-config-indexers.mdxdocs/api/main-config/main-config-log-level.mdxdocs/api/main-config/main-config-manager-head.mdxdocs/api/main-config/main-config-preview-annotations.mdxdocs/api/main-config/main-config-preview-body.mdxdocs/api/main-config/main-config-preview-head.mdxdocs/api/main-config/main-config-refs.mdxdocs/api/main-config/main-config-static-dirs.mdxdocs/api/main-config/main-config-swc.mdxdocs/api/main-config/main-config-tags.mdxdocs/api/main-config/main-config-typescript.mdxdocs/api/main-config/main-config-vite-final.mdxdocs/api/main-config/main-config-webpack-final.mdxdocs/api/parameters.mdx
Comment on lines
+10
to
+11
| export const resolveDocsLang = (parameters?: Parameters, projectParameters?: Parameters): string => | ||
| parameters?.docs?.lang ?? projectParameters?.docs?.lang ?? 'en'; |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Treat blank docs.lang values as unset.
Using ?? here preserves '', so docs blocks can end up rendering lang="" instead of inheriting the project value or the documented 'en' fallback.
Suggested fix
+const normalizeLang = (lang?: string) => (lang?.trim() ? lang : undefined);
+
export const resolveDocsLang = (parameters?: Parameters, projectParameters?: Parameters): string =>
- parameters?.docs?.lang ?? projectParameters?.docs?.lang ?? 'en';
+ normalizeLang(parameters?.docs?.lang) ??
+ normalizeLang(projectParameters?.docs?.lang) ??
+ 'en';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const resolveDocsLang = (parameters?: Parameters, projectParameters?: Parameters): string => | |
| parameters?.docs?.lang ?? projectParameters?.docs?.lang ?? 'en'; | |
| const normalizeLang = (lang?: string) => (lang?.trim() ? lang : undefined); | |
| export const resolveDocsLang = (parameters?: Parameters, projectParameters?: Parameters): string => | |
| normalizeLang(parameters?.docs?.lang) ?? | |
| normalizeLang(projectParameters?.docs?.lang) ?? | |
| 'en'; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@code/addons/docs/src/blocks/blocks/docsLang.ts` around lines 10 - 11, The
resolveDocsLang helper currently uses nullish coalescing, which preserves empty
docs.lang strings instead of falling back. Update resolveDocsLang to treat blank
or whitespace-only parameters?.docs?.lang and projectParameters?.docs?.lang as
unset, so it falls through to the project value or the 'en' default. Keep the
change localized to resolveDocsLang and preserve the existing fallback order.
Comment on lines
+83
to
+94
| it('forwards the lang attribute to the content region for docs prose', () => { | ||
| const { container } = render( | ||
| <ThemeProvider theme={convert(themes.light)}> | ||
| <DocsContent lang="de"> | ||
| <p>Beschreibung</p> | ||
| </DocsContent> | ||
| </ThemeProvider> | ||
| ); | ||
|
|
||
| const content = container.firstElementChild; | ||
| expect(content?.getAttribute('lang')).toBe('de'); | ||
| }); |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
This test bypasses the code you changed.
Rendering DocsContent directly will still pass even if DocsPageWrapper stops forwarding lang, so this doesn't cover the new behavior in DocsPage.tsx. Please move this to a Storybook play assertion for the wrapper instead of adding a *.test.tsx component test. As per coding guidelines, **/*.test.tsx: "For React components, do not add *.test.tsx unit tests; behavior, accessibility, and interaction assertions should live in Storybook stories with play functions."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@code/addons/docs/src/blocks/components/DocsPage.test.tsx` around lines 83 -
94, Move this assertion out of the DocsContent unit test because it bypasses
DocsPageWrapper and does not validate the changed forwarding behavior in
DocsPage.tsx. Add the lang forwarding check to the appropriate Storybook story
using a play function that renders the wrapper and asserts the content region
receives the lang attribute, and remove the *.test.tsx component test for this
case.
Source: Coding guidelines
Comment on lines
+234
to
+238
| <ActionBar | ||
| className="sbdocs sbdocs-preview-actions" | ||
| lang="en" | ||
| innerStyle={{ paddingInline: 0 }} | ||
| > |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Scope the English override to Storybook-owned controls only.
This lang="en" also covers additionalActionItems later in the same ActionBar, so caller-supplied title/ariaLabel text will be announced as English even when it is user content. Move the override onto the built-in buttons instead of the container.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@code/addons/docs/src/blocks/components/Preview.tsx` around lines 234 - 238,
The `ActionBar` in `Preview` is applying `lang="en"` to both Storybook-owned
controls and caller-provided `additionalActionItems`, which can incorrectly
force user content to be announced as English. Move the English override off the
`ActionBar` container and apply it only to the built-in buttons/actions rendered
by `Preview`, keeping `additionalActionItems` outside that language scope.
Comment on lines
+83
to
+90
| /** | ||
| * The BCP-47 language tag applied to the rendered story's document. | ||
| * | ||
| * In story view this sets `<html lang>`; in docs view it sets `lang` on the embedded story canvas. | ||
| * Inherited project → meta → story. | ||
| * | ||
| * @default 'en' | ||
| */ |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix the htmlLang contract text.
WebView.prepareForStory() applies this value to the story root element and its tests assert that document.documentElement.lang stays unchanged, so the current JSDoc overstates the behavior by documenting <html lang> and a story-view default of 'en'.
Suggested doc fix
/**
- * The BCP-47 language tag applied to the rendered story's document.
+ * The BCP-47 language tag applied to the rendered story root.
*
- * In story view this sets `<html lang>`; in docs view it sets `lang` on the embedded story canvas.
+ * In story view this sets `lang` on the story root; in docs view it sets `lang` on the
+ * embedded story canvas.
* Inherited project → meta → story.
- *
- * `@default` 'en'
*/📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| /** | |
| * The BCP-47 language tag applied to the rendered story's document. | |
| * | |
| * In story view this sets `<html lang>`; in docs view it sets `lang` on the embedded story canvas. | |
| * Inherited project → meta → story. | |
| * | |
| * @default 'en' | |
| */ | |
| /** | |
| * The BCP-47 language tag applied to the rendered story root. | |
| * | |
| * In story view this sets `lang` on the story root; in docs view it sets `lang` on the | |
| * embedded story canvas. | |
| * Inherited project → meta → story. | |
| */ |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@code/core/src/types/modules/csf.ts` around lines 83 - 90, Update the JSDoc
for htmlLang in csf.ts to match actual behavior: document that
WebView.prepareForStory() applies the value to the story root element, not the
document <html> element, and remove the claim that story view sets <html lang>
or that the default is always 'en'. Keep the inheritance note (project → meta →
story) and align the description with the tests around
document.documentElement.lang remaining unchanged.
ndelangen
approved these changes
Jun 29, 2026
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx (1)
472-525: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winPass
docsLangto everyArgRow, not just the ungrouped branch.Line 472 forwards
docsLang, but the sectioned and subsectionedArgRowcall sites below still omit it. SinceTableWrapperis nowlang="en", grouped description cells will keep inheriting English instead of the configured docs language.Suggested fix
{subsection.map((row) => ( <ArgRow key={row.key} row={row} arg={args && args[row.key]} expandable={expandable} + docsLang={docsLang} {...common} /> ))} @@ - {section.ungrouped.map((row) => ( - <ArgRow key={row.key} row={row} arg={args && args[row.key]} {...common} /> - ))} + {section.ungrouped.map((row) => ( + <ArgRow + key={row.key} + row={row} + arg={args && args[row.key]} + docsLang={docsLang} + {...common} + /> + ))} @@ {subsection.map((row) => ( <ArgRow key={row.key} row={row} arg={args && args[row.key]} expandable={expandable} + docsLang={docsLang} {...common} /> ))}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx` around lines 472 - 525, Pass docsLang through every ArgRow render in ArgsTable, not only the top ungrouped branch. Update the ArgRow call sites inside groups.ungroupedSubsections, section.ungrouped, and section.subsections so they all receive docsLang alongside the existing props, using the same pattern already present in the first ArgRow branch.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@code/addons/docs/src/blocks/blocks/DocsContainer.tsx`:
- Around line 31-42: The DocsContainer logic leaves lang implicitly typed,
triggering the noImplicitAnyLet lint rule. Update the lang declaration in
DocsContainer so it is explicitly a string (or initialized to a string value)
and keep the existing meta/projectAnnotations fallback assignment logic intact.
Use the lang variable in the try/catch block as the uniquely identifying symbol
to locate and fix this.
---
Outside diff comments:
In `@code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx`:
- Around line 472-525: Pass docsLang through every ArgRow render in ArgsTable,
not only the top ungrouped branch. Update the ArgRow call sites inside
groups.ungroupedSubsections, section.ungrouped, and section.subsections so they
all receive docsLang alongside the existing props, using the same pattern
already present in the first ArgRow branch.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b3fe8e0a-8bb0-47d6-a622-bfbb799f2dcc
📒 Files selected for processing (11)
code/.storybook/preview.tsxcode/addons/docs/src/blocks/blocks/ArgTypes.tsxcode/addons/docs/src/blocks/blocks/Controls.tsxcode/addons/docs/src/blocks/blocks/Description.tsxcode/addons/docs/src/blocks/blocks/DocsContainer.tsxcode/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsxcode/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsxcode/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsxcode/addons/docs/src/blocks/components/TableOfContents.tsxcode/addons/docs/src/blocks/components/Toolbar.tsxcode/core/src/components/components/Toolbar/Toolbar.tsx
✅ Files skipped from review due to trivial changes (1)
- code/addons/docs/src/blocks/components/Toolbar.tsx
Comment on lines
+31
to
+42
| // Language of docs prose (descriptions, ArgTypes description cells, free MDX prose). | ||
| let lang; | ||
|
|
||
| try { | ||
| const meta = context.resolveOf('meta', ['meta']); | ||
| toc = meta.preparedMeta.parameters?.docs?.toc; | ||
| const metaParameters = meta.preparedMeta.parameters; | ||
| toc = metaParameters?.docs?.toc; | ||
| lang = metaParameters?.docs?.lang ?? 'en'; | ||
| } catch (err) { | ||
| // No meta, falling back to project annotations | ||
| toc = context?.projectAnnotations?.parameters?.docs?.toc; | ||
| lang = context?.projectAnnotations?.parameters?.docs?.lang ?? 'en'; |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Type lang explicitly to avoid the implicit-any lint error.
Line 32's let lang; trips Biome's noImplicitAnyLet rule, so this change will fail linting unless lang is declared or initialized as a string.
Suggested fix
- let lang;
+ let lang: string;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // Language of docs prose (descriptions, ArgTypes description cells, free MDX prose). | |
| let lang; | |
| try { | |
| const meta = context.resolveOf('meta', ['meta']); | |
| toc = meta.preparedMeta.parameters?.docs?.toc; | |
| const metaParameters = meta.preparedMeta.parameters; | |
| toc = metaParameters?.docs?.toc; | |
| lang = metaParameters?.docs?.lang ?? 'en'; | |
| } catch (err) { | |
| // No meta, falling back to project annotations | |
| toc = context?.projectAnnotations?.parameters?.docs?.toc; | |
| lang = context?.projectAnnotations?.parameters?.docs?.lang ?? 'en'; | |
| // Language of docs prose (descriptions, ArgTypes description cells, free MDX prose). | |
| let lang: string; | |
| try { | |
| const meta = context.resolveOf('meta', ['meta']); | |
| const metaParameters = meta.preparedMeta.parameters; | |
| toc = metaParameters?.docs?.toc; | |
| lang = metaParameters?.docs?.lang ?? 'en'; | |
| } catch (err) { | |
| // No meta, falling back to project annotations | |
| toc = context?.projectAnnotations?.parameters?.docs?.toc; | |
| lang = context?.projectAnnotations?.parameters?.docs?.lang ?? 'en'; |
🧰 Tools
🪛 Biome (2.5.1)
[error] 32-32: This variable implicitly has the any type.
(lint/suspicious/noImplicitAnyLet)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@code/addons/docs/src/blocks/blocks/DocsContainer.tsx` around lines 31 - 42,
The DocsContainer logic leaves lang implicitly typed, triggering the
noImplicitAnyLet lint rule. Update the lang declaration in DocsContainer so it
is explicitly a string (or initialized to a string value) and keep the existing
meta/projectAnnotations fallback assignment logic intact. Use the lang variable
in the try/catch block as the uniquely identifying symbol to locate and fix
this.
Source: Linters/SAST tools
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #11706
What I did
langattribute to be set at the root of storieslangattribute for docs content (descriptions, etc.)lang="en"requiredattribute accessibility in ArgRow because I noticed it there and then and it was a trivial changeThis should ensure the whole tree is declaring the right language for screen readers regardless of what our users need to do.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Open the UI. Write some docgen in Spanish and some stories in French, or something like that. Run your favourite screenreader and observe how it handles languages as you go through the UI.
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsDeclare whether manual QA will be needed for this PR during the next release, through
qa:neededorqa:skipMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
Bug Fixes
Documentation