WIP Jenweber a11y updates

app/components/location-map.js

@@ -2,14 +2,12 @@ import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 
 export default Component.extend({
-  classNames: ['map-container'],
   mapElement: service(),
 
   didInsertElement() {
     this._super(...arguments);
     this.mapElement.getMapElement(this.location).then((mapElement) => {
       this.element.append(mapElement);
     });
-
   }
 });

app/services/map-element.js

@@ -29,7 +29,7 @@ export default Service.extend({
 
   _createMapElement() {
     let element = document.createElement('div');
-    element.className = 'map';
+    element.className = 'map-img';
     return element;
   },
 });

app/templates/about.hbs

@@ -1,6 +1,9 @@
-<div class="jumbo">
+<article class="jumbo">
   <div class="right tomster"></div>
-  <h2>About Super Rentals</h2>
+  <header>
+  <h2 aria-live="polite">About Super Rentals</h2>
+  </header>
+  <section>
   <p>
     The Super Rentals website is a delightful project created to explore Ember.
     By building a property rental site, we can simultaneously imagine traveling
@@ -9,4 +12,5 @@
   {{#link-to "index" class="button"}}
     Get Started!
   {{/link-to}}
-</div>
+  </section>
+</article>

app/templates/application.hbs

@@ -1,10 +1,12 @@
 <div class="container">
-  <div class="menu">
-    {{#link-to "index"}}
-      <h1>
-        <em>SuperRentals</em>
-      </h1>
-    {{/link-to}}
+  <div class="menu" role="navigation">
+    <h1>
+      <em>
+        {{#link-to "index"}}
+          SuperRentals
+        {{/link-to}}
+      </em>
+    </h1>
     <div class="links">
       {{#link-to "about" class="menu-about"}}
         About
@@ -14,7 +16,7 @@
       {{/link-to}}
     </div>
   </div>
-  <div class="body">
+  <div class="body" role="main">
     {{outlet}}
   </div>
 </div>

app/templates/components/list-filter.hbs

@@ -1,7 +1,11 @@
+<label for="filterByCity" class="screen-reader">Filter By City</label>
 {{input
+  id="filterByCity"
   value=this.value
   key-up=(action "handleFilterEntry")
   class="light"
   placeholder="Filter By City"
+  role="search"
 }}
+<span class="result-status" role="status">{{this.results.length}} results found {{if this.value (concat "for \"" this.value "\"")}}</span>
 {{yield this.results}}

app/templates/components/location-map.hbs

@@ -1 +1 @@
-{{yield}}
+{{yield}}

app/templates/components/rental-listing.hbs

@@ -1,14 +1,22 @@
 <article class="listing">
-  <a
-    onclick={{action "toggleImageSize"}}
-    class="image {{if this.isWide "wide"}}"
-    role="button"
-  >
-    <img src={{this.rental.image}} alt="">
-    <small>View Larger</small>
-  </a>
-  <div class="details">
-    <h3>{{link-to this.rental.title "rentals.show" this.rental class=this.rental.id}}</h3>
+  <header>
+    <h3>
+      {{link-to this.rental.title "rentals.show" this.rental class=this.rental.id}}
+    </h3>
+  </header>
+  <section class="picture {{if this.isWide "wide"}}">
+    <a onclick={{action "toggleImageSize"}} class="image" role="button">
+      <img src={{this.rental.image}} alt="Photograph of {{this.rental.title}}">
+      <small>
+        {{#if this.isWide}}
+          Show Smaller Image
+        {{else}}
+          Show Larger Image
+        {{/if}}
+      </small>
+    </a>
+  </section>
+  <section class="details">
     <div class="detail owner">
       <span>Owner:</span> {{this.rental.owner}}
     </div>
@@ -21,6 +29,14 @@
     <div class="detail bedrooms">
       <span>Number of bedrooms:</span> {{this.rental.bedrooms}}
     </div>
-  </div>
-  <LocationMap @location={{this.rental.city}}/>
+  </section>
+  <section class="map">
+    <LocationMap
+      @location={{this.rental.city}}
+      class="map-container"
+      aria-hidden="true"
+      tabindex="-1"
+      role="presentation"
+    />
+  </section>
 </article>

app/templates/contact.hbs

@@ -1,20 +1,24 @@
-<div class="jumbo">
+<article 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>
-  <address>
-    Super Rentals HQ
+  <header>
+    <h2 aria-live="polite">Contact Us</h2>
+  </header>
+  <section>
     <p>
-      1212 Test Address Avenue<br>
-      Testington, OR 97233
+      Super Rentals Representatives would love to help you<br>
+      choose a destination or answer any questions you may have.
     </p>
-    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
-    <a href="mailto:[email protected]">[email protected]</a>
-  </address>
-  {{#link-to "about" class="button"}}
-    About
-  {{/link-to}}
-</div>
+    <address>
+      Super Rentals HQ
+      <p>
+        1212 Test Address Avenue<br>
+        Testington, OR 97233
+      </p>
+      <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
+      <a href="mailto:[email protected]">[email protected]</a>
+    </address>
+    {{#link-to "about" class="button"}}
+      About
+    {{/link-to}}
+  </section>
+</article>

app/templates/rentals.hbs

@@ -1,9 +1,15 @@
-<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.</p>
-  {{#link-to "about" class="button"}}
-    About Us
-  {{/link-to}}
-</div>
-{{outlet}}
+<article class="jumbo">
+  <div class="right tomster" role="img" aria-labelledby="logo-caption">
+    <p id="logo-caption" class="screen-reader">Learning Tomster Mascot</p>
+  </div>
+  <header>
+    <h2 aria-live="polite">Welcome!</h2>
+  </header>
+  <section>
+    <p>We hope you find exactly what you're looking for in a place to stay.</p>
+    {{#link-to "about" class="button"}}
+      About Us
+    {{/link-to}}
+  </section>
+</article>
+{{outlet}}

config/environment.js

@@ -23,6 +23,12 @@ module.exports = function(environment) {
     }
   };
 
+  ENV['ember-a11y-testing'] = {
+    componentOptions: {
+      turnAuditOff: true, // Change to run a11y audit on all dev build and serves
+    }
+  };
+
   if (environment === 'development') {
     // ENV.APP.LOG_RESOLVER = true;
     // ENV.APP.LOG_ACTIVE_GENERATION = true;

package.json

@@ -21,6 +21,7 @@
     "@ember/jquery": "^0.5.2",
     "@ember/optional-features": "^0.6.3",
     "broccoli-asset-rev": "^2.7.0",
+    "ember-a11y-testing": "^0.5.7",
     "ember-ajax": "^4.0.1",
     "ember-cli": "~3.8.1",
     "ember-cli-app-version": "^3.2.0",

tests/acceptance/list-rentals-test.js

@@ -3,6 +3,7 @@ import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { resolve } from 'rsvp';
+import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import {
   click,
   currentURL,
@@ -62,4 +63,24 @@ module('Acceptance | list rentals', function(hooks) {
     assert.ok(this.element.querySelector('.show-listing h2').textContent.includes("Grand Old Mansion"), 'should list rental title');
     assert.ok(this.element.querySelector('.show-listing .description'), 'should list a description of the property');
   });
+
+
+  /*
+    a11yAudit is a special feature of the ember-a11y-testing addon. It helps identify
+    accessibility issues in an app and recommends solutions. For more information,
+    visit https://github.com/ember-a11y/ember-a11y-testing
+  */
+
+  test('accessibility check of rentals route', async function (assert) {
+  await visit('/rentals');
+  await a11yAudit();
+  assert.ok(true, 'no a11y errors found!');
+});
+
+test('accessibility check of rentals/:id route', async function (assert) {
+  await visit('/rentals/grand-old-mansion');
+  await a11yAudit();
+  assert.ok(true, 'no a11y errors found!');
+});
+
 });

tests/integration/components/rental-property-type-test.js

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rental property type', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders correctly for a Standalone rental', async function(assert) {
+    this.set('inputValue', 'Estate');
+    await render(hbs`{{rental-property-type inputValue}}`);
+    assert.equal(this.element.textContent.trim(), 'Standalone');
+  });
+
+  test('it renders correctly for a Community rental', async function(assert) {
+    this.set('inputValue', 'Apartment');
+    await render(hbs`{{rental-property-type inputValue}}`);
+    assert.equal(this.element.textContent.trim(), 'Community');
+  });
+
+})