Change menu toggle element from span to button

This makes possible to navigate to the menu toggle using the keyboard,
as well as being semantically more correct.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

diff --git a/core/css/public.scss b/core/css/public.scss
index 1b55d9d12dbf9e9a782388064297c0f2a4396c7c..6ec22cbc6d2f9a9ef869da65a0e49a7bd3ade05f 100644 (file)
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -11,6 +11,16 @@ $footer-height: 65px;
                        ul li {
                                min-width: 270px;
                        }
+                       #header-actions-toggle {
+                               background-color: transparent;
+                               border-color: transparent;
+
+                               &:hover,
+                               &:focus,
+                               &:active {
+                                       opacity: 1;
+                               }
+                       }
                        #save-external-share {
                                form {
                                        display: flex;

diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index bbfa264d17172e0d52998f366da38596d60c2a48..996b78a922b1182a5fc20d0920d0139bdbb1f26f 100644 (file)
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -61,7 +61,7 @@
                        </span>
                        <?php if($template->getActionCount() > 1) { ?>
                        <div id="header-secondary-action">
-                               <span id="header-actions-toggle" class="menutoggle icon-more-white"></span>
+                               <button id="header-actions-toggle" class="menutoggle icon-more-white"></button>
                                <div id="header-actions-menu" class="popovermenu menu">
                                        <ul>
                                                <?php