Add check to fail fallback roles

Reposting from GoogleChrome/lighthouse#4474

Given the following markup, aXe reports a few errors, I believe due to not being able to validate both roles in <span role="tab button"> at once

Codepen: https://codepen.io/anon/pen/mXRPJJ

From the HTML spec https://www.w3.org/TR/html52/dom.html#aria-role-attribute

The attribute, if specified, must have a value that is a set of space-separated tokens; each token must be a non-abstract role defined in the WAI-ARIA specification [wai-aria-1.1].

The Chrome accessibility tree also computes the role correctly as tab

<ul role="tablist">
    <li>
        <h2>
            <span role="tab button" tabindex="0" aria-selected="false">Header</span>
        </h2>
        <ul>
            <li role="presentation">
                <span role="tab button" tabindex="0" aria-selected="false">Subitem</span>
            </li>
        </ul>
    </li>
</ul>

Errors from the chrome extension:

Elements must only use allowed ARIA attributes ARIA attribute is not allowed: aria-selected=“false” <span role="tab button" tabindex="0" aria-selected="false">Header</span>

Certain ARIA roles must contain particular children Required ARIA child role not present: tab <ul role="tablist">

ARIA roles used must conform to valid values Role must be one of the valid ARIA roles <span role="tab button" tabindex="0" aria-selected="false">Header</span>

[jwheare]

@dylanb makes sense. I’m only suggesting that it would be more useful for developers if it says specifically what doesn’t work (multiple roles) rather than attributing the errors incorrectly as the original issue shows. It’s not necessary to list ATs to do that. Hope that’s clear 😃

[straker]

This was added as part of axe-core v3.5.0. The fallbackrole check (part of the aria-roles rule) will now fail if an element has a fallback role. You can disable this check using axe.configure.

axe.configure({
  checks: [
    {
      id: 'fallbackrole'
      enabled: false
    }
  ]
});