05/09: website: navbar: Make dropdowns accessible to keyboard and touch input.

[Florian Pelz]

pelzflorian pushed a commit to branch wip-i18n
in repository guix-artwork.

commit a21bb2661cbc8080c7294728f382f8b70ea3a321
Author: Florian Pelz <address@hidden>
AuthorDate: Sun Dec 1 23:15:16 2019 +0000

    website: navbar: Make dropdowns accessible to keyboard and touch input.
    
    * website/apps/base/templates/components.scm (horizontal-line): New 
procedure.
    (navbar, menu-dropdown): Adapt to use CSS for accessibility.
    * website/static/base/css/navbar.css: Adapt CSS to new dropdowns.
    (menu-item-active): Make visible when appropriate.
    (menu-item): Make visible when appropriate.  Change margin.
    (dropdown-btn): Make visible when appropriate.  Add margin.  Change padding.
    (submenu): Make visible when appropriate.
    (menu-hidden-input): Hide HTML radio buttons not meant for display.
    (hline): Hide in small browser window.
    (navbar): With mouse cursor, signify dropdown labels are clickable.
    Highlight pressed down labels.
---
 website/apps/base/templates/components.scm | 78 ++++++++++++++++++++++++------
 website/static/base/css/navbar.css         | 75 +++++++++++++++++++++-------
 2 files changed, 121 insertions(+), 32 deletions(-)

diff --git a/website/apps/base/templates/components.scm 
b/website/apps/base/templates/components.scm
index 8c80a85..f39f3fd 100644
--- a/website/apps/base/templates/components.scm
+++ b/website/apps/base/templates/components.scm
@@ -21,6 +21,7 @@
            button-little
            contact-preview
            contact->shtml
+            horizontal-line
            horizontal-separator
            link-more
            link-subtle
@@ -179,6 +180,13 @@
            `(src ,(guix-url "static/base/img/h-separator-dark.png")))
        (alt ""))))
 
+(define (horizontal-line)
+  "Return SHTML for a visible separator to be used in a dropdown menu
+like a menu item."
+  `(img (@ (class "hline")
+           (src ,(guix-url "static/base/img/h-separator.png"))
+           (alt ""))))
+
 
 (define* (link-more #:key (label "More") (url "#") (light #false))
   "Return an SHTML a element that looks like a 'more →' link.
@@ -285,19 +293,53 @@ manual.
    ITEMS (list of menu items)
      A list of menu items as returned by the menu-item procedure in this
      same module. If not provided, the value defaults to an empty list."
-  `(li
-    (@ (class "dropdown"))
-    (a
-     (@ (class
-        ,(if (string=? (string-downcase label) (string-downcase active-item))
-             "menu-item menu-item-active dropdown-btn"
-             "menu-item dropdown-btn"))
-       (href ,url))
-     ,label)
-    (div
-     (@ (class "submenu"))
-     (div (@ (class "submenu-triangle")) " ")
-     (ul ,@items))))
+  (let ((label-hash (number->string (string-hash label))))
+    `(li
+      (@ (class ,(if (string=? (string-downcase label)
+                               (string-downcase active-item))
+                     "menu-item menu-item-active dropdown dropdown-btn"
+                     "menu-item dropdown dropdown-btn")))
+      ,@(let ((id (string-append "visible-dropdown-" label-hash)))
+          `(;; show dropdown when button is checked:
+            (style ,(string-append "#" id ":checked ~ #submenu-" label-hash "
+{
+    min-width: 150px;
+    /* reset to initial values: */
+    width: auto;
+    height: auto;
+    overflow: visible;
+}"))
+            ;; show uncheck version of button iff button is checked
+            (style ,(string-append "#" id ":checked \
+~ label[for=all-dropdowns-hidden]
+{
+    display: inline;
+}"))
+            (style "label[for=all-dropdowns-hidden]
+{
+    display: none;
+}")
+            ;; show check version of button iff button is unchecked
+            (style ,(string-append "#" id ":checked ~ label[for=" id "]
+{
+    display: none;
+}"))
+            (input (@ (class "menu-hidden-input")
+                      (type "radio")
+                      (name "dropdown")
+                      (id ,id)))
+            (label
+             (@ (for ,id))
+             ,label)
+            (label
+             (@ (for "all-dropdowns-hidden"))
+             ,label)))
+      (div
+       (@ (class "submenu")
+          (id ,(string-append "submenu-" label-hash)))
+       (div (@ (class "submenu-triangle"))
+            " ")
+       (ul ,@items)))))
 
 
 (define* (menu-item #:key (label "Item") (active-item "") (url "#"))
@@ -338,7 +380,11 @@ manual.
 
     ;; Menu.
     (nav (@ (class "menu"))
-         ,(G_ `(h2 (@ (class "a11y-offset")) "website menu:"))
+     ,(G_ `(h2 (@ (class "a11y-offset")) "website menu:"))
+     (input (@ (class "menu-hidden-input")
+               (type "radio")
+               (name "dropdown")
+               (id "all-dropdowns-hidden")))
      (ul
       ,(C_ "website menu" (menu-item #:label "Overview" #:active-item 
active-item #:url (guix-url)))
       ,(C_ "website menu" (menu-item #:label "Download" #:active-item 
active-item #:url (guix-url "download/")))
@@ -354,9 +400,11 @@ manual.
       ,(C_ "website menu" (menu-item #:label "Help" #:active-item active-item 
#:url (guix-url "help/")))
       ,(C_ "website menu" (menu-item #:label "Donate" #:active-item 
active-item #:url (guix-url "donate/")))
 
-      ,(menu-dropdown #:label (C_ "website menu" "About") #:active-item 
active-item #:url (guix-url "about/")
+      ,(menu-dropdown #:label (C_ "website menu" "About") #:active-item 
active-item
        #:items
         (list
+         (C_ "website menu" (menu-item #:label "About" #:active-item 
active-item #:url (guix-url "about/")))
+         (horizontal-line)
          (C_ "website menu" (menu-item #:label "Contact" #:active-item 
active-item #:url (guix-url "contact/")))
          (C_ "website menu" (menu-item #:label "Contribute" #:active-item 
active-item #:url (guix-url "contribute/")))
          (C_ "website menu" (menu-item #:label "Security" #:active-item 
active-item #:url (guix-url "security/")))
diff --git a/website/static/base/css/navbar.css 
b/website/static/base/css/navbar.css
index d975aa8..b8bba8a 100644
--- a/website/static/base/css/navbar.css
+++ b/website/static/base/css/navbar.css
@@ -53,8 +53,13 @@
     position: relative;
 }
 
+.menu-hidden-input {
+    display: none;
+}
+
 .menu-item:link,
-.menu-item:visited {
+.menu-item:visited,
+label.menu-item {
     background-color: transparent;
     background-image: url("../img/link-arrow.png");
     background-position: 97% 50%;
@@ -104,6 +109,10 @@
     background-position: top;
 }
 
+.hline {
+    display: none;
+}
+
 
 
 
@@ -130,15 +139,15 @@
         background-image: none;
         border-style: none;
         display: inline-block;
-       margin: 0px 8px;
+        margin: 0px 2px;
         text-align: center;
     }
 
-    .menu-item:active,
-    .menu-item:focus,
-    .menu-item:hover,
-    .menu-item-active:link,
-    .menu-item-active:visited {
+    a.menu-item:active,
+    a.menu-item:focus,
+    a.menu-item:hover,
+    a.menu-item-active:link,
+    a.menu-item-active:visited {
        background-image: url("../img/menu-item-active-bg.png");
        background-position: bottom center;
        background-repeat: no-repeat;
@@ -149,31 +158,63 @@
     }
 
     .dropdown:hover .submenu {
-       display: block;
-       right: 0px;
+        min-width: 150px;
+        /* reset to initial values: */
+        width: auto;
+        height: auto;
+        overflow: visible;
+    }
+
+    /* This CSS rule is separate from the rule for :hover
+       because :hover should still be applied even when
+       the browser does not support :focus-within. */
+    .submenu:focus-within {
+        min-width: 150px;
+        /* reset to initial values: */
+        width: auto;
+        height: auto;
+        overflow: visible;
     }
 
-    .dropdown-btn:link,
-    .dropdown-btn:visited {
+    .dropdown-btn {
        background-image: url("../img/dropdown-bg.png");
        background-position: bottom right;
        background-repeat: no-repeat;
-       padding-right: 13px;
+        padding: 0px 10px;
+        cursor: pointer;
+        margin: 0px 2px;
     }
 
     .dropdown-btn:active,
-    .dropdown-btn:focus,
     .dropdown-btn:hover {
-       background-position: top right;
+        background-image: url("../img/dropdown-bg.png");
+        background-position: top right;
+    }
+
+    .navbar label {
+        cursor: pointer;
+    }
+
+    label[for=all-dropdowns-hidden] {
+        text-shadow: #fff 0px -2px 15px, #fff 0px -2px 10px;
+    }
+
+    .hline {
+        display: block;
+        width: 100%;
+        height: 1px;
     }
 
     .submenu {
        background-color: transparent;
-       display: none;
-       min-width: 150px;
+        z-index: 10;
+        display: block;
+        overflow: hidden;
+        width: 0;
+        height: 0;
        padding-top: 20px;
        position: absolute;
-       z-index: 10;
+        right: 0px;
     }
 
     .submenu-triangle {