[a11y]: Pagination dropdown white-on-white for g90 and g100 themes on Windows

[wkeese]

Refs #9112

Package

carbon-components

Browser

Chrome

Operating System

Windows

Package version

10.43

Automated testing tool and ruleset

None, I don't think EAAC can check select dropdowns?

Assistive technology

no

Description

When you open one of Pagination's dropdowns (either items per page, or page number) and then move the mouse away, the dropdown becomes white-on-white:

NB: This only happens with a dark carbon theme (g90 or g100), and on Windows.

When hovering a <select> , Carbon sets the background color to rgb(53, 53, 53) and things work fine.

But when not hovering, Carbon sets each <select>'s background-color to transparent, which (non-intuitively) makes the dropdown gray on the Mac, but white on Windows.

This seems to fix it:

.#{$prefix}--select-option {
	background: $background-hover;
}

WCAG 2.1 Violation

Minimum contrast

CodeSandbox example

https://carbon-components-react.netlify.app/?path=/story/components-pagination--pagination

Steps to reproduce

Access https://carbon-components-react.netlify.app/?path=/story/components-pagination--pagination and switch the carbon theme to g100.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

Looks like this is currently an issue with the inline variant of Select in Firefox as well

[wkeese]

Thanks! I confirm that https://carbon-components-react.netlify.app/?path=/story/components-pagination--pagination is working, including g90 and g100.