Christian Kruse: 2.1.1a Ohne Maus nutzbar: Das Aufklappmenü

Hallo,

ich habe das Dropdown-Menü für die Foren überarbeitet. Der Anchor ist jetzt ein Button und die beiden ARIA-Attribute aria-haspopup und aria-expanded werden gesetzt; außerdem geht das Menü bei Focus nicht mehr auf, sondern nur noch beim auslösen des Buttons. aria-expanded wird entsprechend auf true bzw false gesetzt.

Meinungen?

LG,
CK

-- https://wwwtech.de/about
  1. Lieber Christian,

    Meinungen?

    das "Pfeil-nach-unten"-Icon hat keine Funktion mehr. Das empfinde ich als weniger intuitiv. Sollte es funktional im Button integriert sein?

    [EDIT]Immerhin verwandelt sich der Cursor beim Hovern in die übliche Klickhand.[/EDIT]

    Liebe Grüße,

    Felix Riesterer.

    1. Hallo Felix,

      das "Pfeil-nach-unten"-Icon hat keine Funktion mehr. Das empfinde ich als weniger intuitiv. Sollte es funktional im Button integriert sein?

      Ja, ist mir eben auch aufgefallen, das liegt daran, dass der Pfeil zur Zeit mit :after auf den Button eingefügt wird; sollte wohl ein :after auf einem Element in dem Button sein. Bin aber gerade an einem größeren Refactoring, das muss also etwas warten…

      LG,
      CK

      -- https://wwwtech.de/about
      1. Hallo Christian,

        das "Pfeil-nach-unten"-Icon hat keine Funktion mehr. Das empfinde ich als weniger intuitiv. Sollte es funktional im Button integriert sein?

        Ja, ist mir eben auch aufgefallen, das liegt daran, dass der Pfeil zur Zeit mit :after auf den Button eingefügt wird;

        „Auf den Button parent“ meinte ich natürlich. Ist jetzt gefixed.

        LG,
        CK

        -- https://wwwtech.de/about
  2. Hallo Christian Kruse,

    Meinungen?

    Das .dropdown .anchor.visible button {display: block} schiebt das Listenelement nach oben.

    Ausschnitt aus dem Forumskopf, der das verschobene Listenelement zeigt

    Durch click neben das Menu lässt es sich nicht schließen.

    Bis demnächst
    Matthias

    -- Rosen sind rot.
    1. Hallo Matthias,

      Das .dropdown .anchor.visible button {display: block} schiebt das Listenelement nach oben.

      Lustig, nur im Firefox. Fixed.

      Durch click neben das Menu lässt es sich nicht schließen.

      Stimmt, das hatte ich vergessen. Fixed.

      LG,
      CK

      -- https://wwwtech.de/about
    2. Hallo Matthias,

      und im aktuellen Google Chrome ist es zu weit unten

      1. Hallo Sophie,

        und im aktuellen Google Chrome ist es zu weit unten

        Kann ich für meinen aktuellen Chrome unter Win10 nicht bestätigen.

        Bis demnächst
        Matthias

        -- Rosen sind rot.
        1. @@Matthias Apsel

          und im aktuellen Google Chrome ist es zu weit unten

          Kann ich für meinen aktuellen Chrome unter Win10 nicht bestätigen.

          Für den aktuellen Chrome unter macOS kann ich es bestätigen (dass es zu weit unten ist).

          LLAP 🖖

          -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. Hallo Sophie,

        und im aktuellen Google Chrome ist es zu weit unten

        fixed.

        LG,
        CK

        -- https://wwwtech.de/about
  3. @@Christian Kruse

    Zu „Ohne Maus nutzbar“ fehlt noch die Kennzeichnung des :focus-Status des Buttons.

    Übrigens hat sich damit das lästige Doppelclicken erledigt, was zumindest in meinem Firefox nötig war, um das Menü zu öffnen.

    LLAP 🖖

    -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hallo Gunnar,

      Zu „Ohne Maus nutzbar“ fehlt noch die Kennzeichnung des :focus-Status des Buttons.

      Den gibt es doch. Die Button-Beschriftung wird rot.

      Übrigens hat sich damit das lästige Doppelclicken erledigt, was zumindest in meinem Firefox nötig war, um das Menü zu öffnen.

      Ja, einer der Gründe, warum ich das umgestellt habe.

      LG,
      CK

      -- https://wwwtech.de/about
      1. @@Christian Kruse

        Zu „Ohne Maus nutzbar“ fehlt noch die Kennzeichnung des :focus-Status des Buttons.

        Den gibt es doch. Die Button-Beschriftung wird rot.

        War mir nicht aufgefallen. Verwende niemals Farbe als alleiniges Unterscheidungsmerkmal!

        Noch einen gestrichelten Rahmen drumherum, wie bei den anderen Menüpinkten?

        LLAP 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo Gunnar Bittersmann,

          Noch einen gestrichelten Rahmen drumherum, wie bei den anderen Menüpinkten?

          Fände ich gut. Wäre konsistent.

          Bis demnächst
          Matthias

          -- Rosen sind rot.
        2. Hallo Gunnar,

          Noch einen gestrichelten Rahmen drumherum, wie bei den anderen Menüpinkten?

          done.

          LG,
          CK

          -- https://wwwtech.de/about
  4. Hej Christian,

    ich habe das Dropdown-Menü für die Foren überarbeitet. […] Meinungen?

    Sorry, habe den Thread verpennt. Habe nur ins SelfForum geschaut die letzten Tage, aber ich sehe, ihr habt es bereits hinbekommen. Neben dem Wegfall des lästigen doppelklicks lässt sich in dem Menü nun auch mit Tabulator und Pfeiltasten Navigieren. Ein echter Fortschritt!

    Marc

    1. Hallo marctrix,

      Ein echter Fortschritt!

      Cool 😀 was sagst du zu den neuen Popups?

      LG,
      CK

      -- https://wwwtech.de/about
      1. Hej Christian,

        Hallo marctrix,

        Ein echter Fortschritt!

        Cool 😀 was sagst du zu den neuen Popups?

        Bin noch nicht durch mit den neuen Threads hier, schaue sie mir aber alle der Reihe nach an. Hatte gerade das Bedürfnis, pl auf seinen Inklusions-Rant zu antworten. So was kann ich einfach nicht unnkommentiert stehen lassen :-}

        Marc