Make "read-only" input more obvious

[Atlas Issue #146:](https://github.com/DiamondLightSource/atlas/issues/146) For the i15-1 puck selection a component was made read-only ([see discussion](https://github.com/DiamondLightSource/atlas/pull/133#discussion_r3721451891)) 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.

i15-1 puck-selection component から始め、既存の read-only 動作について Atlas Issue #146 とリンクされた PR の議論を確認します。read-only コンポーネントを disabled として扱わずに視覚的に区別できるようにし、その後、値が引き続きフォーカス可能で、読み上げられ、タブ順序に含まれていることを確認します。

索引モデルが issue の本文から書いたものです。