Improves the create account modal for screen readers by doing the following:
- Making the
modal-alertsection 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.
aria-describedbyattributes 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
- Moved the social login buttons to the right in the HTML structure so they are not read out first.
aria-labelattributes 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-labelledbyattribute 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 e0d2de73d89cdea13e9681b2daaa52074ee510a5 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.