Skip to content
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

[Bug]: After high contrast with white is activated, the close icon is invisible #10199

Closed
2 tasks done
hnjoshi opened this issue Nov 30, 2021 · 10 comments · Fixed by #10447 or #12097
Closed
2 tasks done

[Bug]: After high contrast with white is activated, the close icon is invisible #10199

hnjoshi opened this issue Nov 30, 2021 · 10 comments · Fixed by #10447 or #12097

Comments

@hnjoshi
Copy link

hnjoshi commented Nov 30, 2021

Package

carbon-components

Browser

Chrome

Package version

Latest version

Description

Components / Docs Affected

  • ToastNotification

Detailed Description

Describe in detail the issue you're having.

Problem: After high contrast with white is activated, the close icon is invisible

image

What did you expect to happen? What happened instead? What would you like to see changed?

Close icon should look properly as below:
image

What offering/team/product do you work on? Any pressing ship or release dates we should be aware of?
dns-svcs

CodeSandbox example

.

Steps to reproduce

.

Code of Conduct

@hnjoshi
Copy link
Author

hnjoshi commented Nov 30, 2021

@joshblack
Copy link
Contributor

cc @dakahn when you get a sec, could you confirm that this is an issue in HCM?

@dakahn
Copy link
Contributor

dakahn commented Jan 6, 2022

@hnjoshi can you talk a little more about what "high contrast with white" means?

three big things we need to start triaging contrast issues of this type are browser version, operating system, and tool used for high contrast (plugin vs native).

Thanks

@hnjoshi
Copy link
Author

hnjoshi commented Jan 6, 2022

image
In Windows operating system if we choose "High contrast white" theme then we can see the problem.
Chrome Version 96.0.4664.110 (Official Build) (x86_64)

@dakahn
Copy link
Contributor

dakahn commented Jan 6, 2022

Confirmed this bug on Windows 11 using the white high contrast theme
image

Bug not present with black high contrast theme
image

@dakahn
Copy link
Contributor

dakahn commented Jan 6, 2022

doing a little further research it seems like our HCM styling is the culprit here. Disabling the svg fill and the X renders as expected
image
image

@tw15egan
Copy link
Collaborator

tw15egan commented Jan 7, 2022

@dakahn does removing that line have any effect on the dark HCM / normal styles?

@dakahn dakahn self-assigned this Jan 7, 2022
@dakahn
Copy link
Contributor

dakahn commented Jan 7, 2022

@tw15egan yeah I assume so. We'll need to get a little MORE specific for the various themes. Something like:

@media screen and (-ms-high-contrast: white-on-black) {
    ...
}

@abbeyhrt
Copy link
Contributor

abbeyhrt commented Feb 7, 2022

Looks like this issue is still occurring so reopening to investigate!

@wlinacdl
Copy link

wlinacdl commented Apr 6, 2022

Can I know when the issue could fix? Thanks.

@joshblack joshblack moved this to ⏱ Backlog in Design System May 23, 2022
@tay1orjones tay1orjones moved this from ⏱ Backlog to 🏗 In Progress in Design System Aug 2, 2022
@tay1orjones tay1orjones assigned tw15egan and unassigned dakahn Sep 12, 2022
@tay1orjones tay1orjones moved this from 🏗 In Progress to ⏱ Backlog in Design System Sep 12, 2022
@tay1orjones tay1orjones added the severity: 2 https://ibm.biz/carbon-severity label Sep 12, 2022
@kodiakhq kodiakhq bot closed this as completed in #12097 Sep 16, 2022
Repository owner moved this from ⏱ Backlog to ✅ Done in Design System Sep 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment