Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

ngAria should inject missing roles #10012

Closed
@marcysutton

Description

@marcysutton

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions