Read-only / readonly text field and number field do not have focus states

🐛 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]

Locate the nimble-text-field and nimble-number-field entry points and their focus-state tests or styles. Reproduce the issue by tabbing to each empty, read-only field, then verify that both show a clear visual focus indication without relying on selected text.