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.
16 lines
379 B
JavaScript
16 lines
379 B
JavaScript
import TextField from "@ember/component/text-field";
|
|
import TextArea from "@ember/component/text-area";
|
|
|
|
export default {
|
|
name: "ember-input-component-extensions",
|
|
|
|
initialize() {
|
|
TextField.reopen({
|
|
attributeBindings: ["aria-describedby", "aria-invalid"],
|
|
});
|
|
TextArea.reopen({
|
|
attributeBindings: ["aria-describedby", "aria-invalid"],
|
|
});
|
|
},
|
|
};
|