Fix text clipping in FAQ, Pricing Options and Accordions by rezrah · Pull Request #1474 · primer/brand

rezrah · 2026-09-10T11:34:01Z

Summary

Resolves #1473
Part of https://github.com/github/brand-experience/issues/545

Prevents text-clipping in the accordion component, which happened because of previously incorrect negative positioning of the accordion content. This change affects multiple components, from Accordion to PricingOptions.

🔗 Preview

List of notable changes:

Simplifies the visible area of Accordion content
Removes the previous calculation for negative positioning in accordion content
Adds localization examples to FAQ and accordion stories to help validate the fix works
Nuked all previous snapshots that used Accordion and regenerated them as the pixel change is so small VRT didn't pick it up

Steps to test:

Check the new JP localized story and observe that glyphs are no longer clipping on the first line
See the same in FAQ
Go through visual diffs to make sure there aren't any regressions that affect readability of the content

Supporting resources (related issues, external links, etc):

Slack report (internal)

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

Before	After

Before	After

changeset-bot · 2026-09-10T11:34:07Z

🦋 Changeset detected

Latest commit: 21b18ab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-mcp	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-09-10T11:35:50Z

🟢 No design token changes found

github-actions · 2026-09-10T11:37:50Z

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	107.33 kB	107.27 kB	✅ -65 B (-0.1%)
UMD — full bundle (CSS)	71.09 kB	71.09 kB	✅ -3 B (-0.0%)
ESM — full bundle (JS + CSS)	1.85 MB	1.85 MB	✅ -663 B (-0.0%)
ESM — tree-shaken simple (Button)	74.37 kB	74.38 kB	⬆️ +13 B (+0.0%)
ESM — tree-shaken complex (ActionMenu)	83.42 kB	83.43 kB	⬆️ +13 B (+0.0%)

github-actions · 2026-09-10T11:37:55Z

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 1 improved, 1 decreased

Component/Hook	Statements	Functions	Branches	Change
`Accordion`	99.1%	100.0%	~~85.0%~~ 86.2%	+1.2%

Copilot

Copilot review overview

🟡 Changes recommended

Two unresolved moderate findings remain in the FAQ stories: CJK visual coverage and translated link spacing.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review tier: Lite
Findings: 1 · 1

New issues introduced by this change (2)

Severity	Finding
	`packages/react/src/FAQ/FAQ.features.stories.tsx` — This story does not set a locale, so the generated visual test runs with the preview default (`en`)…
	`apps/storybook/static/locales/en/FAQ.json` — The new English translation misspells `sponsored` as `sponsorsed`, so the migrated FAQ story…

What changed in this PR

Fixes multilingual text clipping in Accordion content, including FAQ and Pricing Options consumers, by removing negative positioning and measuring full content height.

Changes:

Simplifies Accordion positioning and height calculation.
Adds localized FAQ and Accordion stories, translations, and visual regression coverage.
Synchronizes Storybook document language and adds a changeset.

File	Description
`packages/react/src/FAQ/FAQ.visual.spec.ts`	Adds localized FAQ visual coverage.
`packages/react/src/FAQ/FAQ.stories.tsx`	Localizes the default FAQ story.
`packages/react/src/FAQ/FAQ.features.stories.tsx`	Adds translated FAQ fixtures and localized coverage.
`packages/react/src/Accordion/Accordion.visual.spec.ts`	Adds localized Accordion visual coverage.
`packages/react/src/Accordion/Accordion.tsx`	Measures full Accordion content height.
`packages/react/src/Accordion/Accordion.module.css`	Removes offset transforms and adjusts positioning.
`packages/react/src/Accordion/Accordion.features.stories.tsx`	Adds a localized Accordion story.
`apps/storybook/static/locales/pt-BR/FAQ.json`	Adds Portuguese FAQ translations.
`apps/storybook/static/locales/pt-BR/Accordion.json`	Adds Portuguese Accordion translations.
`apps/storybook/static/locales/ko/FAQ.json`	Adds Korean FAQ translations.
`apps/storybook/static/locales/ko/Accordion.json`	Adds Korean Accordion translations.
`apps/storybook/static/locales/ja/FAQ.json`	Adds Japanese FAQ translations.
`apps/storybook/static/locales/ja/Accordion.json`	Adds Japanese Accordion translations.
`apps/storybook/static/locales/fr/FAQ.json`	Adds French FAQ translations.
`apps/storybook/static/locales/fr/Accordion.json`	Adds French Accordion translations.
`apps/storybook/static/locales/es/FAQ.json`	Adds Spanish FAQ translations.
`apps/storybook/static/locales/es/Accordion.json`	Adds Spanish Accordion translations.
`apps/storybook/static/locales/en/FAQ.json`	Adds English FAQ translations.
`apps/storybook/static/locales/en/Accordion.json`	Adds English Accordion translations.
`apps/storybook/static/locales/de/FAQ.json`	Adds German FAQ translations.
`apps/storybook/static/locales/de/Accordion.json`	Adds German Accordion translations.
`apps/storybook/.storybook/preview.jsx`	Synchronizes document language with the Storybook locale.
`.changeset/tidy-accordion-text.md`	Documents the Accordion clipping fix.

Suppressed comments (3)

.changeset/tidy-accordion-text.md:5

RiverAccordion has its own RiverAccordion__content implementation and does not use Accordion.module.css, so this release note incorrectly claims that this fix covers RiverAccordion. Name consumers that actually use Accordion, such as FAQ, PricingOptions, or RiverBreakoutTabs.

Fixed first-line text clipping in accordion content, which is used across multiple components like `FAQ` and `RiverAccordion`.

apps/storybook/static/locales/en/FAQ.json:72

This new English translation is missing free in please feel free to sign up, so the FAQ story renders an ungrammatical sentence.

  "startup_not_eligible_answer": "If you're not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please feel to sign up for a trial",

packages/react/src/FAQ/FAQ.stories.tsx:46

Because this translated value is a JSX expression with no trailing whitespace, the following link renders directly after it (for example, trialhere). Add an explicit space before the link, as done for the first answer above.

            {t('startup_not_eligible_answer')}

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

github-actions · 2026-09-10T11:41:58Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

rezrah · 2026-09-10T11:58:21Z

+const I18nextDecorator = (Story, context) => {
  const {locale} = context.globals

+  useEffect(() => {


The useEffect fixes a pre-existing accessibility issue where the storybook html tag declares en despite page content appearing in other languages. Not related to the fix, but it was setting off AXE scanners.

danielguillan

LGTM!

fix text clipping in FAQ and accordions

a7b9261

rezrah requested a review from a team as a code owner September 10, 2026 11:34

Copilot AI lite review requested due to automatic review settings September 10, 2026 11:34

Copilot started reviewing on behalf of rezrah September 10, 2026 11:34 View session

rezrah temporarily deployed to github-pages September 10, 2026 11:38 — with GitHub Actions Inactive

Copilot AI reviewed Sep 10, 2026

View reviewed changes

Comment thread packages/react/src/FAQ/FAQ.features.stories.tsx

Comment thread apps/storybook/static/locales/en/FAQ.json Outdated

address feedback

21b18ab

rezrah commented Sep 10, 2026

View reviewed changes

rezrah temporarily deployed to github-pages September 10, 2026 12:00 — with GitHub Actions Inactive

rezrah requested a review from danielguillan September 10, 2026 12:03

danielguillan approved these changes Sep 10, 2026

View reviewed changes

rezrah merged commit fdec9d1 into main Sep 10, 2026
17 checks passed

rezrah deleted the rezrah/text-clipping-faq branch September 10, 2026 13:30

primer Bot mentioned this pull request Sep 10, 2026

Release tracking #1470

Merged

github-actions Bot mentioned this pull request Sep 14, 2026

New release available "@primer/react-brand@0.76.0" primer/brand-releases#49

Closed

22 tasks

Navigation Menu

Fix text clipping in FAQ, Pricing Options and Accordions - #1474

Fix text clipping in FAQ, Pricing Options and Accordions#1474
rezrah merged 2 commits into
mainfrom
rezrah/text-clipping-faq

rezrah commented Sep 10, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Sep 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 10, 2026

Uh oh!

github-actions Bot commented Sep 10, 2026

Uh oh!

github-actions Bot commented Sep 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Sep 10, 2026

Uh oh!

rezrah Sep 10, 2026 •

edited

Loading

Uh oh!

danielguillan left a comment

Uh oh!

Uh oh!

This branch was previously deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

rezrah commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

Steps to test:

Supporting resources (related issues, external links, etc):

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

changeset-bot Bot commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Sep 10, 2026

🟢 No design token changes found

Uh oh!

github-actions Bot commented Sep 10, 2026

🟢 Bundle size report

Uh oh!

github-actions Bot commented Sep 10, 2026

🟢 Unit test coverage changes found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Sep 10, 2026

🟢 No visual differences found

Uh oh!

rezrah Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielguillan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was previously deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rezrah commented Sep 10, 2026 •

edited

Loading

changeset-bot Bot commented Sep 10, 2026 •

edited

Loading

rezrah Sep 10, 2026 •

edited

Loading