[at-susie]

Description

In the #5065, we've added heroshot thumbnails for the components overview page in the documentation website.
This PR extends the same thing for the patterns overview page.

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.73%. Comparing base (fc03037) to head (8134c19).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5181   +/-   ##
=======================================
  Coverage   97.73%   97.73%           
=======================================
  Files         996      996           
  Lines       32219    32219           
  Branches    11906    11907    +1     
=======================================
  Hits        31490    31490           
+ Misses        723      684   -39     
- Partials        6       45   +39     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

🔵 Needs a closer look

Unresolved keyboard traps need correction, and the thumbnail crops and scaled layouts still require human visual validation.

2 open issues

• Prevent focus trapping in the static chart preview · New
• Release focus lock for the non-interactive screenshot modal · New

What changed in this PR

Extends the component-thumbnail approach from #5065 to the documentation website’s patterns overview, using a dedicated heroshot gallery.

Changes:

• Adds pattern definitions and simplified component previews.
• Reuses shared thumbnail frames with pattern-specific scaling, cropping, and padding.
• Composes open dropdown, chart-popover, and iframe-isolated modal previews for screenshots.

File	Description
pages/​heroshot/​patterns-overview.page.tsx	Adds the pattern thumbnail gallery and its preview layouts.

_{Review effort: Balanced}

[at-susie]

Fixed by setting dismissButton={false} (with dismissAriaLabel/onDismiss as undefined), which removes both the focus lock and the autofocus. This matches StaticPopoverHeroshot in pages/heroshot/overview.page.tsx, which omits the dismiss button for the same reason. The thumbnail loses its X, which is fine for a screenshot-only preview.

[at-susie]

Accurate, but leaving as-is here. This is the same construction as the existing ModalHeroshotin pages/heroshot/overview.page.tsx:1369 already on main, and these are screenshot-only dev pages. Worth fixing in a separate change covering both call sites rather than just this one — happy to open that if preferred.