Read only form controls

[shixiedesign]

A read only variant of Text input is suggested here: carbon-design-system/carbon-contribution#13 (comment)

The “Disabled” option is not viable, as the label and entered data is not accessible. Proposal is to simply remove the line at the base of the "Filled" version of the component, so that it closely matches with the Disabled component, but passes accessibility.

Overview of component (updated May 13)

• Read-only variant will be keeping underline and dropping the background of the field. We need the underline for low-vision users to recognize this as a text field. Also loosing the underline makes the element a button-style, which would be confusing.
• Not moving the text position after all. Keeping text 16px away from left of border helps with preserving the form structure.
• Regular text cursor and allows text selecting
• Add not-editable icon, icon in PR Add edit--off icon svg & update metadata.yml #2710
• Optional tooltip when hovering not-editable icon, to provide reason for the field being read-only
• Overflow text in the field will show in tooltip on hover
• Should be considered a state, possible readonly attribute
• Follow the standard readonly attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly

Design spec (updated May 13)

In context explorations:

[chrisconnors-ibm]

awaiting specification.

[lovemecomputer]

i have a couple of questions for implementation:

• semantic: if this is a unique state, should we think of it as being labelled read-only/readOnly?
• design: have we decided on design spec for this?

[elizabethsjudd]

From my understanding the implementations should follow the standard readonly attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly