Color Contrast Issue for orion-fusion theme in IE.

[saket2403]

Bug Report

Description

On running wdio for orion fusion theme in IE. Few components are getting color contrast issue-:

• Date Picker
• Date-Time-Picker
• Time-Input

Steps to Reproduce

1. Run wdio command for fusion theme in IE.

"wdio-ie": "tt-wdio --gridUrl='grid314.test.devcernerpowerchart.com'  --browsers ['ie'] --locales ['en-US'] --themes ['orion-fusion-theme'] --spec packages/terra-time-input/tests/wdio/*-spec.js"

Additional Context / Screenshots

Error Log

Time Input

"description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
  "help": "Elements must have sufficient color contrast",
  "helpUrl": "https://dequeuniversity.com/rules/axe/3.5/color-contrast?application=axeAPI",
  "id": "color-contrast",
  "impact": "serious",
  "nodes": [
    {
      "all": [],
      "any": [
        {
          "data": {
            "bgColor": "#fefd9a",
            "contrastRatio": 4.26,
            "expectedContrastRatio": "4.5:1",
            "fgColor": "#767676",
            "fontSize": "9.0pt (12px)",
            "fontWeight": "normal",
            "messageKey": null
          },
          "id": "color-contrast",
          "impact": "serious",
          "message": "Element has insufficient color contrast of 4.26 (foreground color: #767676, background color: #fefd9a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
          "relatedNodes": [
            {
              "html": "<div class=\"TimeInput-module__time-input___T4wlC TimeInput-module__is-incomplete___3O5ye\">",
              "target": [
                ".TimeInput-module__time-input___T4wlC"
              ]
            }
          ]
        }
      ],
      "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.26 (foreground color: #767676, background color: #fefd9a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
      "html": "<input name=\"terra-time-hour-time-input\" class=\"Input-module__form-input___2z_wq TimeInput-module__time-input-hour___2VQ6_\" aria-label=\"Hours\" type=\"text\" size=\"2\" maxlength=\"2\" placeholder=\"hh\" pattern=\"\\d*\" value=\"\">",
      "impact": "serious",
      "none": [],
      "target": [
        ".TimeInput-module__time-input-hour___2VQ6_"
      ]
    },
    {
      "all": [],
      "any": [
        {
          "data": {
            "bgColor": "#fefd9a",
            "contrastRatio": 4.26,
            "expectedContrastRatio": "4.5:1",
            "fgColor": "#767676",
            "fontSize": "9.0pt (12px)",
            "fontWeight": "normal",
            "messageKey": null
          },
          "id": "color-contrast",
          "impact": "serious",
          "message": "Element has insufficient color contrast of 4.26 (foreground color: #767676, background color: #fefd9a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
          "relatedNodes": [
            {
              "html": "<div class=\"TimeInput-module__time-input___T4wlC TimeInput-module__is-incomplete___3O5ye\">",
              "target": [
                ".TimeInput-module__time-input___T4wlC"
              ]
            }
          ]
        }
      ],
      "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.26 (foreground color: #767676, background color: #fefd9a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
      "html": "<input name=\"terra-time-minute-time-input\" class=\"Input-module__form-input___2z_wq TimeInput-module__time-input-minute___1elGu\" aria-label=\"Minutes\" type=\"text\" size=\"2\" maxlength=\"2\" placeholder=\"mm\" pattern=\"\\d*\" value=\"\">",
      "impact": "serious",
      "none": [],
      "target": [
        ".TimeInput-module__time-input-minute___1elGu"
      ]
    }
  ],
  "tags": [
    "cat.color",
    "wcag2aa",
    "wcag143"
  ]
}

Possible Solution

Environment

• Component Name and Version:
• Browser Name and Version: IE.
• Node/npm Version: [e.g. Node 8/npm 5]
• Webpack Version:
• Operating System and version (desktop or mobile):

@ Mentions

[emilyrohrbough]

related to/duplicate of #1193

[ryanthemanuel]

Good call @emilyrohrbough. Closing this as a duplicate