Make "read-only" input more obvious

[zoharma]

Atlas Issue #146: For the i15-1 puck selection a component was made read-only (see discussion) but it's not obvious to a user that this is read-only at a glance. We should make read only components more visually distinctive

What is the difference between Disabled and Read-only?

In a nut shell:
• Disabled: field doesn’t apply right now (irrelevant). It is removed from tab order (skipped by assistive technologies), not submitted as data. Example: when a field is inactive, because you need to select something else before this one is relevant, or, when items are being loaded into a list (disabled until active).
• Read-only: value still matters, just locked. Stays focusable, announced, and in tab order. The user needs to read it, not just see it greyed out. With a normal text field,read-only means you can select it or copy text from it (with Select I'm not so sure). Example: the current state of an item is locked, but current selection is viable information, or, see the status assigned by another user, but you cannot change it yourself.

[VictoriaBeilsten-Edmands]

Yes, I agree. How are you thinking of making it more distinctive?

[zoharma]

I thought I had it done, but I think it was only for TextField input and not Select input.

Would that be sufficient? @DominicOram
For select, we should also not show the drop down arrow

[DominicOram]

I feel like greying it out is a more natural indication to the user but if we want to do this then that's fine

[zoharma]

@DominicOram
Here's a more full option, this is for input, but I think it can be exactly the same for select.

I used the same outline/bg as disabled, and the text is stronger, but not as much as enabled state - text.secondary for value and text.tertiary as label (instead of current primary, secondary)

[VictoriaBeilsten-Edmands]

The difference between enabled and read-only aren't obvious to me.

[DominicOram]

Yh, I also can't really tell the difference. Tbh, I'm not sure when we would use disabled vs. read-only. I understand from DiamondLightSource/atlas#133 (comment) that we do not want to use the disabled usecase for this as it won't be read by accessibility tools but what is the actual usecase for disabled then? When should I be using it?

[zoharma]

In a nut shell:
• Disabled: field doesn’t apply right now (irrelevant). It is removed from tab order (skipped by assistive technologies), not submitted as data. Example: when a field is inactive, because you need to select something else before this one is relevant, or, when items are being loaded into a list (disabled until active).
• Read-only: value still matters, just locked. Stays focusable, announced, and in tab order. The user needs to read it, not just see it greyed out. With a normal text field,read-only means you can select it or copy text from it (with Select I'm not so sure). Example: the current state of an item is locked, but current selection is viable information, or, see the status assigned by another user, but you cannot change it yourself.

p.s example in Deadalus: Read-only are the grey, enabled are the light blue: