Fix (input-file) unify cursor styling and prevent focus when disabled

[aTTiCuZ-CodingPage]

Behebung des inkonsistenten Cursor-Stylings im KolInputFile, sowie falsche Fokussierung im Zustand disabled

1. Problem: Im KolInputFile-Element wurde ein inkonsistentes Cursor-Styling beobachtet. Beim Bewegen des Mauszeigers über den nativen File-Upload-Button änderte sich der Cursor-Stil, während er im restlichen Bereich der Komponente konstant blieb.
Ursache: Die Komponente ist so implementiert, dass das native File-Input mit opacity: 0 unsichtbar gemacht wird, während es über den gesamten Container gespannt ist. Das native File-Input-Element enthält jedoch einen Button-Teil (::-webkit-file-upload-button und ::file-selector-button), der seinen eigenen Cursor-Stil hat, welcher nicht dem Rest des Input-Elements entspricht.

Lösung für Mauzeiger: Der Fehler wurde behoben, indem explizit der gleiche Cursor-Stil auch für die Button-Teile des nativen File-Input-Elements gesetzt wurde:

scss

&::-webkit-file-upload-button,
&::file-selector-button {
  cursor: pointer;
}

&:disabled,
&:disabled::-webkit-file-upload-button,
&:disabled::file-selector-button {
  cursor: not-allowed;
}

Diese Änderung stellt sicher, dass alle Teile des Input-Elements, einschließlich des nativen Upload-Buttons, denselben Cursor-Stil haben, sowohl im normalen als auch im deaktivierten Zustand. Dies führt zu einem einheitlichen Erscheinungsbild über die gesamte Komponente hinweg und verbessert so die Benutzererfahrung.
Hinweis: Beide Selektoren (::-webkit-file-upload-button und ::file-selector-button) werden für maximale Browser-Kompatibilität verwendet.

2. Problem: Zusätzlich wurde ein unerwünschtes Verhalten identifiziert: Auch wenn die Komponente als "disabled" markiert ist, kann sie durch Klick auf den unsichtbaren nativen Button fokussiert werden, was gegen die Erwartung an ein deaktiviertes Element verstößt.
Ursache: Die Komponente ist so implementiert, dass das native File-Input mit opacity: 0 unsichtbar gemacht wird, während es über den gesamten Container gespannt ist. Das native File-Input-Element enthält jedoch einen Button-Teil (::-webkit-file-upload-button und ::file-selector-button), der seine eigenen Cursor- und Interaktions-Eigenschaften beibehält, selbst wenn das übergeordnete Input-Element als "disabled" markiert ist.

Lösung für Fokus-Problem: Um sicherzustellen, dass deaktivierte KolInputFile-Komponenten nicht fokussiert werden können, habe ich folgende Änderung ergänzt:

scss

&:disabled,
&:disabled::-webkit-file-upload-button,
&:disabled::file-selector-button {
  cursor: not-allowed;
  pointer-events: none; // Verhindert jegliche Mausinteraktion
}

Diese Ergänzung verhindert, dass Maus-Events vom deaktivierten Input-Element registriert werden, wodurch sowohl Klicks als auch Fokussierung verhindert werden.