enhancement
major
minor
major
minor
critical
#29665
TL Views: a click into a rich-text field with a hidden label focuses the editor's Bold button, so the typed text is lost
Problem
A click into the text area of a rich-text (HTML) field whose label is hidden (label-position="hide-label") does not put the caret into the editor: the focus lands on the editor toolbar's "Fett" (Bold) button, and whatever is typed next goes nowhere (and the click may toggle Bold). The field can only be written after focusing the editable area by script. Seen in the TL Development app (snapshot build 42) on the comment composer and on the ticket description in edit mode.
Cause
TLFormField.tsx renders the input area of a field with a hidden label as
<label className="tlFormField__input">
<span className="tlVisuallyHidden">{label}</span>
<TLChild control={field} />
</label>
(the accessible name of #29608). The HTML label activation behavior forwards a click on any non-interactive content of a <label> to the label's *labeled control* — without a for, its first labelable descendant. In a rich-text editor that is the first toolbar <button>, not the contenteditable area (which is not labelable at all). Every compound input with a button before its actual input is affected the same way.
Expected
A click inside a field's input goes where it was aimed. The accessible name of a field with a hidden label is supplied without a wrapping <label> — e.g. aria-label/`aria-labelledby` on the input control, or a <label for> pointing at the real input — so no click is redirected.
Lösung
- Der Eingabebereich eines Formularfelds ist immer ein einfacher Container, kein <label> mehr; ein Klick in das Eingabeelement landet dort, wo er hinzielt.
- Formularfeld und Eingabe-Control verweisen über IDs aufeinander (Bridge-Modul field-label.ts, Hook useFieldLabelProps): Das Control im Eingabebereich des Felds meldet die ID seines eigentlichen Eingabeelements und setzt darauf aria-labelledby auf den Beschriftungstext. Tiefer verschachtelte Controls (z.B. Eingaben in Tabellenzeilen innerhalb eines Felds) übernehmen die Beschriftung nicht. Umgesetzt für Text, Passwort, Zahl, Datum, Farbe, Schieberegler, Checkbox, Auswahl, Dropdown, Icon-Auswahl, Auswahlgruppen, Werteliste, Datei-Upload, mehrsprachige Eingaben, Rich-Text-, Code- und TL-Script-Editor. Das gilt für verborgene wie für sichtbare Beschriftungen – bisher war ein Eingabefeld mit sichtbarer Beschriftung für Hilfstechnologien gar nicht benannt.
- Eine sichtbare Beschriftung bedient ihr Eingabeelement: Sie ist ein <label for> auf das gemeldete Element, ein Klick darauf schaltet also eine Checkbox um bzw. fokussiert ein Text-, Auswahl- oder Datumsfeld. Wo das Ziel nativ nicht beschriftbar ist (Rich-Text-Bereich, Radio-Gruppe, Combobox, Werteliste, Auswahl-Button), fokussiert der Klick das Element selbst bzw. darin die gewählte Option, sonst das erste wertaufnehmende Eingabeelement – ohne eine Option zu wählen oder einen Button auszulösen.
- Eine verborgene Beschriftung ist ein unsichtbarer Text neben (nicht um) dem Eingabebereich.