[danielguillan]

Summary

Towards https://github.com/github/brand-experience/issues/828

Resolves:

• github/accessibility-audits#17312
• github/accessibility-audits#17507
• github/accessibility-audits#17508
• github/accessibility-audits#17520
• github/accessibility-audits#17521
• github/accessibility-audits#17305
• github/accessibility-audits#17522
• github/accessibility-audits#17526
• github/accessibility-audits#17515

Fixes accessibility issues in documentation examples.

List of notable changes:

• fixed text contrast in AnchorNav and BreakoutBanner examples.
• fixed narrow layouts in Tabs, Testimonial, and MinimalFooter examples, and contained inline AnchorNav navigation.
• updated the River video example to use MinimalVideoPlayer with an accessible name and playback control.
• updated the Prose link text and destination
• Corrected list markup in the PricingOptions code example.

What should reviewers focus on?

• Examples remain readable in both color modes and at narrow widths.
• Inline AnchorNav examples stay within their previews, and the River video can be paused with the keyboard.

Steps to test:

1. In Docs, check AnchorNav section text and the BreakoutBanner optional background example in light and dark modes. Scroll the AnchorNav examples and open their narrow menus.
2. At 320px wide, check the Tabs custom panels, Testimonial variants and positioning examples, and MinimalFooter previews for clipped content.
3. In the River video example, use the keyboard to play and pause the video. Check its accessible name with a screen reader.
4. Check the descriptive Prose link and the PricingOptions custom tooltip-label code example's PricingOptions.FeatureList wrapper.

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

• github/accessibility-audits#17312 — Testimonial reflow.
• github/accessibility-audits#17507 and github/accessibility-audits#17508 — example text contrast.
• github/accessibility-audits#17520 — Tabs reflow.
• github/accessibility-audits#17521 — descriptive Prose link.
• github/accessibility-audits#17305 and github/accessibility-audits#17522 — River video playback and accessibility.
• github/accessibility-audits#17524 — MinimalFooter preview sizing; related component fixes are in Fix accessibility audit findings (1) #1522.
• github/accessibility-audits#17526 — PricingOptions list semantics; this PR only updates the static code example.

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

Captured from the before and after environments at matching viewport sizes. Desktop screenshots are cropped to the affected example.

Before	After
AnchorNav text contrast — 1280px viewport, dark mode
BreakoutBanner background contrast — 1280px viewport, dark mode
Tabs custom panels — 320px viewport
Testimonial variants — 320px viewport
MinimalFooter links — 320px viewport
River video control — 1280px viewport
Prose descriptive link — 1280px viewport

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3200a34

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	118.06 kB	118.06 kB	🟢 No change
UMD — full bundle (CSS)	76.58 kB	76.58 kB	🟢 No change
ESM — full bundle (JS + CSS)	2.23 MB	2.23 MB	🟢 No change
ESM — tree-shaken simple (Button)	79.62 kB	79.62 kB	🟢 No change
ESM — tree-shaken complex (ActionMenu)	94.33 kB	94.33 kB	🟢 No change

[github-actions]

🟢 No visual differences found

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

[Copilot]

🟢 Approval recommended

No active review issues remain for the documentation accessibility updates.

No open issues 🎉

What changed in this PR

This PR improves accessibility in Primer Brand’s documentation examples without changing component implementations. It addresses contrast, narrow-screen layouts, video controls, and semantic markup, complementing the component-level fixes in #1522.

Changes:

• Improve text contrast and keep navigation and content within example previews.
• Adapt testimonial, tabs, and footer examples to narrow screens.
• Add accessible video playback controls, descriptive link text, and correct list markup.

File	Description
apps/​next-docs/​content/​components/​Testimonial/​react.mdx	Stack testimonials vertically on narrow screens.
apps/​next-docs/​content/​components/​Tabs/​index.mdx	Constrain the custom-panel example to the preview width.
apps/​next-docs/​content/​components/​River/​react.mdx	Use MinimalVideoPlayer with an accessible title and playback controls.
apps/​next-docs/​content/​components/​Prose/​index.mdx	Provide descriptive link text and a relevant destination.
apps/​next-docs/​content/​components/​PricingOptions/​index.mdx	Wrap the static example’s list item in FeatureList.
apps/​next-docs/​content/​components/​MinimalFooter/​index.mdx	Size footer examples to fit their previews.
apps/​next-docs/​content/​components/​BreakoutBanner/​react.mdx	Use a theme-aware background color for contrast.
apps/​next-docs/​content/​components/​AnchorNav/​index.mdx	Contain inline navigation and set readable section text colors.

_{Review effort: Balanced}

[rezrah]

🚀