Color Contrast - Color contrast criteria is not met for Information icon focus

[gp065047]

Bug Report

Description

We recently had undergone an accessibility check for our Partogram React Component. We discovered some accessibility problems with respect to color contrast ratios of some of the consuming Terra components. The component is Integrated into the Cerner Millennium App -Powerchart.

Color Contrast - Color contrast criteria is not met for Information icon focus

Steps to Reproduce

1. Link to our Partogram Component - https://pages.github.cerner.com/aeon-womenshealth/partogram-js/components/partogram-js/partogram
2. Link to terra icon - https://engineering.cerner.com/terra-ui/components/terra-icon/icon/icon
3. Link to usage of terra-icon - https://github.cerner.com/aeon-womenshealth/partogram-js/blob/aa9fc3f9c327fb0b69f70de4030f42effd98ccf6/src/components/overview/LaborOnset.jsx#L141

Additional Context / Screenshots

For our Partogram React Component, we are using Terra information icon. Here is the color contrast issue that we discovered.

Focus colors for Terra-icon also does not meet the color contrast ratio.

Expected Behavior

Expected Colors are mentioned below
Recommendations:​
Foreground: #0065A3​
Background:# FFFFFF​
Current Contrast Ratio: 6.2:1​
Current Color Scheme : ABC1234​

Possible Solution

The color scheme for all the terra components can be revisited & ensure that it meets UX guidelines

Environment

• Component Name and Version: partogram js 4.6.0 (overview component)
• Browser Name and Version: Chrome, IE
• Node/npm Version: [e.g. Node 8/npm 5] - Node v10.18.0 /npm v6.13.6
• Webpack Version: v4.41.6
• Operating System and version (desktop or mobile): Windows, Mac

@ Mentions

@ShettyAkarsh

JIRA for reference - https://jira2.cerner.com/browse/BLRWH-9331

[neilpfeiffer]

@gp065047 Closing this issue as this item has already been captured and logged in the Terra backlog. It is not Terra-Icon which is failing your accessibility check, since Terra-Icon does not have a focus border and is not interactive by itself, but rather it is Terra-Button that is currently not passing a new criterion for the Focus-Visible state, which has already been captured by a similar previous issue: terra-core #3168

Pulling a quote from the #3168 (comment) on that issue:

Terra-Button & Terra-Button-Group

Your investigation is correct and found that terra-button as well as many other components do not pass the new WCAG 2.1 (Level AA) criterion 2.4.11: Focus Visible (Enhanced) which raises the WCAG 2 (Level A) 2.4.7: Focus Visible criterion standard of when a user interface element displays a visible keyboard focus that it's color contrast ratio be at least 3:1 or thickness of at least 2 CSS pixels. Terra components were not originally made with WCAG 2.1 (AA) in mind, and we are treating all updates as future enhancements we will work through.

We've logged a series of new issues you can follow in place of this one:

• terra-toolkit #443 - this will investigate and update how we test for WCAG21aa generally, potentially disable or switch the failures to warnings until enhancements can be done in all Terra component.
• terra-core #3174 - [terra-core] Update Keyboard Focus styles to pass '2.4.11 Focus Visible (Enhanced)'

I will link this issue and include these details as well, so you can follow terra-core #3174 in the place of this one as what will be resolving your issue.

[neilpfeiffer]

Removing the bug label, and Closing as Duplicate, being resolved by new replacement issue #3174 that solves for terra-button.