Skip to content

fixing iconlabel css #250882

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 6, 2025
Merged

fixing iconlabel css #250882

merged 7 commits into from
Jun 6, 2025

Conversation

kkbrooks
Copy link
Contributor

@kkbrooks kkbrooks commented Jun 6, 2025

Changes to label styles:

  • src/vs/base/browser/ui/iconLabel/iconlabel.css: Updated the .label-suffix and .label-description elements to use opacity: .7 instead of the --vscode-peekViewTitleDescription-foreground color variable, ensuring a consistent semi-transparent appearance.

  • src/vs/workbench/contrib/chat/browser/media/chat.css: Added a new style for .chat-attached-context-attachment .label-suffix to explicitly set the color to --vscode-peekViewTitleDescription-foreground, ensuring it passes accessibility in this specific context.

The accessibility due date for this fix is June 16

@kkbrooks kkbrooks linked an issue Jun 6, 2025 that may be closed by this pull request
Copy link

⚠️ This PR originates from a fork. Due to security restrictions, pipelines from forks are no longer triggered automatically. Learn more.

If the changes appear safe, you can manually trigger the pipeline by commenting /AzurePipelines run.

@vs-code-engineering vs-code-engineering bot added this to the June 2025 milestone Jun 6, 2025
Copy link
Collaborator

@justschen justschen left a comment

Choose a reason for hiding this comment

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

lgtm, reverts original change in the icon label and has more specific fix just for chat 👍🏻

@@ -1182,6 +1182,11 @@ have to be updated for changes to the rules above, or to support more deeply nes
border-color: var(--vscode-focusBorder);
}

.chat-attached-context-attachment .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
color: var(--vscode-peekViewTitleDescription-foreground);
Copy link
Member

Choose a reason for hiding this comment

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

Is the peek view token the right thing to use here, since that might normally be on a different background color than the peek view?

Copy link
Collaborator

Choose a reason for hiding this comment

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

i figured it might be okay since this is only in chat pills, but @kkbrooks i'm not sure if you've looked into where else it's used and if it passes the accessibility stuff?

otherwise, could just be worth making a new token like we talked about

@justschen justschen modified the milestones: June 2025, May 2025 Jun 6, 2025
@kkbrooks kkbrooks merged commit 3031610 into microsoft:main Jun 6, 2025
7 checks passed
@kkbrooks kkbrooks deleted the head-swordfish branch June 6, 2025 20:24
guilhermescarreira pushed a commit to guilhermescarreira/vscode that referenced this pull request Jun 8, 2025
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.

Gray text within quick pick looks weird
3 participants