From 8dbefaf0c61b72a9e4d91bb41cacbc92108bc7d9 Mon Sep 17 00:00:00 2001
From: annaszalkiewicz <anna@mywebgraphicdesign.com>
Date: Thu, 12 Jul 2018 01:15:50 +0200
Subject: [PATCH] Edit restaurant details and add aria-labels for screen
 readers

---
 css/styles.css        |  5 ++++-
 index.html            |  2 +-
 js/main.js            |  1 +
 js/restaurant_info.js |  4 +++-
 restaurant.html       | 12 +++++++++++-
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 1c2aa92..b0f66bd 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -226,6 +226,9 @@ details, footer, header, nav, section {
   padding-top: 1em;
   font-weight: bold;
 }
+.restaurant-hours-heading, .restaurant-address {
+  padding: 1em;
+}
 #restaurant-hours {
   padding: 1em 0;
   min-width: 300px;
@@ -398,7 +401,7 @@ details, footer, header, nav, section {
     padding: 1em 1em 1em 3em;
   }
   #restaurant-hours {
-    padding: 0 1em 1em 3em;
+    padding: 1em 1em 1em 3em;
   }
   #reviews-list > li > p:nth-child(3) {
     right: 2.5em;
diff --git a/index.html b/index.html
index ab7643c..ef79eac 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@ <h1 class="title">
     </section>
     <section id="search">
       <div class="filter-options">
-        <h2 class="filter-header" tabindex="0">Select Neighborhood and/or Cuisine</h2>
+        <h2 class="filter-header">What restaurant are you looking for?</h2>
         <label for="neighborhoods-select" class="select-label">Select neighborhood:</label>
         <select id="neighborhoods-select" name="neighborhoods" onchange="updateRestaurants()">
           <option value="all">All Neighborhoods</option>
diff --git a/js/main.js b/js/main.js
index dc00d8f..4247742 100644
--- a/js/main.js
+++ b/js/main.js
@@ -163,6 +163,7 @@ createRestaurantHTML = (restaurant) => {
 	more.innerHTML = 'View Details';
 	more.href = DBHelper.urlForRestaurant(restaurant);
 	more.setAttribute('role', 'button');
+	more.setAttribute('tabindex', '0');
 	more.classList.add('view-details');
 	li.append(more);
 
diff --git a/js/restaurant_info.js b/js/restaurant_info.js
index 3d8a257..7e4e1c6 100644
--- a/js/restaurant_info.js
+++ b/js/restaurant_info.js
@@ -56,7 +56,8 @@ fillRestaurantHTML = (restaurant = self.restaurant) => {
 	name.innerHTML = restaurant.name;
 
 	const address = document.getElementById('restaurant-address');
-	address.innerHTML = restaurant.address;
+  address.innerHTML = restaurant.address;
+  address.setAttribute('aria-label', 'Address' + restaurant.address);
 
 	const image = document.getElementById('restaurant-img');
 	image.className = 'restaurant-img';
@@ -65,6 +66,7 @@ fillRestaurantHTML = (restaurant = self.restaurant) => {
 
 	const cuisine = document.getElementById('restaurant-cuisine');
 	cuisine.innerHTML = restaurant.cuisine_type;
+	cuisine.setAttribute('aria-label', 'Cuisine type' + restaurant.cuisine_type);
 
 	// fill operating hours
 	if (restaurant.operating_hours) {
diff --git a/restaurant.html b/restaurant.html
index c009095..95d818b 100644
--- a/restaurant.html
+++ b/restaurant.html
@@ -46,8 +46,18 @@ <h1 id="restaurant-name"></h1>
       </div>
       <div class="restaurant-right">
         <p id="restaurant-cuisine" tabindex="0"></p>
+        <h2 class="restaurant-address">
+          Location:
+        </h2>
+        <hr>
         <p id="restaurant-address" tabindex="0"></p>
-        <table id="restaurant-hours" tabindex="0"></table>
+        <section class="restaurant-hours">
+          <h2 class="restaurant-hours-heading" tabindex="0">
+            Open Hours:
+          </h2>
+          <hr>
+          <table id="restaurant-hours" tabindex="0"></table>
+        </section>
       </div>
     </section>
     <!-- end restaurant -->