Multiple roles support

[jwheare]

Given the following markup, lighthouse 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:

[aria-*] attributes do not match their roles.
Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.
<span role="tab button" tabindex="0" aria-selected="false">Header</span>

Elements with [role] that require specific children [role]s, are missing.
Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions.
<ul role="tablist">

[role] values are not valid.
ARIA roles must have valid values in order to perform their intended accessibility functions. Learn more.
<span role="tab button" tabindex="0" aria-selected="false">Header</span>

[paulirish]

This is an upstream issue with aXe, i believe. (assuming you can also repro it with https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd )

Can you file it there? https://github.com/dequelabs/axe-core

Thanks!