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

In Windows High Contrast the Pagination's Next and Previous buttons are difficult to see #6767

Closed Paul-Grogan closed 3 years ago

Paul-Grogan commented 4 years ago

Detailed description

Describe in detail the issue you're having.

With Windows10's High Contrast mode enabled, the Pagination Control's Next and Previous buttons are difficult to see. In the Disabled, Hovered and resting states the borders don't surround the buttons. They just present on the left edge. In Disabled, the icon in the button is visible, but in all other states it is almost impossible to see.

Also noticed that the tooltip is disconnected from its anchor, and is aligned to the left of the button it belongs too. I've seen this elsewhere, so likely a separate problem?

Is this issue related to a specific component?

Pagination

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

Expected to see the buttons outlined so that they can easily be identified as buttons.

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?

Assuming the latest because I reproduced it on the Sample pages.

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 Pagination sample: https://www.carbondesignsystem.com/components/pagination/usage#live-demo

  3. Step three Examine the Next and Previous page buttons' states to observe the styling.

Additional information

joshblack commented 4 years ago

cc @dakahn does this align with our WHCM support model? It seems like edge is being used but it's the chromium version, does that fall under the chrome category then?

dakahn commented 4 years ago

I'm unsure how Chromium and Chrome differ in terms of how they handle OS level high contrast. I'll investigate this tomorrow and report back. All Edge is Chromium edge these days though

wkeese commented 3 years ago

I think we need to reopen this, or file a new ticket. There's no border around the buttons in Edge:

Screen Shot 2021-01-14 at 8 23 03

And worse yet, in Firefox I still can't see the icons:

Screen Shot 2021-01-14 at 8 24 52
tw15egan commented 3 years ago

@wkeese I'm unable to reproduce running the latest version, here's what I'm seeing:

Edge

Screen Shot 2021-01-21 at 11 28 27 AM

Firefox

Screen Shot 2021-01-21 at 11 28 39 AM
wkeese commented 3 years ago

Hmm, that's very strange. I assume Firefox is working for you because you've toggled the experimental prefers-contrast flag from the about:configpage. But on Edge I don't see a border, even after clearing my cache.

Screen Shot 2021-01-22 at 9 09 42

Do you have some experimental flag set for Edge too? Is your screenshot from https://react.carbondesignsystem.com/?path=/story/pagination--multiple-pagination-components or from a different URL, perhaps something local/private?

tw15egan commented 3 years ago

Very weird... I checked on both the website and the storybook and it showed up for me... I believe those are icon buttons, do the normal icon buttons not render for you as well?

tw15egan commented 3 years ago

@dakahn any chance you can take a look in HCM and see what you get in the storybook and the website for pagination?

wkeese commented 3 years ago

You're right that they are icon-only ghost buttons, and I just wrote a big comment about them in #6748. The behavior seems random.

PS: In normal contrast, ghost buttons don't have borders. Except, Pagination overrides ghost-button's non-border CSS, by putting a left border on each button. Ideally, both of those same rules (no border for ghost buttons, except a left border on next-page and previous-page) should apply even in high contrast. That's easier-said-than-done because technically ghost buttons have 1px transparent borders, which show up as real borders in high contrast. But I see no reason for that border, why not get rid of it?