ngAria should inject missing roles #10012
Description
To do more heavy lifting, ngAria should inject missing roles such as checkbox
and range
where it detects types. Currently, using type="checkbox"
or type="range"
on a <div>
or <md-checkbox>
does not inject a role, leaving the developer responsible for rounding out accessibility support.
For example:
<div type="checkbox" ng-model="data">
Div masquerading as a checkbox
</div>
With ngAria included, this becomes:
<div type="checkbox" ng-model="data" aria-checked="false" aria-invalid="false">
Div masquerading as a checkbox
</div>
ngAria should add role="checkbox"
to any element that is not an <input>
with a type of checkbox
, and similarly for each type it checks. Many of the ARIA attributes added by ngAria are redundant on native inputs. Custom element directives and divs requiring roles to communicate purpose to assistive technologies stand to benefit much more from this module.
Note that tabindex
, aria-label
and keyboard operability are also required to make the above example accessible; this issue is focusing solely on roles.
See this Codepen for a live example.