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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions