mirror of
https://github.com/discourse/discourse.git
synced 2025-02-21 09:21:40 +08:00
e0d2de73d8
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
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");
|
|
});
|
|
});
|