Open julien-deramond opened 1 year ago
I made some tests in a PR (not yet pushed) and applied #ccc
on input text
, select
and texarea
:
Some notes:
disabled
version of the form-helper
(new svg?)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?#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:
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
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?
Prototype for a new version of the disabled quantity selector using the same background than the rest of the disabled editable fields:
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/
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:
Prerequisites
Description
A change of text color is needed for disabled form controls for placeholders and/or values. They should use a light gray (
#ccc
).<select>
form control should be replaced by#ccc
(the arrow should have the same color)<input>
and<textarea>
should be replaced by#ccc
.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