Skip to content

Underline chat carousel links in high-contrast themes - #334924

Merged
Lee Murray (mrleemurray) merged 2 commits into
mainfrom
mrleemurray/elaborate-apricot-tyrannosaurus
Sep 8, 2026
Merged

Underline chat carousel links in high-contrast themes#334924
Lee Murray (mrleemurray) merged 2 commits into
mainfrom
mrleemurray/elaborate-apricot-tyrannosaurus

Conversation

@mrleemurray

@mrleemurray Lee Murray (mrleemurray) commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Fixes #334647

Summary

Restore a consistent link cue in high-contrast chat question carousels. The global HC rule only underlines direct p > a links, so anchors nested inside bold text, emphasis, headings, and lists miss it.

  • Add a carousel-scoped underline rule for both high-contrast themes, without changing global link styling or theme colors.
  • Add eight real-widget regression cases covering four theme classes with the underline-links preference on and off. Each checks plain, bold, italic, heading, and list links in the carousel message, question title, and detailed content.
  • Expand the existing MarkdownLinks fixture and add opt-in light high-contrast support using the built-in theme resource and the existing fixture helpers.

Link activation and keyboard handling are unchanged. The hover-color question in #334651 remains separate.

Validation

  • 81 targeted tests passed:
./scripts/test.sh --run src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatQuestionCarouselPart.test.ts
  • Before the fix, all four HC regression cases failed while all four normal-theme cases passed. All eight new regressions passed again with the final scoped selector.
  • Verified the real-widget fixture in dark, light, dark high contrast, and light high contrast. All six visible links are underlined in each HC theme, with unchanged link colors.
  • Normal dark/light before-and-after screenshots are byte-for-byte identical.
  • Focused title links retain an underline and visible focus outline; hovered title links retain the underline and existing active-link color token.
  • ESLint, diff checks, and pre-commit hygiene passed. Stylelint passed with four pre-existing design-token suggestions; existing CSS diagnostics were left untouched.
  • The automated fixture-error scan was unavailable because the Component Explorer daemon browser was closed. Rendering, style measurements, and screenshots were validated through the integrated browser instead.

Manual verification

Open the chat/chatQuestionCarousel/MarkdownLinks fixture in DarkHighContrast and LightHighContrast. Confirm that links in the introduction, bold question title, detailed heading, paragraph, and list are underlined at rest. Focus and hover the title link, then switch to Dark and Light to confirm their existing styling is preserved.

Screenshots

Captured from the same real-widget MarkdownLinks fixture before and after the scoped CSS fix.

Dark high contrast

Before After
Before: nested carousel links lack underlines in dark high contrast After: all carousel Markdown links are underlined in dark high contrast

Light high contrast

Before After
Before: nested carousel links lack underlines in light high contrast After: all carousel Markdown links are underlined in light high contrast

Fixes #334647

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI balanced review requested due to automatic review settings September 7, 2026 14:16

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The fix is correctly scoped and comprehensively covers both high-contrast variants without altering normal-theme behavior.

Pull request overview

Restores underlines for nested Markdown links in chat carousels under both high-contrast themes.

Changes:

  • Adds scoped high-contrast link styling.
  • Adds eight theme/preference regression cases.
  • Extends component fixtures with light high-contrast support.
File summaries
File Description
fixtureUtils.ts Adds the light high-contrast fixture theme.
chatQuestionCarousel.fixture.ts Expands Markdown link visual coverage.
chatQuestionCarouselPart.test.ts Tests underline behavior across themes and preferences.
chatQuestionCarousel.css Underlines carousel Markdown links in HC themes.
Review details
  • Files reviewed: 4/4 changed files
  • Comments generated: 0
  • Review effort level: Balanced

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

@github-actions

github-actions Bot commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: aea17150 Current: fb2e017e

Changed (2)

chat/chatQuestionCarousel/MarkdownLinks/Dark
Before After
before after
chat/chatQuestionCarousel/MarkdownLinks/Light
Before After
before after

3 insignificant change(s) omitted (≤20 px, Δ≤2). See CI logs for details.

Added (2)

chat/chatQuestionCarousel/MarkdownLinks/DarkHighContrast

current

chat/chatQuestionCarousel/MarkdownLinks/LightHighContrast

current

@mrleemurray
Lee Murray (mrleemurray) merged commit 743fc20 into main Sep 8, 2026
33 checks passed
@mrleemurray
Lee Murray (mrleemurray) deleted the mrleemurray/elaborate-apricot-tyrannosaurus branch September 8, 2026 07:25
@vs-code-engineering vs-code-engineering Bot added this to the 1.138.0 milestone Sep 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chat carousel: Title links should have underline in high-contrast themes

4 participants