Placeholder changes to input value in readonly input.

[rajesh2kumar96]

Fixes #34017

[ffoodd]

Thanks! Could you check there're no other occurrencies of such readonly inputs missing a value, either in the docs or the examples, please? If not, we'll take care of it 🙂

[coliff]

@ffoodd - yes, I think changes to the CSS are needed too. If you change the placeholder to a value then the displayed 'Readonly input here...' text is not the lighter grey as the Disabled inputs above.

Screenshot here by changing the HTML elements in Dev Tools (Edge 90 for Windows):

[ffoodd]

@coliff AFAIC that's acceptable since:

• readonly is meant to be read, so better contrast are fine,
• readonly and disabled aren't the same, so this helps reduce the confusion IMHO.
  However that's more of a UX decision. Maybe some accessibility insights too, @patrickhlauke?

@rajesh2kumar96 Were you able to check if there were other readonly inputs missing a value, both in our docs and in examples? If you can't, I'll try to.

[patrickhlauke]

going purely by WCAG, nominally disabled fields / controls are exempted from 4.5:1 (regular) / 3:1 (large) contrast requirements. readonly fields aren't. even for disabled fields, a ratio of at least 3:1 or better is still best practice, the closer it can get to 4.5:1, the better. beyond that, it's down to aesthetic choices.

[rajesh2kumar96]

@coliff AFAIC that's acceptable since:

• readonly is meant to be read, so better contrast are fine,
• readonly and disabled aren't the same, so this helps reduce the confusion IMHO.
  However that's more of a UX decision. Maybe some accessibility insights too, @patrickhlauke?

@rajesh2kumar96 Were you able to check if there were other readonly inputs missing a value, both in our docs and in examples? If you can't, I'll try to.

I will do this.

[rajesh2kumar96]

@ffoodd I changed readonly inputs with value. Please check.