Hauptnavigation Rahmen (Focus) bei Mouse hover und click

Shopware 6 (German)
1

Hallo,
die neue Funktion für die Barrierefreiheit scheint mit der Tastur sehr gut zu funktionieren, bei Bedienung mit der Mouse hätte ich allerdings diese ganzen Rahmen bei hover, focus und click gerne weg! Hat jemand eine Idee wie man das machen kann. Ich habe jetzt Stunden gesucht und keine Lösung gefunden :frowning:
Für Hinweise und Ideen schon jetzt herzlichen Dank!
Grüße Michael

2

Das muss sich im SCSS (CSS) verstecken. Habe selbst noch nie nachgesehen. Gehe aber davon aus, dass es dafür eine extra Datei gibt, indem alle entsprechenden Styles drin sind.

3

Hi Max_Shop,
habe ich auch gedacht aber bisher nichts gefunden :frowning:

4

Keiner hier, der das Problem kennt?

5

Die meisten lassen den Rahmen genau wegen Barrierefreiheit mit Absicht drin.

In der Navigation z.B. wird das durch ‘.nav-link:focus-visible’ und CSS ‘box-shadow’ gesteuert. Ist also kein Rahmen eher Schatten :slight_smile: Wird bei anderen Elementen wohl ähnlich sein.

1 „Gefällt mir“
6

Herzlichen Dank R4M,

das werde ich ausprobieren.

7

Vielen Dank R4M, das war es.

8

Ich hätte das auch gerne weg. Bei Maus-Hover ist so ein Rahmen ja für Barrierefreiheit kein Muss, oder irre ich mich da? Habe (glaube ich :smiley: ) auch schon rausgefunden dass das nicht direkt über css gelöst wird sondern über das bootstrap javascript der focus() bei dropdown gesetzt wird. Eine Lösung wäre wohl ein .js plugin dass dem entgegenwirkt (oder im vendor das ändern, aber da lass ich besser die Finger von)
Freue mich wenn ich mich irre und man mir das besser erklären kann =)

9

Hm, was ist einfacher? CSS anpassen oder ein extra Plugin schreiben? :slight_smile:

10

Also bei mir hat CSS wie o.g. gereicht.

11

Aber mit der css Anweisung, verschwindet der Rahmen auch bei der Bedienung mit der Tastatur, wozu es der Rahmen aber gedacht ist und für die Barrierefreiheit auch notwendig ist.

Warum wird hier per js der focus-visible gesetzt, der nur dafür gedacht ist, per Tastatur ausgelöst zu werden?

12

Genau, wer den Rahmen mit CSS entfernt verliert die Barrierefreiheit. Sehe daher nur mit javascript eine Lösung.

13

Ja das ist eine Sache die man mit einem kleinen javascript erledigen kann:

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

Mehr infos dazu hier:

14

Das funktioniert so leider gar nicht! Schon deshalb, weil der Rahmen durch box-shadow erzeugt wird und nicht durch outline.

15

Dann pass das css doch entsprechend an, es ging hier eher darum wie man das technisch umsetzt

16

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.