Frage zum Wiki-Artikel „zug%C3%A4ngliche_Registerkarten“

[Sebastian]

Hi,

die Navigation ist super, aber wenn seitlich von den Reitern geklickt wird, bleibt der Inhalt unten leer. Wenn ich das richtig interpretiere, dann greift der EventHandler für das Tab Panel auf die gesamte Zeile und läuft dann ins Leere. Ich habe leider keine Lösung dafür gefunden.

Hat jemand eine Idee, wie das behoben werden könnte?

[Sebastian]

Hier auch nochmal der Link zur Seite: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Registerkarten

[manuelv]

Hallo Sebastian,

So wie ich das sehe wird das Click-Event auch aktiviert, wenn die Tabliste angeklickt wird. Um dies zu Umgehen kannst du ein

if (target.parentNode.id != 'tablist') return false;

direkt unter

var target = elem.target;

einfügen. Somit filterst du alle Click-Events die nicht auf ein Child der 'tablist' gehen heraus. Dies sollte das Problem beheben.

Liebe Grüße, Manuel

[Sebastian]

Hallo Manuel,

super, funktioniert.

Vielen lieben Dank.

Sebastian

[Felix Riesterer]

Lieber manuelv,

herzlich willkommen im SELFHTML-Forum! 😀

Liebe Grüße

Felix Riesterer

[manuelv]

Hallo Felix,

vielen Dank 😀 freue mich hier zu sein!

Liebe Grüße

Manuel

[Rolf B]

Hallo Sebastian,

die Sicherheitsabfrage würde ich nicht auf parentNode.id == 'tablist' machen, sondern auf target.getAttribute("role") == 'tab'. Denn Du möchtest den Klick auf ein Tab erkennen. Kinder von tablist könnte es noch andere geben.

Und so wie ich das sehe, krankt das Beispiel an weiteren Stellen.

• der Parameter für clickHandler heißt elem, ist aber kein Element, sondern das Event-Objekt. Er müsste also event oder clickEvent heißen.

• das Beispiel macht <li> Elemente klickbar, statt Buttons in die <li> einzusetzen. <li> Elemente sind nicht interaktiv, das kann nicht richtig sein. Da gehören eigentlich Buttons in die <li> Elemente hinein, dann kann man auch clickEvent.target.tagName == 'BUTTON' abfragen und die Tastaturbedienung ist auch einfacher. Aber vielleicht bin ich da auch nicht up-to-date was Widget-Bau mit Aria angeht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

• das Beispiel macht <li> Elemente klickbar, statt Buttons in die <li> einzusetzen. <li> Elemente sind nicht interaktiv, das kann nicht richtig sein.

Stimmt, das ist es nicht. Ich habe einen entsprechenden Warnhinweis auf die Seite gesetzt.

Dass li-Elemente mittels tabindex per Tastatur erreichbar gemacht werden, heißt ja noch lange nicht, dass ihre Funktion allen Nutzern vermittelt wird.

Da gehören eigentlich Buttons in die <li> Elemente hinein

Eigentlich Links. Siehe Heydon: “Use links! Make sure the links that allow users to choose between views are indeed links — whether or not those links return false and use JavaScript to switch to the new view.”

Aber vielleicht bin ich da auch nicht up-to-date was Widget-Bau mit Aria angeht.

Erste Regel zu ARIA: Verwende nicht ARIA, wenn es passende HTML-Elemente gibt.

---

Ich verstehe den Sinn des Tutorials nicht. Warum schreibt da jemand eins, wenn es bei Inclusive Components schon eins gibt? – Geschrieben von jemandem, der wirklich Ahnung davon hat.

Wenn man eins auf deutsch haben will, sollten man Heydons übersetzen; nicht versuchen, besser sein zu wollen als er – das kann nur schiefgehen.

😷 LLAP

[JürgenB]

Hallo Gunnar,

Eigentlich Links. Siehe Heydon: “Use links! Make sure the links that allow users to choose between views are indeed links — whether or not those links return false and use JavaScript to switch to the new view.”

Ich verstehe den Sinn des Tutorials nicht. Warum schreibt da jemand eins, wenn es bei Inclusive Components schon eins gibt? – Geschrieben von jemandem, der wirklich Ahnung davon hat.

aber auch hier frage ich mich: warum nimmt Heydon nicht details/summary? Das Pärchen wurde doch eigentlich geschaffen, um Teile ein- und auszublenden.

Gruß
Jürgen

[Felix Riesterer]

Lieber Gunnar,

Ich habe einen entsprechenden Warnhinweis auf die Seite gesetzt.

ich freue mich, dass Du im Wiki etwas einbringst. Das ist ernst gemeint.

Dein Hinweis verweist auf eine englisch-sprachige Seite. Für diejenigen, die der Sprache genügend mächtig sind, ist das ein Gewinn. Wir führen aber unsere Doku deshalb, weil es eben genügend Menschen gibt, für die Englisch eine Barriere bedeutet. Deswegen sollte der Link "irgendwann" einmal zu einer deutschen Übersetzung dieses Heydon-Artikels führen. Insofern empfinde ich die Aussage "unbenutzbar" in Deinem Hinweis als zu streng. Da ich Deinen Idealismus kenne, verstehe ich (inzwischen 😉), wie er zu nehmen ist. Trotzdem klingt er für Nichteingeweihte so, als "funktioniere" die im Tutorial dargebotene Lösung auf der technischen Ebene nicht. Und das ist nicht der Fall. Daher möchte ich das so abändern, dass auch Nichteingeweihte Deinen Warnhinweis richtig verstehen.

Wenn man eins auf deutsch haben will, sollten man Heydons übersetzen; nicht versuchen, besser sein zu wollen als er – das kann nur schiefgehen.

Du hast ein <I> gekauft. Vielen Dank für das Geschäft! Besuchen Sie uns bald wieder.

Liebe Grüße

Felix Riesterer

[Felix Riesterer]

Daher möchte ich das so abändern, dass auch Nichteingeweihte Deinen Warnhinweis richtig verstehen.

[x] done

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Gunnar,

Ich verstehe den Sinn des Tutorials nicht. Warum schreibt da jemand eins, wenn es bei Inclusive Components schon eins gibt?

Guck in die Artikelhistorie. Unseres ist von Anfang 2017. Pickering gibt seins mit Oktober 2017 an. Hat er etwa unseres abgekupfert und verbessert? (Spaß...)

Und da wir, dich eingeschlossen, nicht so viel Zeit für's Wiki haben wie wir eigentlich bräuchten, bleibt ein solches Tutorial dann stehen und lebt nicht so wie es sollte.

Rolf

[Tabellenkalk]

Hallo,

Ich verstehe den Sinn des Tutorials nicht. Warum schreibt da jemand eins, wenn es bei Inclusive Components schon eins gibt?

Ich verstehe dein Argument nicht. Sinnhaftigkeit ergibt sich durch Einzigartigkeit?

Gruß
Kalk