[RFC][fields] HTML structure of the input

[flaviendelangle]

Current structure

The field currently has a single HTML <input /> tag that contains the whole value (the whole date for DateField / TimeField .... and the whole date range for SingleInputDateRangeField, ...)

The limitation on accessibility are forcing us to consider other approaches and the resulting trade-offs

Possible structures

One <input />

  <input value="MM/DD/YYYY" />

• 👎 Poor accessibility

• 👎 A lot of very custom JS behavior to handle our section-based editing

• 👎 The value in the input is not exactly the expect one (can have RTL UTF-8 characters or the one for no leading-zero)

One <input /> per section

<div>
  <input value="MM" />
  <span>/</span>
  <input value="DD" />
  <span>/</span>
  <input value="YYYY" />
  <input type="hidden" value="MM/DD/YYYY" />
</div>

• 👎 Can't benefit from customization of TextField (people that want to customize all their input throughout their application would have to re-do the customization on our fake textfield)

• 👎 Can't select the whole value to copy / paste (to be checked more thoroughly)

One <span /> per section with contenteditable={true}

After looking at the examples on MDN, not sure this brings any major benefit, but to be tested.

<div>
  <span contenteditable={true}>MM</span>
  <span>/</span>
  <span contenteditable={true}>DD</span>
  <span>/</span>
 <span contenteditable={true}>YYYY</span>
 <input type="hidden" value="MM/DD/YYYY" />
</div>

• 👎 Can't benefit from customization of TextField (people that want to customize all their input throughout their application would have to re-do the customization on our fake textfield)

• 👎 Can't select the whole value to copy / paste (to be checked more thoroughly)

[flaviendelangle]

Closes by #10649

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.