@codecademy/styleguide 79.2.3-alpha.66bcf1.0 → 79.2.3-alpha.66d178.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.2.3-alpha.66bcf1.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.2...@codecademy/styleguide@79.2.3-alpha.66bcf1.0) (2026-03-19)
+### [79.2.3-alpha.66d178.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.2...@codecademy/styleguide@79.2.3-alpha.66d178.0) (2026-03-19)
 
 **Note:** Version bump only for package @codecademy/styleguide
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.3-alpha.66bcf1.0",
+  "version": "79.2.3-alpha.66d178.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "a7c902a51a4b3be5fa9c0f287f1ddcde9a7ef416"
+  "gitHead": "e17036cd3d4e50fa86d1bd97b1643b0bfd373725"
 }

package/src/lib/Organisms/BarChart/BarChart.mdx

@@ -131,14 +131,15 @@ When a bar has an `href` link, an `aria-label` is automatically generated from t
 
 ## Title and description
 
-The `BarChart` component uses semantic HTML to provide context and accessibility. The chart is wrapped in a [`<figure>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure), and the description is displayed in a [`<figcaption>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption). This semantic structure helps screen readers and other assistive technologies understand the relationship between the chart and its description. **Visual title + description is the greatly preferred pattern** for accessibility and user experience.
+The `BarChart` component uses semantic HTML to provide context and accessibility. The chart is wrapped in a [`<figure>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure), and the description is displayed in a [`<figcaption>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption). This semantic structure helps screen readers and other assistive technologies understand the relationship between the chart and its description.
 
 **Preferred pattern: Visual title + description**
 
 Provide both `title` and `description` props to make the chart's purpose and key takeaways clear to all users:
 
-- `title`: A heading that identifies the chart. Can be a string or an object with `{ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', title: string, variant?: Text['variant'] }` to specify the heading level and optionally override the default styling with a <LinkTo id="Typography/Text">Text variant</LinkTo>.
-- `description`: A summary of the information or the overall takeaway displayed in the `<figcaption>` element.
+- `title`: A heading that identifies the chart. Can be a string or an object with `{ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', title: string, variant?: Text['variant'] }` to specify the heading level and optionally override the default styling with a <LinkTo id="Typography/Text">Text variant</LinkTo>. Use semantic heading levels (h1–h6) so the surrounding document outline stays correct.
+- `description`: **Required.** A summary of the information or the overall takeaway displayed in the `<figcaption>` element.
+- When the visible title lives outside the chart, use `aria-labelledby` to point at that heading (see below). The referenced element must exist and have an accessible name.
 
 <Canvas of={BarChartStories.WithVisualTitleAndDescription} />
 
@@ -151,12 +152,6 @@ Provide both `title` and `description` props to make the chart's purpose and key
 
 <Canvas of={BarChartStories.WithExternalTitle} />
 
-**Best practices:**
-
-- Always provide a `description` prop - it's required and should summarize the chart's key information
-- Use semantic heading levels for titles (h1-h6) to maintain proper document structure
-- When using `aria-labelledby`, ensure the referenced element exists and is properly labeled
-
 ## Sorting
 
 `BarChart` includes an optional sorting dropdown in the title area. The dropdown only renders when the `sortFns` prop is provided. You can control which sort options appear by including string literals or custom sort functions in the array.
@@ -251,22 +246,6 @@ The `styleConfig` prop accepts an object with the following optional properties:
 
 All color values should be valid color tokens from the Gamut design system. When customizing colors, ensure they maintain at least a 3:1 contrast ratio with the background for accessibility.
 
-### Default values
-
-If `styleConfig` is not provided, BarChart uses these default colors:
-
-```typescript
-{
-  textColor: 'text',
-  seriesOneBarColor: 'text',
-  seriesTwoBarColor: 'primary',
-  seriesOneLabel: 'text-secondary',
-  seriesTwoLabel: 'primary',
-}
-```
-
-### Example
-
 <Canvas of={BarChartStories.CustomStyles} />
 
 ## Custom scale
@@ -349,7 +328,7 @@ BarChart supports internationalization through the `translations` prop. You can
 - **sortLabel**, **sortOptions**, and **locale** — Always strings. Control the sort dropdown label, option labels, and number-formatting locale.
 - **Accessibility** — Two optional summary functions; when omitted, default English summaries are used. Each function receives context and returns the full summary string.
   - `**stackedBarSummary**` — Used for stacked (two-value) rows. Context includes `seriesOneValue`, `seriesTwoValue`, **gained** (seriesTwoValue - seriesOneValue), `unit`, `locale`, `categoryLabel`.
-  - **singleValueBarSummary** — Used for all single-value rows. Context includes `value`, `unit`, `locale`, `categoryLabel`.
+  - `**singleValueBarSummary**` — Used for all single-value rows. Context includes `value`, `unit`, `locale`, `categoryLabel`.
 
 ### Where accessibility summaries appear