enhancement
major
minor
major
minor
major
#29608
TL Views: value-input mit Platzhalter, zugänglicher Name bei verborgenem Label, bedingte Anzeige von Elementen mit visible-if
Problem
Gefunden beim Einbau einer Ticket-Suche in die App-Bar: ein <value-input type="tl.core:String" value="ticketSearch"> mit <on-submit>-Kette in den <children> der <app-bar>.
- Kein Platzhalter. <value-input> kennt label und label-position, aber keinen Platzhalter. Ein Suchfeld, das seinen Zweck im Feld selbst nennt — die übliche Form in einer App-Bar —, lässt sich nicht deklarieren.
- hide-label lässt das Feld ohne zugänglichen Namen. Mit label-position="hide-label" wird weder ein sichtbares Label noch ein aria-label gerendert; das Eingabefeld hat für assistive Technik keinen Namen.
- Ein Element lässt sich nicht ohne Deck in voller Größe bedingt anzeigen. Nur ein Kommando trägt eine <executability>; ein Element hat keine Sichtbarkeitsregel. Die einzige deklarative bedingte Anzeige, <switch>, rendert ein Deck, das width: 100%; height: 100% fest vorgibt: inline in der App-Bar belegt es 823 von 1600 px und quetscht Brotkrume und Kontoanzeige zusammen. Ein Suchfeld nur für angemeldete Sitzungen muss deshalb auch der anonymen Sitzung gezeigt werden.
Lösung
Platzhalter. Der Platzhalter ist eine Eigenschaft der Feldbeschreibung (FieldSpec) und wird an einer Stelle an das erzeugte Eingabe-Control gegeben. Damit kann jede Seite, die ein Feld baut, einen Platzhalter mitgeben, ohne dass jedes Control ihn einzeln verdrahtet. Deklariert wird er als <value-input placeholder="…"> (ein mehrsprachiger Text). Text- und Zahleneingabe zeigen ihn.
Zugänglicher Name bei verborgenem Label. Ist das Label verborgen, umschließt die Feldumrandung die Eingabe mit einem <label>-Element, dessen Text optisch verborgen, für assistive Technik aber vorhanden ist. Das Feld erhält seinen Namen über die HTML-eigene Zuordnung — für jedes Eingabe-Control zugleich —, und ein Klick auf den Bereich setzt den Fokus in die Eingabe. Damit kein <label> in einem <label> steht, benennt die Radio-Darstellung eines booleschen Werts ihre Optionen über id/`for`, statt sie zu umschließen.
Bedingte Anzeige. Das Deck gibt seine feste Größe von 100 % auf und folgt dem Füll-Vertrag: es füllt seinen Container, solange der angezeigte Inhalt ihn füllt, und wächst sonst mit seinem Inhalt. Inline — etwa in der App-Bar — nimmt es damit nur den Platz, den sein Inhalt braucht. Zusätzlich gibt es das Element <visible-if expr="…" input="…">: es zeigt seinen Inhalt, solange das TL-Script-Prädikat über dem Wert des Eingabekanals wahr ist, und nichts sonst — die Kurzform für eine einzelne Bedingung, die bisher als <switch> mit einem <case> geschrieben werden musste.
Das Ende der Füll-Kette. Der Rumpf einer <panel> und das <inset> sind die Boxen, an denen die Füll-Kette endet, waren aber keine Flex-Container: ein Inhalt, der füllen wollte, konnte seine Höhe dort nicht auflösen und fiel auf seine Inhaltshöhe zurück. Solange das Deck seine 100 % fest vorgab, fiel das nicht auf. Beide sind nun die beschriebene begrenzte Flex-Spalte: ein füllender Inhalt nimmt die angebotene Höhe, ein Inhalt eigener Größe behält sie, und der Rumpf scrollt, was nicht hineinpasst. Damit füllt auch ein Dokument- oder PDF-Viewer und eine Registerleiste im Rumpf einer Kachel ihren Platz — was vorher schon nicht der Fall war.
Nicht Teil dieses Tickets: die Darstellung eines sichtbaren Feld-Labels auf dem farbigen Hintergrund der App-Bar.