Terra elements not meeting the Accessibility Requirements(Color Contrast issue)

[himawesome]

Bug Report

Description

We recently had undergone an accessibility check for our Fundal Height 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.

Steps to Reproduce

1. Link to our Fundal Height Component: https://pages.github.cerner.com/aeon-womenshealth/fundal-height-js/components/fundal-height-js/fundal-height-application
2. To view the focus, Click on any Carbon data point or Button Icons.
3. Terra Status View Errors are not available in Github Pages but issue can be identified here https://engineering.cerner.com/terra-ui/components/terra-status-view/status-view/status-view
4. Link to usage of Terra-Status-View: https://github.cerner.com/aeon-womenshealth/fundal-height-js/blob/b399da4b6ace54baa329120ff96981b4d05d28c5/src/fundal-height/components/FundalHeightView.jsx#L182
5. Link to usage of Terra-Button/Terra-Button-Group: https://github.cerner.com/aeon-womenshealth/fundal-height-js/blob/b399da4b6ace54baa329120ff96981b4d05d28c5/src/fundal-height/components/FundalHeightView.jsx#L228

Additional Context / Screenshots

For our Fundal Height React Component, we are using Terra Status View to provide the error banners with appropriate title. Here underlined is the color contrast issue that we discovered.

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

Expected Behavior

Expected Colors are mentioned in images provided above

Possible Solution

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

Environment

• Component Name and Version: Fundal Height JS 1.1.0
• Browser Name and Version: Chrome, IE
• Node/npm Version: Node 10.16.3/npm 6.9.0
• Webpack Version: ^4.42.0
• Operating System and version (desktop or mobile): Windows, Mac

@ Mentions

@ShettyAkarsh

[neilpfeiffer]

UX investigation and determination of corrections in progress.

[neilpfeiffer]

Moving this issue from terra-framework to terra-core, since terra-status-view and terra-button & terra-button-group are the key components mentioned. Will generate additional issues if other components are found to also be involved in other repos.

[neilpfeiffer]

@himawesome Closing this issue with the included details below from the UX Investigation:

Terra-Status-View

After consulting with Cerner Accessibility, both criterion rules 1.4.3 Contrast (Minimum) and 1.4.11: Non-text Contrast do not apply for the glyph icons provided in the terra-status-view, since they serve as purely decorative, and the salient information should be conveyed both the title and message prop of the component. Recommendation is add a title and update to the latest status-view (which provides a title by default), which the text will correctly pass all contrast requirements, and ignore checking on the glyph.

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)'

[neilpfeiffer]

Closing as both non-issue (terra-status-view) and being resolved by new replacement issues (terra-button).

[himawesome]

@neilpfeiffer Thank you for the explanation.

[himawesome]

Internal Tracking JIRA for this issue:
https://jira2.cerner.com/browse/BLRWH-10251