feat: implement first accessible point

- update the modal component to work properly - add skip-link to go to search Cover: #20, #21, #24
JeremieLitzler · Mar 8, 2018 · e732c1a · e732c1a
1 parent 62ec35a
commit e732c1a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 18 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -22,6 +22,12 @@
   /* default link text color on hover when background is dark */
   --link-color-hover-on-dark: var(--brand-color);
 
+  /* top layer z-index value */
+  --top-layer: 100;
+  /* define below other layers! */
+  --modal-layer: 90;
+
+  /* end of layer definitions */
   /* default font size */
   --fs-default: 1em;
   /* default line height */
@@ -173,7 +179,10 @@ button {
   padding: var(--default-pad);
   cursor: pointer;
 }
-.btn-default:hover {
+.btn-default:hover,
+.btn-default a:hover,
+.btn-default:focus,
+.btn-default a:focus {
   background-color: var(--bg-dark);
   color: var(--text-light);
   border: 1px solid var(--brand-color);
@@ -197,13 +206,14 @@ button {
 }
 .c-modal {
   display: none;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: var(--bg-light);
   text-align: center;
+  z-index: var(--modal-layer);
 }
 .btn-close-modal {
   position: fixed;
@@ -214,6 +224,21 @@ button {
   width: 100%;
 }
 
+.c-link-on-dark a:hover,
+.c-link-on-dark a:focus {
+  color: var(--link-color-hover-on-dark);
+  text-decoration: underline;
+}
+.c-skip-link {
+  position: absolute;
+  top: -60px;
+  left: 0;
+  z-index: var(--top-layer);
+  margin: var(--default-y-mg) var(--default-x-mg);
+}
+.c-skip-link:focus {
+  top: 0;
+}
 /* ====================== Header ====================== */
 
 header {
@@ -467,10 +492,10 @@ nav h1 a {
 
   .resto-page-container .map-container {
     grid-row: 1 / -1;
-    grid-column: 1 / 8;
+    grid-column: 6 / -1;
   }
-  .map-container ~ section {
-    grid-column: 8 / -1;
+  .restaurant-details-container {
+    grid-column: 1 / 6;
   }
   .map-container > #map {
     height: 100%;
@@ -485,6 +510,7 @@ nav h1 a {
 .reviews-container-modal,
 .restaurant-hours-container-modal {
   display: none;
+  overflow: hidden;
 }
 
 @media screen and (max-width: 500px) {
@@ -517,11 +543,9 @@ nav h1 a {
 .reviews-container-modal {
   line-height: initial;
   overflow-y: scroll;
-  height: initial;
 }
 
 @media screen and (min-width: 650px) {
-  .reviews-container-modal,
   .restaurant-hours-container-modal {
     height: inherit;
   }

diff --git a/index.html b/index.html
@@ -11,9 +11,10 @@
 </head>
 
 <body>
+    <a href="#filters" class="c-skip-link c-btn">Skip to search</a>
     <header>
         <h1>
-            <a href="/">Restaurant Reviews</a>
+            <a class="c-link-on-dark" href="/">Restaurant Reviews</a>
         </h1>
         <nav>
         </nav>
@@ -23,7 +24,7 @@ <h1>
             <div id="map" aria-hidden="true"></div>
         </section>
         <section class="restaurants-container">
-            <div class="filter-options">
+            <div id="filters" class="filter-options">
                 <button class="c-btn btn-default" title="Open the search" class="filter-list" href="#" onclick="document.getElementById('filters-modal').style.display='block'">Search</button>
             </div>
             <ul id="restaurants-list"></ul>
@@ -36,7 +37,7 @@ <h1>
         </a> All Rights Reserved.
     </footer>
     <div id="filters-modal" class="c-modal">
-        <select id="neighborhoods-select" name="neighborhoods" onchange="updateRestaurants()">
+        <select tabindex="-1" id="neighborhoods-select" name="neighborhoods" onchange="updateRestaurants()">
             <option value="all">All Neighborhoods</option>
         </select>
         <select id="cuisines-select" name="cuisines" onchange="updateRestaurants()">

diff --git a/restaurant.html b/restaurant.html
@@ -15,7 +15,7 @@
 
     <header>
         <h1>
-            <a href="/">Restaurant Reviews</a>
+            <a class="c-link-on-dark" href="/">Restaurant Reviews</a>
         </h1>
         <nav>
         </nav>
@@ -25,11 +25,6 @@ <h1>
     </ul>
 
     <main id="maincontent" class="resto-page-container">
-        <!-- Beginning map -->
-        <section class="map-container">
-            <div id="map" aria-hidden="true"></div>
-        </section>
-        <!-- End map -->
         <!-- Beginning restaurant -->
         <section id="restaurant-container" class="restaurant-details-container">
             <h1 id="restaurant-name"></h1>
@@ -64,6 +59,11 @@ <h2>Opening hours</h2>
             </div>
         </section>
         <!-- End reviews -->
+        <!-- Beginning map -->
+        <section class="map-container">
+            <div id="map" aria-hidden="true"></div>
+        </section>
+        <!-- End map -->
     </main>
     <!-- End main -->
     <!-- Beginning footer -->