Edit restaurant details and add aria-labels for screen readers

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;

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>

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);
 

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) {

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 -->