diff --git a/app/components/registration-form.hbs b/app/components/registration-form.hbs index 4cb8e45..f5cb86c 100644 --- a/app/components/registration-form.hbs +++ b/app/components/registration-form.hbs @@ -1,14 +1,18 @@
-

Sign up for Cats Weekly™️

+

Sign up for Cats Weekly

Just fill in the information below and we'll keep you up to date with all the latest and greatest news about cats.

- - - - + + + + + + + +
diff --git a/app/index.html b/app/index.html index 0b5265f..5340954 100644 --- a/app/index.html +++ b/app/index.html @@ -1,9 +1,9 @@ - + - + A11y Form diff --git a/app/styles/components/registration-form.scss b/app/styles/components/registration-form.scss index b655eca..d34b72b 100644 --- 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 index bf23dab..c5ea9ae 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,2 +1,6 @@ -

Ember a11y Form Workshop

- \ No newline at end of file +
+

Ember a11y Form Workshop

+
+
+ +
\ No newline at end of file diff --git a/tests/acceptance/visit-registration-page-test.js b/tests/acceptance/visit-registration-page-test.js index 15aafd6..4526c36 100644 --- 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 index ee25ce5..8cb0867 100644 --- 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); }); });