[ngAria] aria-required only applied when ng-model has $error.required

[dpogue]

Based on a Twitter conversation with @marcysutton: https://twitter.com/dpogue/status/569999089967849472

If I have <input type="text" ng-model="username" name="username" required> and I'm using ngAria then it should have the aria-required attribute added to it.

This currently only happens when the field doesn't have content (i.e., when username.$error.required is true):
https://github.com/angular/angular.js/blob/master/src/ngAria/aria.js#L292-L298

[marcysutton]

A native input doesn't need aria-required. Custom elements do, though. If it was <md-checkbox role="checkbox" required>, aria-required would need to be added. That said, I'm already seeing ngAria correctly add the attribute on a custom element with required: http://codepen.io/marcysutton/pen/wBwVqM

[Narretz]

So this works as expected @marcysutton?

[marcysutton]

Unless I'm missing something, it looked like it worked fine to me. @dpogue can you elaborate? Is the issue happening when ng-model is set up in a specific way? Can you provide a Codepen or Plunker that shows the issue?

[marcysutton]

@dpogue can you reply to this issue? Otherwise we'll close it as not a bug.

[dpogue]

My concern was just that the aria-required attribute was being added and removed based on the error state of the ngModel, instead of being added once and maintained. If that's not an issue, then this can be closed.

[Narretz]

According to this mdn example, it looks like aria-required is always present: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute

So, for non-native inputs (controls) with ng-model that have a required attribute should this mean?

• if they have only the required attribute, ngAria should add aria-required once.
• if they have ngRequired, they should watch that and toggle aria-required appropriately.

[marcysutton]

That sounds right. Upon looking closer, I found that aria-required in ngAria is super buggy for expected use cases (custom elements with roles). Depending on whether the custom control has type="checkbox" (or other form type) or role="checkbox" (which it needs for assistive tech), it can get out of sync with required. For example:

<some-checkbox type="checkbox" ng-required="true" ng-model="data">
 Checkbox
</some-checkbox>

{
  "type": "checkbox",
  "ng-model": "data",
  "ng-required": "true",
  "tabindex": "0",
  "required": "required",
  "aria-checked": "false",
  "aria-required": "true"
}

By including type=checkbox, aria-required is maintained for both truthy and falsey values. Great, except role=checkbox is needed here, not type, and ngAria should not require both type and role on a custom element: role should suffice.

With role="checkbox" only, for falsey values, aria-required="false" is included correctly from the start. For truthy values, aria-required has a false value. This is a bug with the validator logic in ngAria.

<some-checkbox role="checkbox" show-attrs ng-model="data" required>
  Checkbox
</some-checkbox>

{
  "role": "checkbox",
  "ng-model": "data",
  "ng-required": "true",
  "class": "ng-pristine ng-untouched ng-valid",
  "tabindex": "0",
  "required": "required",
  "aria-checked": "true",
  "aria-required": "false"
}

Pretty much exactly the same thing happens with required–with role=checkbox and required, ngAria adds aria-required="false" when it should be true. With type, it works as expected.