search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.75k stars 1.79k forks source link

Icon Only Ghost Button and Radio selection dots are invisible in Windows High Contrast #6748

Closed Paul-Grogan closed 3 years ago

Paul-Grogan commented 4 years ago

What package(s) are you using?

Detailed description

Describe in detail the issue you're having.

With Windows10's High Contrast mode enabled, using the Edge (Chromium) browser, the Icon in the Icon only Ghost button is not visible. Similarly, the dot in a Radio button is not visible either. This can be observed at the sample: https://www.carbondesignsystem.com/components/button

Is this issue related to a specific component?

Button and Radio Button

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

Expected to see the icon in the Icon Only button, and the dot in the selected radio button

What browser are you working in?

Identified on the Edge (Chromium) browser, version 85.0.564.41 (Official build) (64-bit)

What version of the Carbon Design System are you using?

Going to assume the latest because I reproduced it on the Sample ages.

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

WFfH Application Framework, expecting to complete our first ACS certification by the end of September. Which this will impact.

Steps to reproduce the issue

  1. Step one Enable Windows 10's High Contrast mode

  2. Step two Launch (Edge Chromium) and navigate to the Live Demo section of the Button sample:, https://www.carbondesignsystem.com/components/button/usage/#live-demo

  3. Step three From the type menu change Button to Icon Only. Set the Kind to Ghost.

This will demonstrate both the invisible icon and the radio button's dot.

Additional information

Paul-Grogan commented 4 years ago

Just noticed that the Radio Selected Dot is already reported in https://github.com/carbon-design-system/carbon/issues/2485

wkeese commented 3 years ago

This is still broken, at least on Firefox. See https://www.carbondesignsystem.com/components/button/usage/.

Screen Shot 2021-01-14 at 8 50 30
tw15egan commented 3 years ago

I'm unable to reproduce this as well, here is the website running Firefox:

Screen Shot 2021-01-21 at 11 31 38 AM

Storybook version running Firefox:

Screen Shot 2021-01-21 at 11 30 04 AM

Storybook running Edge

Screen Shot 2021-01-21 at 11 30 24 AM
wkeese commented 3 years ago

TJ - Your screenshots are for PRIMARY buttons. This ticket is about GHOST buttons.

Having said that...

As for Edge, the original target of this ticket, I can't test the original site anymore because the "Variant Selector" (and also "Theme selector") dropdowns are currently broken (on Edge). The storybook site is working.

On Firefox, the original page is working, but on storybook, the "label + icon" case is working but the "icon only" case is not:

Screen Shot 2021-01-22 at 9 47 45

(Note that this is the PLAYGROUND page as that's the only way to get an icon-only ghost button.)

Icon only Ghost buttons do work after toggling on the experimental prefers-contrast switch from about:config... but since "label + icon" ghost button icons work without that flag, why not do the same thing for icon-only ghost buttons?

Note: This is all confusing since ghost buttons are getting borders in high contrast, which makes them seem like primary buttons.

tw15egan commented 3 years ago

@wkeese Not sure what's going on on your end. I'm able to navigate the original site (and use the variant selector) and choose the Icon-only ghost button:

image

image

(Firefox) image

tw15egan commented 3 years ago

The only thing I can think of is to ensure you're running the latest version of edge, and you've enabled High Contrast mode at the system level

image

wkeese commented 3 years ago

Oh sorry, I forgot that I was on Edge Legacy instead of Chromium-based Edge. My manager had a fantasy about supporting both of them. Unsurprisingly, Chromium Edge is working about the same as Chrome.

So to revise my earlier statements:

  1. On Firefox vanilla and react, for icon-only ghost buttons, this icon is invisible unless you turn on the prefers-contrast experimental flag from about:config, which triggers the CSS setting of fill: ButtonText. Confusingly, for primary buttons etc, the icon is visible without that flag, because you set fill: currentColor.
  2. Ghosts buttons in high contrast have a border. They shouldn't.
  3. On IE, on https://www.carbondesignsystem.com/components/button/usage/ live demo, can't adjust selectors, and the radio buttons aren't even displayed. React icon-only ghost button seems to be working though.