feat(#1553): add 401, 404, 500 error page examples

[twjeffery]

Summary

• Adds three error page examples (401 Restricted access, 404 Page not found, 500 Server problem) under docs/src/content/examples/. Each covers React, Angular, and Web Components.
• Examples composed from goa components (GoabPageBlock, GoabBlock, GoabIcon, GoabText, GoabButton, GoabLink). A small amount of class-based CSS covers the icon-in-circle, brand accent bar, centred text, and the icon scaled beyond xlarge.
• Also exposes role on the React and Angular icon wrappers (feat(#3871), issue Expose role prop on React and Angular icon wrappers #3871) so decorative icons can use role="presentation". Came up during review.
• Closes "Error" page templates #1553.

Custom things that could be components (maybe)

The examples surfaced a few gaps thinking about if we would ever want components for:

1. Icon sizes above xlarge (2.5rem cap) for page-scale illustrations.
2. A primitive for the icon-in-circle emphasis treatment used here and in empty, onboarding, and status screens.
3. A textAlign prop on GoabText for centred layouts where body copy wraps.

Test plan

• /examples/404-error-page, /examples/401-error-page, /examples/500-error-page render with the correct visual treatment.
• All three code tabs (React, Angular, Web Components) render cleanly with no truncation.
• Resize across mobile, tablet, and desktop; horizontal padding shifts 16, 32, 64 via GoabPageBlock.
• Keyboard: can reach the "Go to home page" button and, on 401, the support email link.
• Accessibility section below each preview surfaces the accessibilityNotes.

[netlify]

✅ Deploy Preview for benji-docs-previews ready!

Name	Link
🔨 Latest commit	07f8fae
🔍 Latest deploy log	https://app.netlify.com/projects/benji-docs-previews/deploys/69e7e65855f9930008a29db7
😎 Deploy Preview	https://deploy-preview-3853--benji-docs-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[twjeffery]

Thanks @vanessatran-ddi. All comments addressed:

1. Removed version from <goa-icon> in the web component examples.
2. role="presentation" on the icon and removed aria-hidden from the wrapper div, on every page across all three frameworks.
3. 0.5rem on the underline is now var(--goa-space-xs).

Two things:

• GoabIcon and goab-icon didn't expose role, so I added that in a separate commit (feat(#3871)) and filed Expose role prop on React and Angular icon wrappers #3871 to track.
• Kept aria-hidden="true" on the decorative underline <div> since it's just a plain div and there isn't really a role to set there. Happy to change if you'd prefer.

[vanessatran-ddi]

Looks good!

[willcodeforcoffee]

This looks great! Thanks a lot, Tom.

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-04-28 18:52 UTC

[github-actions]

Preview removed

All preview folders cleaned from gh-pages branch.

[chrisolsen]

🎉 This PR is included in version 7.0.0-dev.8 🎉

The release is available on:

• npm package (@dev dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[chrisolsen]

🎉 This PR is included in version 5.0.0-dev.7 🎉

The release is available on:

• npm package (@dev dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[chrisolsen]

🎉 This PR is included in version 2.0.0-dev.15 🎉

The release is available on:

• npm package (@dev dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[chrisolsen]

🎉 This PR is included in version 2.0.0-dev.6 🎉

The release is available on:

• npm package (@dev dist-tag)
• GitHub release

Your semantic-release bot 📦🚀