Change color of disabled form controls foreground

[isabellechanclou]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

This PR was created when working on issue #1199 and its PR #1614.

Description

Reviewing all Docs components to identify where to add design callout messages, designers told us that the placeholder of a disabled select element could remain displayed but that the color of the placeholder text as well as the color of the arrow of the select should be replaced by this #ccc color.

Motivation & Context

Respecting the colors of the design specifications and then delete a design callout message that becomes useless.

Types of change

• Bug fix (non-breaking which fixes an issues)

Live previews

• https://deploy-preview-1797--boosted.netlify.app/docs/forms/select#disabled

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with responsive display

Development

• My change follows the developer guide
• I have added JavaScript unit tests to cover my changes

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• My new component is added in Storybook
• My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	d2b68e7
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64f733abc5553d0007abfc99
😎 Deploy Preview	https://deploy-preview-1797--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[louismaximepiton]

Haven't reviewed it right now but is there any spec for this ?

[isabellechanclou]

Franco said that specs were available in zeplin I guess, and told me to replace the color of the placeholder text + the color of the arrow by #ccc. I didn't found the specs he told about...

[louismaximepiton]

Good til the design is fine with it.

[julien-deramond]

TBH this modification seems very weird to me.

In our main branch, this is the rendering of disabled input and select:

In this PR:

Select rendering is supposed to be based on the input one, so the discrepancy sounds strange to me. Moreover, the text and the arrow are almost invisible (not very accessible IMHO).

Thoughts @Franco-Riccitelli?

[louismaximepiton]

Maybe a grey #999999 would be better here ?

[Franco-Riccitelli]

This looks good. No issues.
The font colour is very light against the grey form field, but I don't believe it's a problem for accessibility as it is an inactive state.
We could possibly look to update this grey on grey colour to #999999 in future updates, but it would impact our font style colours, so I would prefer to keep it like this for now.

[isabellechanclou]

The font colour is very light against the grey form field, but I don't believe it's a problem for accessibility as it is an inactive state.

I confirm it is not a problem for accessibility because it is an inactive state.

[julien-deramond]

Here's a rendering comparison between the main branch (left) and this PR (right):

The rendering of the text (the value) in a disabled <input>/<textarea> and a disabled <select> is now different.
Are we sure we want this @Franco-Riccitelli? TBH it feels off to me to have these 2 different renderings.

[julien-deramond]

Confirmed by @Franco-Riccitelli: the color must be the same for all form controls and it's the new light gray used for <select>s in this PR.
So this PR is a bit larger than expected and needs to be updated.

Label color when form controls are disabled should also be gray.

Started some work via d2b68e7 but it's not finalized.

This PR will require another design review with the temp form page to check consistency between disabled form controls rendering.

This PR needs an update of its descriptioN.

[julien-deramond]

Closing this PR in favor of a more complex issue to tackle and to specify: #2221