Chat: distinguish question carousel link states

[Lee Murray (mrleemurray)]

Chat question carousel links now react visibly to hover and press across Light 2026, Dark 2026, and high-contrast themes without changing link styling elsewhere.

Changes

• Add a carousel-scoped underline and stronger interaction stroke for hover and active links, including a perceptible high-contrast state while preserving the existing resting underlines.
• Use the theme focus border for keyboard-only link focus.
• Add real-widget Playwright coverage for rest, hover, active, and keyboard-focus states in light, dark, and both high-contrast fixture variants.

Validation

• 82 targeted question carousel unit tests passed.
• 4 real-widget Playwright interaction tests passed; all 4 fail against the untouched origin/main baseline.
• Component fixture test TypeScript check passed.
• ESLint passed for the new Playwright test.
• Stylelint passed for the carousel stylesheet with 4 pre-existing design-token suggestions.
• Component Explorer compiled successfully and commit-bound before/after captures were verified at identical dimensions, viewport, scale, zoom, fixture, and interaction state.

Fixes #334651

Before / After

Captured from the real chat/chatQuestionCarousel/MarkdownLinks widget fixture in Chrome 153 with the same 720×640 viewport, 1× device scale, 100% zoom, interaction target, and 416×314 fixture crop. Resting renders are byte-for-byte unchanged.

Light 2026

State	Before	After
Rest
Hover

Dark 2026

State	Before	After
Rest
Hover

Light High Contrast

State	Before	After
Rest
Hover

Dark High Contrast

State	Before	After
Rest
Hover

[Copilot]

🟡 Changes recommended

The active-state test remains under hover and cannot independently detect an active-style regression.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds carousel-scoped visual states for hovered, pressed, and keyboard-focused links.

Changes:

• Adds stronger hover/active underlines.
• Adds theme-aware keyboard focus outlines.
• Adds Playwright coverage across four theme variants.

File summaries

File	Description
chatQuestionCarousel.css	Defines carousel link interaction styling.
chatQuestionCarouselLinks.spec.ts	Tests link styles across themes and states.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 1
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.