public-ui / kolibri

The accessible HTML-Standard

https://public-ui.github.io

European Union Public License 1.2

157 stars 33 forks source link

🐞 Bug: Verschiedene Eingabefelder können nicht mit Enter abgeschickt werden #6135

Closed sdvg closed 4 months ago

sdvg commented 6 months ago

Note

[x] Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgebe.

Fehlermeldung

Die Eingabefelder-Komponenten haben überwiegend ein Feature umgesetzt, das dafür sorgt, dass beim Drücken von Enter das umgebende Formular abgesendet wird.

Folgende Komponenten unterstützen dies noch nicht:

select
input-color
input-file
input-radio

Für die Komponenten sollte jeweils geprüft werden, wie das native Verhalten der Browser aussieht, wenn das jeweilige Eingabefeld fokussiert ist und Enter gedrückt wird. Wichtig ist auch, dass das Formular nicht ungewollt, z.B. der Auswahl einer Select-Option, abgeschickt wird.

Zusätzlich in diesem Ticket:

Form associated elements werden für Radio-Elemente nicht korrekt gesetzt. Das Attribut checked fehlt.

deleonio commented 6 months ago

Hi @sdvg, das können wir gerne überprüfen. Das Absenden via Enter unterstützen nicht alle nativen Formularfelder, da das Enter zu Auswahlsteuerung gehört. Daher sind nicht alle Felder mit Enter absendbar.

select - Enter sendet Formular ab
input-color - Enter öffnet Farbauswahl
input-file - Enter öffnet Dateiauswahl
input-radio - Enter sendet Formular ab

👍 Das radio und das select lässt sich noch mit Enter absenden!

Link: https://stackblitzstartersw4glmy-vgiz--8080--c9a8a620.local-credentialless.webcontainer.io/

deleonio commented 6 months ago

Umsetzung in Anlehnung an: https://github.com/public-ui/kolibri/pull/6136/files

[x] Das Absenden mittels Enter beim radio ergänzen.
[x] Das Absenden mittels Enter beim select ergänzen.

sdvg commented 4 months ago

Für einen Lösungsansatz siehe: https://6626825ec5df6d0d22ca2afe--kolibri-public-ui.netlify.app/#/scenarios/static-form

Hier wurde nur für das Select ein weiteres, verschachteltes Formular innerhalb des Shadow DOM umgesetzt. Das erlaubt uns zuverlässig, innerhalb der Komponente implicit form submissions zu erkennen.

Die Verwendung von verschachtelten Formularen sollte aus Sicht der Barrierefreiheit getestet werden, bevor wir mit diesem Ansatz fortfahren.