Terra-core: [terra-form-select] Accessibility test failing with 5.33.0 and 5.34.0 on default empty display '- Select -'

[FloraChenCerner]

Bug Report

Description

With 5.33.0 and 5.34.0, we are seeing accessibility error in our wdio tests around default empty value in form select.

"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #85898a, background color: #ffffff, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1",

"html": "<div id=\"terra-select-screen-reader-placeholder-35\" class=\"_Frame-module__placeholder___NSEaz\">- Select -</div>",

See the failing build job for details: https://jenkins.cerner.com/ion/blue/organizations/jenkins/problems%2Fion-conditions-js/detail/master/39/pipeline/73

Steps to Reproduce

1. In form-select set allowClear to true
2. In wdio test call Terra.it.validatesElement()
3. Run wdio test and see the error

Additional Context / Screenshots

Expected Behavior

The test should be passing

Possible Solution

Environment

• Component Name and Version: terra-form-select 5.33.0 5.34.0
• Browser Name and Version: chrome
• Node/npm Version: [e.g. Node 8/npm 5] Node 8.4/npm 5
• Webpack Version: 4
• Operating System and version (desktop or mobile): desktop

@ Mentions

@StephenEsser

[StephenEsser]

Looking into this a little more it appears this commit updated the placeholder color from a hex value to an rgb value with an opacity. This seems like the most likely cause of the recent accessibility violations.

We'll want to reach out to UX and determine if we want to revert the change or keep the change and have consumers ignore the rule for tests that include a placeholder within the screenshots. Talking briefly with UX about this issue it sounds like placeholder text is considered non-interactable content and does not fall into the 4.5:1 contrast ratio requirement. So although it fails during axe-core testing it is not technically in violation.

cc: @neilpfeiffer

[mjhenkes]

I would like to see this fixed, I know that technically the placeholder text does not have to meet the contrast ratio but by ignoring and thereby having our consumers ignore the warning we're normalizing behavior of ignoring a11y errors.

If there is some other way to inform axe that the contrast ratio for this field is different, I'd be fine with the change.

[neilpfeiffer]

Temporary fix: for now - we'll change the placeholder color in terra-form-select to
rgba(21, 33, 41, 0.61) which will color sample very similar to the previous #70787c

Long term fix: we'll be removing all placeholders from all form elements, issue logged here: https://github.com/cerner/terra-core/issues/2712

cc: @BenBoersma

[ShettyAkarsh]

closed in #2713