Skip to content

Form elements that accept required don't set an A11y attribute on the child element #1167

@hergaiety

Description

@hergaiety

Elements such as <PaperInput required={{true}} /> output html that shows validation messages and the label has a class of .md-required, but these do little for accessibility. Any form element that is required should pass through a required or aria-required="true" attribute into the element itself for A11y tools to be able to read. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute

This should apply to Paper Input (including textarea={{true}}, Paper Autocomplete, Ember Select
Ideally Paper Radio Paper Switch and Paper Checkbox as well, but it seems some of that work is a work-in-progress #692


For now, a workaround can be done by doing the following:

<PaperInput
  @label="My Input"
  @required={{true}}
  @passThru={{hash
    required=true
  }} />

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