docs: Add a KeyboardKey component

[LinKCoding]

Overview

Adds a styled KeyboardKey component to replace plain <kbd> tags in styleguide documentation, providing consistent keyboard key styling across all MDX files.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1504
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

1. Go to Storybook and navigate to any of the updated component docs (Tabs, SkipToContent, Flyout, Modal, InfoTip)
2. Verify that keyboard keys (like "Tab", "Enter", etc.) are now styled with a monospace font, background, border, and shadow
3. Test in both light and dark mode
4. ...
5. Profit!

PR Links and Envs

N/A

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ee9142b

---

☁️ Nx Cloud last updated this comment at 2025-12-05 21:19:33 UTC

[codecademydev]

📬 Published Alpha Packages:

@codecademy/[email protected]

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://69334d09b32d40ff3a0614db--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/69334d09b32d40ff3a0614db