ngAria should inject missing roles #10012

Closed
marcysutton opened this Issue Nov 12, 2014 · 0 comments

Projects

None yet

2 participants

@marcysutton
Member

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.

Hat tip to @ewinslow for the suggestion in #9254.

@petebacondarwin petebacondarwin added this to the 1.3.x milestone Nov 12, 2014
@marcysutton marcysutton pushed a commit to marcysutton/angular.js that referenced this issue Dec 4, 2014
Marcy Sutton feat(ngAria): Roles added to custom inputs
Adds missing roles: slider, radio, checkbox
Closes #10012
84a9dc9
@marcysutton marcysutton pushed a commit to marcysutton/angular.js that referenced this issue Feb 7, 2015
Marcy Sutton feat(ngAria): Roles added to custom inputs
Adds missing roles: slider, radio, checkbox
Closes #10012
93253df
@marcysutton marcysutton pushed a commit to marcysutton/angular.js that referenced this issue Feb 17, 2015
Marcy Sutton feat(ngAria): Roles added to custom inputs
Adds missing roles: slider, radio, checkbox
Closes #10012
3894b95
@petebacondarwin petebacondarwin added a commit that closed this issue Mar 2, 2015
@petebacondarwin Marcy Sutton + petebacondarwin feat(ngAria): add roles to custom inputs
This change adds the missing roles: `slider`, `radio`, `checkbox`

Closes #10012
Closes #10318
29cdaee
@petebacondarwin petebacondarwin added a commit that referenced this issue Mar 2, 2015
@petebacondarwin Marcy Sutton + petebacondarwin feat(ngAria): add roles to custom inputs
This change adds the missing roles: `slider`, `radio`, `checkbox`

Closes #10012
Closes #10318
2136994
@hansmaad hansmaad pushed a commit to hansmaad/angular.js that referenced this issue Mar 10, 2015
Marcy Sutton + hansmaad feat(ngAria): add roles to custom inputs
This change adds the missing roles: `slider`, `radio`, `checkbox`

Closes #10012
Closes #10318
cfefbc0
@netman92 netman92 added a commit to netman92/angular.js that referenced this issue Aug 8, 2015
@netman92 Marcy Sutton + netman92 feat(ngAria): add roles to custom inputs
This change adds the missing roles: `slider`, `radio`, `checkbox`

Closes #10012
Closes #10318
b4ddeb0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment