Change text color of disabled form controls

[julien-deramond]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Description

A change of text color is needed for disabled form controls for placeholders and/or values. They should use a light gray (#ccc).

• The placeholder of a disabled <select> form control should be replaced by #ccc (the arrow should have the same color)
• The values and placeholders of disabled <input> and <textarea> should be replaced by #ccc
• Labels color should also be gray as described in the Forms design artboard in the DSM.
  • Such change could be done associated with .is-disabled on the form but what about some disabled form controls within a regular form? This kind of behavior must be clarified with the designers before starting the development
• Be careful with the global consistency of all disabled form controls that must be checked!

[MewenLeHo]

I made some tests in a PR (not yet pushed) and applied #ccc on input text, select and texarea:

Some notes:

• we will need a disabled version of the form-helper (new svg?)
• even if the form-helper is disabled you can display the associated tooltip by hovering the button, you just don't have the hand cursor. Is it a problem?
• we need something else than #ccc because of the poor contrast : light grey on light light grey is an accessibility fail (*).

*: a disabled input is an inactive element so yes normally contrast should not be an issue. But an inactive element in a form can normally become active when a certain action is performed by the user (validate consent by clicking on a checkbox for instance). So one can argue that the user will need to know what is inactive in order to understand how to activate it if needed and that's why inactive elements in a form must be accessible too. In a context of a form the fact that a form element is currently disabled is an information and we need to convey informations to all users including users with disabilities. (credit to @Aniort for the demonstration).

To do:

• test with all possible form elements: range, input number, QS, radios, checkboxes, input file, etc.

[MewenLeHo]

Side note: we can add a .is-disabled CSS class on the label of the disabled file input.

Edit: will be tackled by https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2222

[MewenLeHo]

Whole page with all (?) possible form elements:

@louismaximepiton raised a question about the disabled quantity selector: since it has an editable field, should it turn grey when disabled?

[MewenLeHo]

Prototype for a new version of the disabled quantity selector using the same background than the rest of the disabled editable fields:

[julien-deramond]

The final prototype made by @MewenLeHo is in the following closed PR https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2257 which can be reopened when the development starts. Live preview: https://deploy-preview-2257--boosted.netlify.app/docs/5.3/examples/form/

[julien-deramond]

Note for future selves when we'll get back to this PR. Dark mode introduced some new concepts, and this PR should probably take that into account. For example: