fix(cdp): distinguish destination status without color

[lordspline]

Problem

People viewing CDP destination statuses must currently rely on red, green, or yellow tag colors to distinguish operational states.

Changes

• Destination status tags now pair each state with distinct text and an icon shape.
• Status tags expose an explicit accessible name while decorative icons stay hidden from assistive technology.
• The treatment stays scoped to CDP destinations and preserves the existing dropdown explanations and actions.
• Icon-plus-text tags remain compact in destination lists while avoiding a broader change to shared tag behavior.

View	Normal color	Deuteranopia simulation
Desktop
Narrow

How did you test this code?

• Added component tests for every destination state, accessible names, icon semantics, paused behavior, dropdown details, and excluded function types.
• Ran the targeted Jest suite for HogFunctionStatusIndicator.
• Ran the frontend TypeScript check and targeted formatting and lint fixes.
• Rendered the Storybook state matrix at desktop and narrow widths in normal and simulated color vision.
• Ran automated axe checks in normal, simulated, dark, and forced-color conditions with no reported violations.
• Did not manually test the full CDP destination flow.

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Automatic notifications

• Publish to changelog?

Docs update

None. This changes status presentation without changing the documented destination workflow.

🤖 Agent context

Autonomy: Human-driven (agent-assisted)

Capy implemented and validated this change. It used Playwright for rendered accessibility checks and screenshots.

Skills invoked: /writing-ui-components, /writing-tests, /writing-user-facing-copy, /writing-pr-descriptions, and /running-ci-preflight.

The selected icon-plus-text treatment preserves dense layouts and keeps the change local to CDP destinations.

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}