Improve the styling of read-only inputs

[jamesjacobs]

Currently, inputs with the readonly property/attribute are styled the same as disabled inputs which leads to user confusion. Investigate alternative styling.

Initial thoughts:

For consistency it might be better to stick to general input styling plus a visual indicator to denote read only.

Alternatively they could be styled as plain text, similar to how form.content appears but the markup should still be a form element (read-only inputs get submitted with form data and SRs will potentially skip plain text mixed in with form elements whilst in "forms mode". Read-only inputs can still gain focus so styling needs to accommodate that. Also need to allow for the potential of appended / prepended buttons and icons.

Needs more research and testing.

[Stanton]

🤷‍♂️

[jamesjacobs]

👍 Looks good to me. I've been back and forth a little bit on the border contrast but as text will always be present the border isn't the only visual indication of the hit area then it meets 1.4.11 Non-text contrast (see example under boundaries).

An alternative would be having just a bottom border or no border at all, but I prefer the dotted line.

2 questions:

• How does it look with appended/prepended icons/text? We have an appended "Copy" button in a few places across product.
• Re focus styling, we need to make sure it's a solid border on focus and not dotted.