Carbon: [AVT] The color of hint message could not be seen clearly on FF

[panlei080988]

Environment

Operating system : Win 10

Browser : Firefox ESR 52.9.0

Detailed description

What version of the Carbon Design System are you using?

What did you expect to happen?

What happened instead?

What WCAG 2.1 checkpoint does the issue violate?

Steps to reproduce the issue

1. Create an Internet Service on cloud
2. Click Reliability-> Global Load Balancers item
3. Click on Create pool button

Additional information

• Screenshots or code
  

[dakahn]

Hi. I need a more information to be able to help.

1. What version of Carbon Components are you using?
2. Can you give me a link to somewhere I can see this error?

[panlei080988]

@dakahn

1. What version of Carbon Components are you using?
   >>Where to see the version of the components?
2. Can you give me a link to somewhere I can see this error?
   >> Could you see the Internet Service on Cloud in your Account?
   https://test.cloud.ibm.com/catalog/services/internet-services
   Please visit this URL and to see if you could create a trial plan service on your account.
   If you can, please follow the steps in the defect "Steps to reproduce the issue" area.

[rkocheis]

@dakahn
This was originally opened by @panlei080988 against IBM Cloud Internet Services. Using that app you can probably see it in any placeholder text.

We're currently running with:

"carbon-addons-cloud": "^2.1.0",
"carbon-addons-cloud-react": "^1.3.2",
"carbon-addons-data-viz-react": "^1.21.0",
"carbon-components": "^9.48.1",
"carbon-components-react": "^6.50.2",
"carbon-icons": "^7.0.7",

I hope this helps.

[dakahn]

Great, thanks for the info. Yeah that totally seems unreadable even to me with 20/20 vision.

[panlei080988]

@dakahn Any update for this issue?

[dakahn]

@IBM/carbon-designers Is it cool to up the contrast on the placeholder text here to something closer to v10?

I don't have the bandwidth until next week, but please feel free to submit a PR 🙏

[vpicone]

Firefox applies a ~0.5 opacity to all placeholders. So explicitly setting the opacity would fix this. As a result, this issue isn't react specific and should likely be on the carbon-components repo.

[vpicone]

To addon on, I believe this was introduced here: https://github.com/IBM/carbon-components/commit/68ebbf08efda9c0e72eec7fe9b2f2faecf081e07#diff-7d060f0de834605549e53642b938c9c2

We would only set the placeholder color for webkit browsers and let firefox do it's own thing. Once we started explicitly setting the color for firefox as well, the 0.5 opacity rule made it illegible.

[aagonzales]

placeholder text should be using the V9 color token $text-03 to update the color will need to update the theme value associated with it.

@vpicone are you recommending we set the placeholder value using an opacity instead of a solid hex color?

[vpicone]

@aagonzales setting the opacity to 1 on placeholders would override firefox's browser-level setting.

We could do that as part of the reset, or in the placeholder rules. But I think it should probably be done in the carbon-components repo. Here's the rule working in firefox.

[dakahn]

Moved the issue as per @vpicone 's suggestion.

[carbon-bot]

:tada: This issue has been resolved in version 9.84.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[panlei080988]

@dakahn Hi, do you know how to verify this on Firefox? I have not seen the fix deployed on to Cloud yet.

[dakahn]

@panlei080988 you can test against the deployed preview in the closing PR
https://github.com/IBM/carbon-components/pull/2038#issuecomment-471479488

[panlei080988]

@dakahn Do you mean test on https://deploy-preview-2038--the-carbon-components.netlify.com?
If yes, I just want to confirm whether it will reflect on Firefox in future. I have to verify in firefox to close the origin issue.

[dakahn]

@panlei080988 yep!