search

adopted-ember-addons / ember-paper

The Ember approach to Material Design.
https://ember-paper.netlify.app/
MIT License
888 stars 333 forks source link

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

Open hergaiety opened 4 years ago

hergaiety commented 4 years ago

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 https://github.com/miguelcobain/ember-paper/pull/692

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

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