[WIP] Global accessibility awareness day

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/components/rental-listing.js

@@ -1,13 +1,10 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  isImageShowing: false,
+  isWide: false,
   actions: {
-    imageShow() {
-      this.set('isImageShowing', true);
-    },
-    imageHide() {
-      this.set('isImageShowing', false);
+    toggleImageSize() {
+      this.toggleProperty('isWide');
     }
   }
 });

app/services/maps.js

@@ -26,8 +26,6 @@ export default Ember.Service.extend({
   createMapElement() {
     let element = document.createElement('div');
     element.className = 'map';
-    element.setAttribute('style', 'width:300px;height:300px;');
     return element;
   }
-
 });

app/templates/about.hbs

@@ -1,7 +1,12 @@
-<h2>About Super Rentals</h2>
-
-<p>The Super Rentals website is a delightful project created to explore Ember.<br>
-  By building a property rental site, we can simultaneously imagine traveling<br>
-  AND building Ember applications simultaneously.</p>
-
-{{#link-to 'contact'}}Click here to contact us.{{/link-to}}
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>About Super Rentals</h2>
+  <p>
+    The Super Rentals website is a delightful project created to explore Ember.
+    By building a property rental site, we can simultaneously imagine traveling
+    AND building Ember applications.
+  </p>
+  {{#link-to 'index' class="button"}}
+    Get Started!
+  {{/link-to}}
+</div>

app/templates/application.hbs

@@ -1,3 +1,21 @@
-<h2 id="title">Welcome to Ember</h2>
+<div class="container">
+  <div class="menu">
+    {{#link-to 'index'}}
+      <h1 class="left">
+        <em>SuperRentals</em>
+      </h1>
+    {{/link-to}}
+    <div class="left links">
+      {{#link-to 'about'}}
+        About
+      {{/link-to}}
+      {{#link-to 'contact'}}
+        Contact
+      {{/link-to}}
+    </div>
+  </div>
+  <div class="body">
+    {{focusing-outlet}}
+  </div>
+</div>
 
-{{outlet}}

app/templates/components/list-filter.hbs

@@ -1,2 +1,4 @@
-City: {{input value=value key-up=(action 'handleFilterEntry')}}
+<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,14 +1,20 @@
-<h2>{{rental.title}}</h2>
-<p>Owner: {{rental.owner}}</p>
-<p>Type: {{rental-property-type rental.type}} - {{rental.type}}</p>
-<p>Location: {{rental.city}}</p>
-<p>Number of bedrooms: {{rental.bedrooms}}</p>
-{{#if isImageShowing}}
-  <p>
-    <img alt={{rental.type}} src={{rental.image}} width="500"/>
-  </p>
-  <button {{action "imageHide"}}>Hide image</button>
-{{else}}
-  <button {{action "imageShow"}}>Show image</button>
-{{/if}}
-{{location-map location=rental.city}}
+<article class="listing">
+  <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>
+  <div class="detail">
+    <span>Owner:</span> {{rental.owner}}
+  </div>
+  <div class="detail">
+    <span>Type:</span> {{rental-property-type rental.type}} - {{rental.type}}
+  </div>
+  <div class="detail">
+    <span>Location:</span> {{rental.city}}
+  </div>
+  <div class="detail">
+    <span>Number of bedrooms:</span> {{rental.bedrooms}}
+  </div>
+  {{location-map location=rental.city}}
+</article>

app/templates/contact.hbs

@@ -1,18 +1,18 @@
-<p>Super Rentals Representatives would love to help you choose a destination or answer
-any questions you may have.</p>
-
-<p>Contact us today:</p>
-
-<p>
-  Super Rentals HQ
-  <address>
-    1212 Test Address Avenue<br>
-    Testington, OR 97233
-  </address>
-</p>
-
-<p><a href="tel:503.555.1212">(503)555-1212</a></p>
-
-<p><a href="mailto:[email protected]">[email protected]</a></p>
-
-{{#link-to 'about'}}About{{/link-to}}
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>Contact Us</h2>
+  <p>Super Rentals Representatives would love to help you<br>choose a destination or answer
+    any questions you may have.</p>
+  <p>
+    Super Rentals HQ
+    <address>
+      1212 Test Address Avenue<br>
+      Testington, OR 97233
+    </address>
+    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
+    <a href="mailto:[email protected]">[email protected]</a>
+  </p>
+  {{#link-to 'about' class="button"}}
+    About
+  {{/link-to}}
+</div>

app/templates/index.hbs

@@ -1,17 +1,22 @@
-<h1> Welcome to Super Rentals </h1>
 
-We hope you find exactly what you're looking for in a place to stay.
-<br/><br/>
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>Welcome!</h2>
+  <p>
+    We hope you find exactly what you're looking for in a place to stay.
+    <br>Browse our listings, or use the search box above to narrow your search.
+  </p>
+  {{#link-to 'about' class="button"}}
+    About Us
+  {{/link-to}}
+</div>
 
 {{#list-filter
    filter=(action 'filterByCity')
    as |rentals|}}
-  <ul>
+  <ul id="rental-list" class="results" role="listbox">
     {{#each rentals as |rentalUnit|}}
-      {{rental-listing rental=rentalUnit}}
+      <li role="option" tabindex="0">{{rental-listing rental=rentalUnit}}</li>
     {{/each}}
   </ul>
 {{/list-filter}}
-
-{{#link-to 'about'}}About{{/link-to}}
-{{#link-to 'contact'}}Click here to contact us.{{/link-to}}

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",
@@ -34,6 +36,7 @@
     "ember-cli-qunit": "^1.4.0",
     "ember-cli-release": "0.2.8",
     "ember-cli-sri": "^2.1.0",
+    "ember-cli-tutorial-style": "0.0.1",
     "ember-cli-uglify": "^1.2.0",
     "ember-data": "^2.5.2",
     "ember-export-application-global": "^1.0.5",

tests/acceptance/list-rentals-test.js

@@ -0,0 +1,55 @@
+/* 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');
+  }
+});
+
+moduleForAcceptance('Acceptance | list rentals', {
+  beforeEach() {
+    this.application.register('service:mockMaps', StubMapsService);
+    this.application.inject('component:location-map', 'maps', 'service:mockMaps');
+  }
+});
+
+test('should initially list 3 rentals', function (assert) {
+  visit('/');
+  andThen(function() {
+    assert.equal(this.$('.results .listing').length, 3);
+  });
+});
+
+test('should link to about page', function (assert) {
+  visit('/');
+  click('a:contains("About")');
+  andThen(function () {
+    assert.equal(currentURL(), '/about');
+  });
+});
+
+test('should link to contacts page', function (assert) {
+  visit('/');
+  click('a:contains("Contact")');
+  andThen(function () {
+    assert.equal(currentURL(), '/contact');
+  });
+});
+
+test('should list 1 rental when filtering by Seattle', function (assert) {
+  visit('/');
+  fillIn('.list-filter input', 'seattle');
+  keyEvent('.list-filter input', 'keyup', 69);
+  andThen(function () {
+    assert.equal(this.$('.results .listing').length, 1);
+  });
+});

tests/integration/components/rental-listing-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+moduleForComponent('rental-listing', 'Integration | Component | rental listing', {
+  integration: true
+});
+
+test('should toggle wide class on click', function(assert) {
+  assert.expect(3);
+  let stubRental = Ember.Object.create({
+    image: 'fake.png',
+    title: 'test-title',
+    owner: 'test-owner',
+    type: 'test-type',
+    city: 'test-city',
+    bedrooms: 3
+  });
+  this.set('rentalObj', stubRental);
+  this.render(hbs`{{rental-listing rental=rentalObj}}`);
+  assert.equal(this.$('.image.wide').length, 0, 'initially rendered small');
+  this.$('.image').click();
+  assert.equal(this.$('.image.wide').length, 1, 'rendered wide after click');
+  this.$('.image').click();
+  assert.equal(this.$('.image.wide').length, 0, 'rendered small after second click');
+});