checkpoint-1

dbollinger · Apr 23, 2020 · 0311817 · 0311817
1 parent 5ff200e
commit 0311817
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 16 deletions.
diff --git a/app/components/registration-form.hbs b/app/components/registration-form.hbs
@@ -1,14 +1,18 @@
 <div class="registration-form">
   <div class="registration-form__info">
-    <h3>Sign up for Cats Weekly™️</h3>
+    <h2>Sign up for Cats Weekly</h2>
     <p>Just fill in the information below and we'll keep you up to date with all the latest and greatest news about
       cats.</p>
   </div>
   <div class="registration-form__fields">
-    <input placeholder="First Name" />
-    <input placeholder="Last Name" />
-    <input placeholder="Email Address" />
-    <input placeholder="How many cats do you own?" />
+    <label for="first-name">First Name</label>
+    <input id="first-name" placeholder="Henry" />
+    <label for="last-name">Last Name</label>
+    <input id="last-name" placeholder="Ford" />
+    <label for="email-address">Email Address</label>
+    <input id="email-address" placeholder="[email protected]" />
+    <label for="cats-owned">How many cats have you owned?</label>
+    <input id="cats-owned" type="number" placeholder="23" />
   </div>
   <div class="registration-form__actions">
     <button {{on "click" (fn this.handleSubmit)}}>Sign up</button>

diff --git a/app/index.html b/app/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <!-- <title>A11y Form</title> -->
+    <title>A11y Form</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 

diff --git a/app/styles/components/registration-form.scss b/app/styles/components/registration-form.scss
@@ -1,7 +1,7 @@
 $border-color: #ddd;
-$button-background-color: #ff3d3d;
+$button-background-color: darken(#ff3d3d, 16%);
 $button-text-color: white;
-$focus-ring-color: #b1c2de;
+$focus-ring-color: darken(#b1c2de, 10%);
 
 // Workshop Exercise Styles
 
@@ -18,6 +18,26 @@ $focus-ring-color: #b1c2de;
   outline: 3px solid $focus-ring-color;
 }
 
+::-webkit-input-placeholder {
+	 color: #767676;
+	 opacity: 1;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+	 color: #767676;
+	 opacity: 1;
+}
+
+::-moz-placeholder {  /* Firefox 19+ */
+	 color: #767676;
+	 opacity: 1;
+}
+
+:-ms-input-placeholder {
+	 color: #767676;
+	 opacity: 1;
+}
+
 // End Workshop Exercise Styles
 
 
@@ -46,7 +66,7 @@ $focus-ring-color: #b1c2de;
   appearance: none;
   border: 1px solid $border-color;
   padding: 0.375rem 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1.25rem;
 }
 
 .registration-form__actions button {

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,2 +1,6 @@
-<h1>Ember a11y Form Workshop</h1>
-<RegistrationForm />
+<header>
+  <h1>Ember a11y Form Workshop</h1>
+</header>
+<main>
+  <RegistrationForm />
+</main>
diff --git a/tests/acceptance/visit-registration-page-test.js b/tests/acceptance/visit-registration-page-test.js
@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { visit, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
-// import a11yAudit from 'ember-a11y-testing/test-support/audit';
+import a11yAudit from 'ember-a11y-testing/test-support/audit';
 
 module('Acceptance | visit registration page', function(hooks) {
   setupApplicationTest(hooks);
@@ -11,6 +11,6 @@ module('Acceptance | visit registration page', function(hooks) {
 
     assert.equal(currentURL(), '/');
 
-    // await a11yAudit();
+    await a11yAudit();
   });
 });
diff --git a/tests/integration/components/registration-form-test.js b/tests/integration/components/registration-form-test.js
@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-// import a11yAudit from 'ember-a11y-testing/test-support/audit';
+import a11yAudit from 'ember-a11y-testing/test-support/audit';
 
 module('Integration | Component | registration-form', function (hooks) {
   setupRenderingTest(hooks);
@@ -12,6 +12,6 @@ module('Integration | Component | registration-form', function (hooks) {
 
     assert.dom(this.element).exists();
 
-    // await a11yAudit(this.element);
+    await a11yAudit(this.element);
   });
 });