Read-only Field component

[rolfsmeds]

A component for non-editable key-value pairs consisting of a label and a value, for use e.g. in read-only forms.

• Labels above and aside variants
• Databindable (like input fields)
• Nice-to-have: built-in formatting support for numbers, datetime...)

Labels above:

(This should work nicely out of the box in FormLayout, and align appropriately with input fields)

Labels aside:

(note: labels-aside mode should be considered together with labels-aside support in input fields)

Semantics

Could be as simple as

• ReadonlyField root (generic)
  • label
  • span (value), with aria-labelledby reference to label

Or we could consider using <data> element for the value, and have the possibility to provide a machine-readable value in addition to the rendered value, possibly also switching that to a <time> element for datetime values.

Open questions

Is ReadOnlyField / vaadin-read-only-field a good name?

Could consider having a secondary text / slot, somewhat similar to the helper-text below input fields, e.g. for use cases such as this

[DiegoCardoso]

I was playing around with this proposal to see if I understood how the component should behave in terms of accessibility. So, I came up with this prototype (https://codepen.io/diegocardoso/pen/BaXpyWZ). What I could see is that if aria-labelledby would probably need to reference both the <label> and the <span> elements, otherwise it will be skipped in the announcement. Here's a recording of the different approaches in the test using VO+Safari:

read-only-sr.mp4

I used role=group in some cases to see if it would make any difference, but nothing could be noted for VoiceOver. Not sure if there's a better role to be used instead (or none).

[rolfsmeds]

Ah, indeed, I added that "with aria-labelledby reference to label" to the wrong "node" in the DOM proposal, it should be on the span.

[DiegoCardoso]

Even in that case, if the <span> has an aria-labelledby attribute, its content ends up ignored in favor of the element it references. So it would need to reference to itself.