pelzflorian pushed a commit to branch wip-i18n
in repository guix-artwork.
commit 49a065c9192fe2cf35c7d24b32ee8d281275a783
Author: Florian Pelz <pelzflor...@pelzflorian.de>
Date: 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 {
