Adding accesibility fixes.

js-src/index.js

@@ -5,26 +5,41 @@ require('tablesort/src/sorts/tablesort.number');
 
 let fakeSearchInput
 let searchMobile
-window.onload = () => {
+document.addEventListener("DOMContentLoaded", function () {
     const menu_expand = document.querySelector('a.menu-expand');
     const mobile_foldable = document.querySelector('nav.mobile-foldable');
     const transparentFullscreenHide = document.querySelector('div.transparent-fullscreen-hide');
+    const contentsWithoutMenu = document.querySelector('div.contents-without-menu')
     const tables = document.querySelectorAll('table')
 
     fillFarmaciaGuardia();
     loadAd()
     addEasterEggAnimation()
 
-    if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null) {
+    if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null && contentsWithoutMenu !== null) {
+        mobile_foldable.toggleAttribute('aria-hidden')
+        if (mobile_foldable.getAttribute('aria-hidden') !== null) {
+            mobile_foldable.setAttribute('aria-hidden', true);
+        }
         transparentFullscreenHide.addEventListener('click', () => {
             mobile_foldable.classList.remove('show');
             transparentFullscreenHide.classList.remove('show');
             menu_expand.classList.remove('active');
+            contentsWithoutMenu.removeAttribute('aria-hidden')
+            mobile_foldable.setAttribute('aria-hidden', true)
         });
         menu_expand.addEventListener('click', () => {
             menu_expand.classList.toggle('active');
             mobile_foldable.classList.toggle('show');
             transparentFullscreenHide.classList.toggle('show');
+            contentsWithoutMenu.toggleAttribute('aria-hidden')
+            if (contentsWithoutMenu.getAttribute('aria-hidden') !== null) {
+                contentsWithoutMenu.setAttribute('aria-hidden', true);
+            }
+            mobile_foldable.toggleAttribute('aria-hidden')
+            if (mobile_foldable.getAttribute('aria-hidden') !== null) {
+                mobile_foldable.setAttribute('aria-hidden', true);
+            }
         });
     }
 
@@ -46,7 +61,7 @@ window.onload = () => {
     searchMobile = document.querySelector('nav.mobile-shortcuts div.search')
     fakeSearchInput = searchMobile.querySelector('input')
     addListenersSearch()
-};
+}, false);
 
 function fillFarmaciaGuardia() {
     const farmaciaName = document.querySelector('#farmacia-name');

public/css/styles.css

@@ -200,13 +200,14 @@ body {
     body div.transparent-fullscreen-hide.show {
       display: block; }
   body nav.mobile-foldable {
+    visibility: hidden;
     position: fixed;
     left: 100%;
     width: 70%;
     top: 60px;
     height: calc(100% - 60px);
     z-index: 500;
-    transition: left 0.5s ease-in;
+    transition: left 0.5s ease-in, visibility 0.5s ease-in;
     background: white; }
     body nav.mobile-foldable > a:first-child {
       margin-top: 30px; }
@@ -230,7 +231,8 @@ body {
         display: list-item;
         font-size: 1em; }
   body nav.mobile-foldable.show {
-    left: 30%; }
+    left: 30%;
+    visibility: visible; }
   body nav.mobile-shortcuts > a {
     display: flex;
     align-items: center;
@@ -238,6 +240,8 @@ body {
     body nav.mobile-shortcuts > a.active {
       background: white;
       color: #dcdcf5; }
+      body nav.mobile-shortcuts > a.active:focus {
+        background: #f2eb8c; }
   body a.menu-expand {
     padding-bottom: 9px; }
     body a.menu-expand .open-menu-icon-hover {

public/css/styles.scss

@@ -296,13 +296,14 @@ body {
   }
 
   nav.mobile-foldable {
+    visibility: hidden;
     position: fixed;
     left: 100%;
     width: 70%;
     top: 60px;
     height: calc(100% - 60px);
     z-index: 500;
-    transition: left 0.5s ease-in;
+    transition: left 0.5s ease-in, visibility 0.5s ease-in;
     background: $background_sidebar;
 
     & > a:first-child {
@@ -339,6 +340,7 @@ body {
 
   nav.mobile-foldable.show {
     left: 30%;
+    visibility: visible;
   }
 
   nav.mobile-shortcuts > a {
@@ -348,6 +350,9 @@ body {
     &.active {
         background: $background_sidebar;
         color: $color_sidebar;
+        &:focus {
+            background: $color_div;
+        }
     }
   }
 

templates/layouts/default.html.ep

@@ -58,6 +58,7 @@
     <div class="complete-container">
 %= include 'page/_mobile_menu', categories => $categories
 %= include 'page/_mobile_foldable', categories => $categories
+        <div class="contents-without-menu">
             <div class="search-in-page">
                 <a href="#" class="down">
                     <img alt="Next result" src="/img/down.svg"/>
@@ -97,4 +98,5 @@
             </div>
 %= include 'ads/_carousel'
         </div>
+    </div>
 </html>

templates/page/_mobile_menu.html.ep

@@ -2,7 +2,7 @@
 <nav class="mobile-shortcuts">
     <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
 %= include 'page/_search_bar'
-    <a class="menu-expand">
+    <a class="menu-expand" href="#">
         <img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
         <img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
     </a>