Verify role against a list of allowed roles

As discussed in #630, it would be hugely valuable to validate role values against a list of allowed roles. It is a relatively fixed list–the ones we'd want to allow include widget, document, and landmark roles. Abstract roles should throw a warning along with invalid ones.

Some examples that should throw errors:

role="image" – Error, not a valid role. Should be img.
role="input" – Error, abstract roles cannot be used directly. Should be textbox.

Specifying valid replacements like img instead of image would add complexity but would be super helpful.

Roles to allow:

In order to avoid difficult to locate problems, Angular.js should

validate that the role does not get changed after it has been set (preferred), or when this is done, create an entirely new node and delete and replace the old one (see spec below). Ideally, setting the role should only be done before the node gets inserted into the DOM (or before the current JavaScript execution ends) because there are implicit roles associated with elements that might get picked up immediately when the node gets inserted.
validate required parent and child roles. For example menuitem cannot exist without a parent menu or menubar role.
stretch goal: validate interim structures that need role="presentation" in order for the AT to handle them correctly

For 1 above, quoting from the spec:

Roles are element types and authors MUST NOT change role values over time or with user actions. Authors wishing to change a role MUST do so by deleting the associated element and its children and replacing it with a new element with the appropriate role.

http://www.w3.org/TR/wai-aria/roles

For 3 above - the following is invalid menu markup

<ul role="menubar">
    <li role="menuitem">
        Deals
        <ul role="menu">
            <li>
                <a href="vegas" role="menuitem">
                    Vegas
                </a>
            </li>
            <li>
                <a href="caracas" role="menuitem">
                    Caracas
                </a>
            </li>
        </ul>
    </li>
</ul>

Whereas this is valid markup because all interim structures in the hierarchy have been annotated with role="presentation"

<ul role="menubar">
    <li role="menuitem">
        Deals
        <ul role="menu">
            <li role="presentation">
                <a href="vegas" role="menuitem">
                    Vegas
                </a>
            </li>
            <li role="presentation">
                <a href="caracas" role="menuitem">
                    Caracas
                </a>
            </li>
        </ul>
    </li>
</ul>

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

@marcysutton

Following on from @marcysutton's comment above, this kind of checking should probably be done by a tool like Axe.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Verify role against a list of allowed roles #754

Roles to allow:

Widgets

Composite Widgets

Document Structure

Landmark Roles

7 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Verify role against a list of allowed roles #754

Description

Roles to allow:

Widgets

Composite Widgets

Document Structure

Landmark Roles

Activity

dylanb commented on Feb 22, 2015

7 remaining items

angular-robot commented on May 21, 2021

angular-robot commented on Jun 10, 2021

petebacondarwin commented on Sep 3, 2021

angular-automatic-lock-bot commented on Oct 4, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions