feat(accessibility): aeration of 3 dots menus (#108)

IGNF · Jul 24, 2024 · 5e8cbe8 · 5e8cbe8
1 parent 2bc8e7c
commit 5e8cbe8
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 8 deletions.
diff --git a/src/css/layer-switcher.css b/src/css/layer-switcher.css
@@ -159,7 +159,6 @@ div[id^="landmark-advanced-tools_ID_"],
 div[id^="route-advanced-tools_ID_"] {
   right: 30px;
   left: unset;
-  bottom: 25%;
 }
 
 #route-draw-advanced-tools, #position-landmark-advanced-tools {
@@ -196,8 +195,26 @@ div[id^="advanced-tools_ID_"]:hover
   {
   display: flex;
   max-height: 250px;
-  padding: 12px;
+  padding: 18px 15px;
   transition: max-height 0.3s ease-out;
+  gap: 20px;
+}
+
+label[id^="landmark-show-advanced-tools_ID_"]:focus-within
+  + div[id^="landmark-advanced-tools_ID_"],
+label[id^="route-show-advanced-tools_ID_"]:focus-within
+  + div[id^="route-advanced-tools_ID_"],
+div[id^="landmark-advanced-tools_ID_"]:focus-within,
+div[id^="route-advanced-tools_ID_"]:focus-within,
+label[id^="landmark-show-advanced-tools_ID_"]:hover
+  + div[id^="landmark-advanced-tools_ID_"],
+label[id^="route-show-advanced-tools_ID_"]:hover
+  + div[id^="route-advanced-tools_ID_"],
+div[id^="landmark-advanced-tools_ID_"]:hover,
+div[id^="route-advanced-tools_ID_"]:hover
+  {
+  max-height: 350px;
+  bottom: -70px;
 }
 
 input[id^="landmark-visibility_ID_"],
@@ -258,7 +275,6 @@ div[id^="info_ID_"] {
   padding-left: 50px;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
   font-size: 14px;
 }
 

diff --git a/src/css/my-account.css b/src/css/my-account.css
@@ -130,7 +130,7 @@
 }
 
 #myaccount-landmarks:has(label[id^=landmark-show-advanced-tools_ID_]:hover),
-#myaccount-routes:has(label[id^=landmark-show-advanced-tools_ID_]:hover) {
+#myaccount-routes:has(label[id^=route-show-advanced-tools_ID_]:hover) {
   overflow-y: visible;
 }
 

diff --git a/src/css/nav.css b/src/css/nav.css
@@ -3,10 +3,10 @@
     position: absolute;
     top: calc(100% - 72px - max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px));
     width: 100%;
-    height: 60px ;
+    height: 63px;
     font-size: 12px;
     background-color: white;
-    padding: 8px 0px max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px) 0px;
+    padding: 7px 0px max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px) 0px;
     z-index: 3002;
     flex-direction: row;
     align-items: center;
@@ -96,7 +96,7 @@
 .subnav {
     position: absolute;
     background-color: var(--false-white);
-    bottom: calc(68px + max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px));
+    bottom: calc(70px + max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px));
     left: -100%;
     transition: transform 0.2s;
     transition-timing-function: ease-out;

diff --git a/src/html/index.html b/src/html/index.html
@@ -33,7 +33,7 @@
           <!-- Toutes les informations sont affichées dans un onglet resizable
             et ancré en bas de l'écran.
           -->
-          <div id="tabContainer">
+          <div id="tabContainer" style="height: 0px;">
             <div id="tabHeader"><div id="tabHandle"></div><div id="tabClose" tabindex="0" title="Fermer le volet"></div></div>
               <%= require('html-loader!./tabs/layermanagerWindow.html').default %>
               <%= require('html-loader!./tabs/directionsWindow.html').default %>

diff --git a/src/js/nav.js b/src/js/nav.js
@@ -90,13 +90,15 @@ class MenuNavigation {
      */
   hide() {
     this.container.classList.add("d-none");
+    DOM.$tabContainer.style.removeProperty("height");
   }
 
   /**
      * Affiche le menu principal
      */
   show() {
     this.container.classList.remove("d-none");
+    DOM.$tabContainer.style.height = "0px";
   }
 
   /**
@@ -184,13 +186,15 @@ class MenuNavigation {
       DOM.$tabContainer.style.removeProperty("top");
       DOM.$compareLayers2Window.classList.add("d-none");
       DOM.$compareLayers1Window.classList.remove("d-none");
+      DOM.$bottomButtons.style.removeProperty("bottom");
       DOM.$sideBySideLeftLayer.classList.add("d-none");
       Globals.currentScrollIndex = 2;
       break;
     case "compareLayers2":
       DOM.$tabContainer.style.removeProperty("top");
       DOM.$compareLayers1Window.classList.add("d-none");
       DOM.$compareLayers2Window.classList.remove("d-none");
+      DOM.$bottomButtons.style.removeProperty("bottom");
       DOM.$sideBySideRightLayer.classList.add("d-none");
       if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
         DOM.$sideBySideLeftLayer.style.left = "calc(50% + 15px)";
@@ -299,6 +303,7 @@ class MenuNavigation {
       break;
     case "myaccount":
     case "informationsScreen":
+      DOM.$tabContainer.style.height = "0px";
       DOM.$whiteScreen.style.backgroundColor = getComputedStyle(document.body).getPropertyValue("--false-white");
       document.body.style.overflowY = "scroll";
       DOM.$whiteScreen.classList.remove("d-none");
@@ -364,6 +369,10 @@ class MenuNavigation {
     // on cache le menu de navigation
     this.hide();
 
+    if (!DOM.$whiteScreen.classList.contains("d-none")) {
+      DOM.$tabContainer.style.height = "0px";
+    }
+
     // on procede à l'affichage du panneau
     if (scrollIndex !== -1) {
       Globals.currentScrollIndex = scrollIndex;
@@ -423,6 +432,7 @@ class MenuNavigation {
     case "compareLayers1":
       DOM.$tabContainer.style.top = "100vh";
       DOM.$compareLayers1Window.classList.add("d-none");
+      DOM.$bottomButtons.style.bottom = "calc(42px + var(--safe-area-inset-bottom))";
       DOM.$sideBySideLeftLayer.classList.remove("d-none");
       Globals.currentScrollIndex = 0;
       isSpecific = true;
@@ -432,6 +442,7 @@ class MenuNavigation {
       DOM.$tabContainer.style.top = "100vh";
       DOM.$sideBySideLeftLayer.style.removeProperty("left");
       DOM.$compareLayers2Window.classList.add("d-none");
+      DOM.$bottomButtons.style.bottom = "calc(42px + var(--safe-area-inset-bottom))";
       DOM.$sideBySideRightLayer.classList.remove("d-none");
       Globals.currentScrollIndex = 0;
       isSpecific = true;