carbon-design-system / carbon

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

[a11y]: [Windows OS High Contrast Mode]: 'Select' drop down menu not picking up right color #16299

Open nkn2022 opened 6 months ago

nkn2022 commented 6 months ago

Package

carbon-components-react

Browser

Chrome

Operating System

Windows

Package version

7.59.13

React version

16.14.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

Our product is using "Select" and "Dropdown" components to server as selectors. In high contrast mode, the "Select" component does not seem to pick up right color for the user defined high contrast mode. It shows white background when dark mode is selected. The "Dropdown" component seems to be working correctly. I checked with the Accessibility@IBM team and understand having such mixed modes fails the compatibility requirement for running in Windows OS High Contrast mode/theme. So this will need to reviewed and fixed.

Example(Select): https://v7-react.carbondesignsystem.com/?path=/story/components-select--default

image

Example(Dropdown) - https://v7-react.carbondesignsystem.com/?path=/story/components-dropdown--playground

image

WCAG 2.1 Violation

1.1.1 Non-text Content

Reproduction/example

NA

Steps to reproduce

Turn on High Contract Mode on Windows. Use the storybook links provided in the description above.

Code of Conduct

nkn2022 commented 2 months ago

Also an issue in Carbon 11 - https://react.carbondesignsystem.com/?path=/docs/components-select--overview

image