c401d6411b
Improves the create account modal for screen readers by doing the following:
* Making the `modal-alert` section into an `aria-role="alert"` region and making it show and hide using height instead of display:none so screen readers pick it up. Made a change so the field-related error messages are always shown beneath the field.
* Add `aria-invalid` and `aria-describedby` attributes to each field in the modal, so the screen reader will read out the error hint on error. This necessitated an Ember component extension to allow both the `aria-*` attributes to be bound and to render on `{{input}}`.
* Moved the social login buttons to the right in the HTML structure so they are not read out first.
* Added `aria-label` attributes to the login buttons so they can have different content for screen readers.
* In some cases for modals, the title that should be used for the `aria-labelledby` attribute is within the modal content and not the discourse-modal-title title. This introduces a new titleAriaElementId property to the d-modal component that is then used by the create-account modal to read out the title
------
This is the same as e0d2de73d8 but
fixes the Ember-input-component-extension to use the public
Ember components TextField and TextArea instead of the private
TextSupport so the extension works in both normal Ember and
Ember CLI.
69 lines
2.0 KiB
JavaScript
69 lines
2.0 KiB
JavaScript
import {
|
|
acceptance,
|
|
exists,
|
|
query,
|
|
} from "discourse/tests/helpers/qunit-helpers";
|
|
import { click, fillIn, visit } from "@ember/test-helpers";
|
|
import { test } from "qunit";
|
|
|
|
acceptance("Create Account - User Fields", function (needs) {
|
|
needs.site({
|
|
user_fields: [
|
|
{
|
|
id: 34,
|
|
name: "I've read the terms of service",
|
|
field_type: "confirm",
|
|
required: true,
|
|
},
|
|
{
|
|
id: 35,
|
|
name: "What is your pet's name?",
|
|
field_type: "text",
|
|
required: true,
|
|
},
|
|
{
|
|
id: 36,
|
|
name: "What's your dad like?",
|
|
field_type: "text",
|
|
required: false,
|
|
},
|
|
],
|
|
});
|
|
|
|
test("create account with user fields", async function (assert) {
|
|
await visit("/");
|
|
await click("header .sign-up-button");
|
|
|
|
assert.ok(exists(".create-account"), "it shows the create account modal");
|
|
assert.ok(exists(".user-field"), "it has at least one user field");
|
|
|
|
await click(".modal-footer .btn-primary");
|
|
assert.equal(
|
|
query("#account-email-validation").innerText.trim(),
|
|
"Please enter an email address"
|
|
);
|
|
|
|
await fillIn("#new-account-name", "Dr. Good Tuna");
|
|
await fillIn("#new-account-password", "cool password bro");
|
|
// without this double fill, field will sometimes being empty
|
|
// got consistent repro by having browser search bar focused when starting test
|
|
await fillIn("#new-account-email", "good.tuna@test.com");
|
|
await fillIn("#new-account-email", "good.tuna@test.com");
|
|
await fillIn("#new-account-username", "goodtuna");
|
|
|
|
assert.ok(
|
|
exists("#username-validation.good"),
|
|
"the username validation is good"
|
|
);
|
|
assert.ok(
|
|
exists("#account-email-validation.good"),
|
|
"the email validation is good"
|
|
);
|
|
|
|
await click(".modal-footer .btn-primary");
|
|
await fillIn(".user-field input[type=text]:nth-of-type(1)", "Barky");
|
|
await click(".user-field input[type=checkbox]");
|
|
await click(".modal-footer .btn-primary");
|
|
});
|
|
});
|