A11Y: Improve create account modal for screen readers (PR #14234)

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 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.

GitHub

This pull request introduces 2 alerts when merging 8522aceee96fa3d054d7aae363b2e7cb0e074d59 into a0fbccf61280a7391caf3e28a6ad31451749086b - view on LGTM.com

new alerts:

  • 2 for Duplicate property