From 00200129455013f70d830ab8e546aeea6db71dfd Mon Sep 17 00:00:00 2001
From: Todd Jordan <todd.jordan@inin.com>
Date: Fri, 20 May 2016 01:29:26 -0400
Subject: [PATCH] make super-rentals accessible

simpler input

remove console.logs

remove another console log

fix role for options
---
 app/components/list-filter.js               | 3 +--
 app/templates/application.hbs               | 2 +-
 app/templates/components/list-filter.hbs    | 4 +++-
 app/templates/components/location-map.hbs   | 2 +-
 app/templates/components/rental-listing.hbs | 4 ++--
 app/templates/index.hbs                     | 4 ++--
 bower.json                                  | 3 ++-
 package.json                                | 2 ++
 tests/acceptance/list-rentals-test.js       | 7 +++++++
 vendor/ember-tutorial.css                   | 7 +++++++
 10 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/components/list-filter.js b/app/components/list-filter.js
index c44edea11..22ddf6d91 100644
--- a/app/components/list-filter.js
+++ b/app/components/list-filter.js
@@ -10,8 +10,7 @@ export default Ember.Component.extend({
   },
 
   actions: {
-    handleFilterEntry() {
-      let filterInputValue = this.get('value');
+    handleFilterEntry(filterInputValue) {
       let filterAction = this.get('filter');
       filterAction(filterInputValue).then((filteredResults) => this.set('results', filteredResults));
     }
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index a5cca3c45..5f5196662 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -15,7 +15,7 @@
     </div>
   </div>
   <div class="body">
-    {{outlet}}
+    {{focusing-outlet}}
   </div>
 </div>
 
diff --git a/app/templates/components/list-filter.hbs b/app/templates/components/list-filter.hbs
index 63253902e..a55ab4671 100644
--- a/app/templates/components/list-filter.hbs
+++ b/app/templates/components/list-filter.hbs
@@ -1,2 +1,4 @@
-{{input value=value key-up=(action 'handleFilterEntry') class="light" placeholder="Filter By City"}}
+<label for="filterByCity" class="screen-reader">Filter By City</label>
+<input type="text" id="filterByCity" value={{value}} onkeyup={{action "handleFilterEntry" value="target.value"}} class="light" placeholder="Filter By City" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="rental-list">
+
 {{yield results}}
diff --git a/app/templates/components/location-map.hbs b/app/templates/components/location-map.hbs
index 505854b1f..b2576dec0 100644
--- a/app/templates/components/location-map.hbs
+++ b/app/templates/components/location-map.hbs
@@ -1 +1 @@
-<div class="map-container"></div>
+<div class="map-container" aria-hidden="true" tabindex="-1"></div>
diff --git a/app/templates/components/rental-listing.hbs b/app/templates/components/rental-listing.hbs
index 070cb708e..647a24e19 100644
--- a/app/templates/components/rental-listing.hbs
+++ b/app/templates/components/rental-listing.hbs
@@ -1,6 +1,6 @@
 <article class="listing">
-  <a {{action 'toggleImageSize'}} class="image {{if isWide "wide"}}">
-    <img src="{{rental.image}}" alt="">
+  <a {{action 'toggleImageSize'}} class="image {{if isWide "wide"}}" aria-hidden="true" tabindex="-1">
+    <img src="{{rental.image}}" alt="image of rental">
     <small>View Larger</small>
   </a>
   <h3>{{rental.title}}</h3>
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index d70ab91bd..8465407e0 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -14,9 +14,9 @@
 {{#list-filter
    filter=(action 'filterByCity')
    as |rentals|}}
-  <ul class="results">
+  <ul id="rental-list" class="results" role="listbox">
     {{#each rentals as |rentalUnit|}}
-      <li>{{rental-listing rental=rentalUnit}}</li>
+      <li role="option">{{rental-listing rental=rentalUnit}}</li>
     {{/each}}
   </ul>
 {{/list-filter}}
diff --git a/bower.json b/bower.json
index dc138c023..0b4f1e50d 100644
--- a/bower.json
+++ b/bower.json
@@ -7,6 +7,7 @@
     "ember-qunit-notifications": "0.1.0",
     "es5-shim": "^4.0.5",
     "pretender": "~0.10.1",
-    "Faker": "~3.0.0"
+    "Faker": "~3.0.0",
+    "axe-core": "^1.1.1"
   }
 }
diff --git a/package.json b/package.json
index d161897b7..12121fa4f 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
   "license": "MIT",
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.2",
+    "ember-a11y": "0.1.8",
+    "ember-a11y-testing": "0.1.0",
     "ember-ajax": "0.7.1",
     "ember-cli": "^2.5.0",
     "ember-cli-app-version": "^1.0.0",
diff --git a/tests/acceptance/list-rentals-test.js b/tests/acceptance/list-rentals-test.js
index 8ae468c6d..31addc848 100644
--- a/tests/acceptance/list-rentals-test.js
+++ b/tests/acceptance/list-rentals-test.js
@@ -1,7 +1,14 @@
+/* globals axe */
 import { test } from 'qunit';
 import moduleForAcceptance from 'super-rentals/tests/helpers/module-for-acceptance';
 import Ember from 'ember';
 
+axe.ember.testOptions = {
+  "rules": {
+    "color-contrast": { enabled: false }
+  }
+};
+
 let StubMapsService = Ember.Service.extend({
   getMapElement() {
     return document.createElement('div');
diff --git a/vendor/ember-tutorial.css b/vendor/ember-tutorial.css
index 3b91424b8..5a9935b25 100644
--- a/vendor/ember-tutorial.css
+++ b/vendor/ember-tutorial.css
@@ -300,3 +300,10 @@ p {
     height: 200px;
     width: 200px;
 }
+.screen-reader{
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px; width: 1px;
+  margin: -1px; padding: 0; border: 0;
+}