JQuery Ui: Unerklärlicher Rahmen bei Klick auf Tabelement

  • Hey,


    ich nutze die Tabs von JQuery Ui und bin auf ein unerklärliches Verhalten der Tabelemente gestoßen. Wenn ich die Tabelemente anklicke wird ein schwarzer Rahmen um diese angezeigt. Wenn ich nun vom Tabelement aus woanders hinklicke ist dieser Rahmen wieder weg. Nun möchte ich diesen Rahmen ausblenden.


    Beim Klick auf ein Tabelement habe ich gesehen, dass die Klasse .ui-state-focus hinzugefügt wird. Ich habe dort alles mögliche versucht aber es hat keine Wirkung gezeigt. Der Rahmen lässt sich einfach nicht ausblenden. Ich bin da gerade ratlos, wie dies sein kann.


    Hat jemand von euch eine Idee wie ich diesen Rahmen ausblenden kann?


    Anbei findet ihr noch ein Bild vom Tabmenü.


    Ich freue mich von euch zu hören.


    Schöne Grüße,

    Stef


    jquery-ui tabs.PNG

  • Hi Jonas,


    ja das habe ich. Wie im Startbeitrag geschrieben wird dies nach meinen Prüfungen nur angezeigt, wenn auch die Klasse ui-state-focus auf dem Tabelement aktiv ist.


    Schöne Grüße

  • Hat jemand von euch eine Idee wie ich diesen Rahmen ausblenden kann?

    Ohne den Code der Seite zu kennen lässt sich da nur raten, ich würde aber mal darauf tippen dass die Antwort lautet: am besten garnicht. Vermutlich ist der Rahmen dazu da um die Tabs auch per Tastatur bedienbar zu machen - und wenn du den Rahmen entfernst, lassen sich die Tabs nicht mehr per Tastatur bedienen da nicht mehr erkennbar ist welcher Tab gerade den Focus hat.

  • Schönen guten Morgen,


    Ohne den Code der Seite zu kennen lässt sich da nur raten, ich würde aber mal darauf tippen dass die Antwort lautet: am besten garnicht. Vermutlich ist der Rahmen dazu da um die Tabs auch per Tastatur bedienbar zu machen - und wenn du den Rahmen entfernst, lassen sich die Tabs nicht mehr per Tastatur bedienen da nicht mehr erkennbar ist welcher Tab gerade den Focus hat.

    Das sehe ich so wie du. Dies wird jedoch von meinem Bekannten, für den ich die Webseite erstelle, gefordert.


    Dann versuchst du das über Dein custom-css zu überschreiben.


    Code
    1. .ui-state-focus {
    2. border: none !important;
    3. }

    Dies habe ich alles versucht. Funktioniert leider nicht.


    Schöne Grüße

  • Genau dies war die Lösung.

    Nein ist es nicht. Damit trittst du die Barrierefreiheit mit Füßen (nein, auch ein Auftraggeber ist kein Grund, Barrierefreiheit ist für Seiten afaik teilweise sogar Pflicht!) - deswegen habe ich auch nicht auf outline hingewiesen (das war in diversen Threads schon öfters für solche Rahmen verantwortlich), auch weil ich immer noch auf Code gewartet hatte …

  • Hey,

    Nein ist es nicht. Damit trittst du die Barrierefreiheit mit Füßen (nein, auch ein Auftraggeber ist kein Grund, Barrierefreiheit ist für Seiten afaik teilweise sogar Pflicht!) - deswegen habe ich auch nicht auf outline hingewiesen (das war in diversen Threads schon öfters für solche Rahmen verantwortlich), auch weil ich immer noch auf Code gewartet hatte …

    Danke dir für diese Information.


    Ich sehe es genau wie du: Barrierefreiheit ist auch bei Webseiten sehr wichtig, sodass eingeschränkte Menschen durch ihre Hilfsmittel diese auch noch gut bedienen können.


    Wenn der Auftraggeber jedoch sagt: "Nein, ich möchte die weg haben", kann ich auch nicht viel machen, weil ich dem zugestimmt habe, bevor ich wusste, dass es der Barrierefreiheit dient. Ich habe den Auftraggeber darüber informiert & es liegt in seiner Verantwortung, ob er seine Webseite barrierefrei oder nicht barrierefrei haben möchte.


    Schöne Grüße