Read-only / readonly text field and number field do not have focus states #2879
Description
🐛 Bug Report
The read-only state of the nimble-text-field and the nimble-number-field are focusable (which is correct), but there is a clear focus-visible state. When there is text in the input, the text becomes highlighted when the control gets focus, but when the value is empty, there is no visual indication that the control is focused.
💻 Repro or Code Sample
🤔 Expected Behavior
When the nimble-text-field or nimble-number-field is read-only and focused, there should be a clear visual indication that the control is focused.
😯 Current Behavior
The only indication that a read-only nimble-text-field or a read-only nimble-number-field has focus is that the text within it gets highlighted. However, this is not enough of an indication that the field is focused, particularly when the text field is empty.
💁 Possible Solution
🔦 Context
Currently tabbing to a read-only text field makes it looks like focus becomes lost on the page.
🌍 Your Environment
- OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
- Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
- Version [e.g. 1.8.0]