Skip to content

Inputs with errors are missing aria attributes #118

@angelikatyborska

Description

@angelikatyborska

Inputs with errors should have an aria-invalid="true" attribute, as well as aria-errormessage, whose value is the id of the element with the error message.

Current output of ui_input

<label for="profile_form_street_address">
  Street address
</label>
<input
  id="profile_form_street_address"
  maxlength="255"
  name="profile_form[street_address]"
  type="text"
  value=""
>  
<span
  class="u-fg-warning"
  phx-feedback-for="profile_form[street_address]"
>
  can't be blank
</span>

Improved output of ui_input

<label for="profile_form_street_address">
  Street address
</label>
<input
  id="profile_form_street_address"
  maxlength="255"
  name="profile_form[street_address]"
  type="text"
  value=""
  aria-invalid="true"
  aria-errormessage="profile_form_street_address-help-text"
>  
<span
  id="profile_form_street_address-help-text"
  class="u-fg-warning"
  phx-feedback-for="profile_form[street_address]"
>
  can't be blank
</span>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions