make super-rentals accessible

simpler input

remove console.logs

remove another console log

fix role for options

couple of more improvements

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

app/templates/application.hbs

@@ -15,7 +15,7 @@
     </div>
   </div>
   <div class="body">
-    {{outlet}}
+    {{focusing-outlet}}
   </div>
 </div>
 

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-autocomplete="inline" aria-expanded="true" aria-owns="rental-list">
+
 {{yield results}}

app/templates/components/location-map.hbs

@@ -1 +1 @@
-<div class="map-container"></div>
+<div class="map-container" aria-hidden="true" tabindex="-1"></div>

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>

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" tabindex="0">{{rental-listing rental=rentalUnit}}</li>
     {{/each}}
   </ul>
 {{/list-filter}}

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

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

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

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;
+}