[no subject]

[Mathieu Othacehe]

branch: master
commit 377e29152cdd4b7994e4635fdfc9a8bd8d0701e5
Author: Mathieu Othacehe <othacehe@gnu.org>
AuthorDate: Fri Apr 23 10:25:37 2021 +0200

    accessibility: Improve Status dropdown accessibility.
    
    * src/cuirass/templates.scm (html-page): Improve Status dropdown
    accessibility.
    * src/static/css/cuirass.css: Remove unused sections.
---
 src/cuirass/templates.scm  | 30 +++++++++++++++++++++++-------
 src/static/css/cuirass.css | 22 ----------------------
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/cuirass/templates.scm b/src/cuirass/templates.scm
index 977ddfe..f569261 100644
--- a/src/cuirass/templates.scm
+++ b/src/cuirass/templates.scm
@@ -176,27 +176,43 @@ columnDefs: [
                            (alt "logo")
                            (height "25")
                            (style "margin-top: -12px"))))
-                (div (@ (class "collapse navbar-collapse"))
+                (button (@ (class "navbar-toggler")
+                           (type "button")
+                           (data-bs-toggle "collapse")
+                           (data-bs-target "navbarDropdown")
+                           (aria-controls "navbarDropdown")
+                           (aria-expanded "false")
+                           (aria-label "Toggle dropdown"))
+                        (span (@ (class "navbar-toggler-icon"))))
+                (div (@ (id "navbarDropdown")
+                        (class "collapse navbar-collapse"))
                      (ul (@ (class "navbar-nav mr-auto"))
                          (li (@ (class "nav-item dropdown"))
-                             (a (@ (class "nav-link dropdown-toggle")
+                             (a (@ (id "navbarDropdownMenuLink")
+                                   (class "nav-link dropdown-toggle")
                                    (data-toggle "dropdown")
                                    (href "#")
                                    (role "button")
+                                   (data-bs-toggle "dropdown")
                                    (aria-haspopup "true")
                                    (aria-expanded "false"))
                                 "Status")
-                             (div (@ (class "dropdown-menu")
-                                     (aria-labelledby "navbarDropdow"))
+                             (ul
+                              (@ (class "dropdown-menu")
+                                 (role "menu")
+                                 (aria-labelledby "navbarDropdownMenuLink"))
+                              (li (@ (role "menuitem"))
                                   (a (@ (class "dropdown-item")
                                         (href "/metrics"))
-                                     "Global metrics")
+                                     "Global metrics"))
+                              (li (@ (role "menuitem"))
                                   (a (@ (class "dropdown-item")
                                         (href "/workers"))
-                                     "Workers status")
+                                     "Workers status"))
+                              (li (@ (role "menuitem"))
                                   (a (@ (class "dropdown-item")
                                         (href "/status"))
-                                     "Running builds")))
+                                     "Running builds"))))
                          (li (@ (class "nav-item"))
                              (a (@ (class "nav-link" ,(if (null? navigation)
                                                           " active" ""))
diff --git a/src/static/css/cuirass.css b/src/static/css/cuirass.css
index cc5d457..c178f40 100644
--- a/src/static/css/cuirass.css
+++ b/src/static/css/cuirass.css
@@ -39,28 +39,6 @@ body {
     display: block;
 }
 
-/*
- This is taken from: https://gist.github.com/YushengLi/824d3317f36c31f3d3e9 to
- allow bootstrap dropdown menus to work without the associated javascript
- plugin.
- */
-a.dropdown-toggle:focus {
-    pointer-events: none;
-}
-
-a.dropdown-toggle:focus + .dropdown-menu {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-}
-
-.dropdown-menu {
-    opacity: 0;
-    display: block;
-    visibility: hidden;
-    transition: visibility 0.5s;
-}
-
 /* Remove the dropdown-toggle arrow. */
 .no-dropdown-arrow::after {
     content: none;