Create a new rule to check the allowed descendants of ARIA roles

[shunguoy]

HTML5 provides a "content mode" for each native element that specifies what content must be included as children and descendants of the element. ARIA provides Allowed descendants of ARIA roleshttps://w3c.github.io/html-aria/#allowed-descendants-of-aria-roles. Generally, the ARIA requirement covers what is in HTML 5, but not vice versa. For example, HTML 5 only covers the first example, but ARIA covers both.

Example 1:

<a target="_blank" href="https://ibm.com" style="display:block; border:1px solid black;width:150px;margin: 15px;text-align: center;"> 
                <p>IBM Store</p> 
                <button type="button">Forward</button> 
                <button type="button">Backward</button>     
</a>

Example 2:

<div role="link" tabindex="0" style="display:block; border:1px solid black;width:150px;margin: 15px;text-align: center;"> 
                <p>IBM Store</p> 
                <button type="button">Forward</button> 
                <button type="button">Backward</button>     
</div>

The checker issues an NR message: "Components with a widget role should have no more than one tabbable element". The message can be misleading because the root cause of the issue is the improper structure that can be interpreted inconsistently. In our Chrome test, a user may not be able to navigate to the link using the reverse navigation (SHIFT + TAB) from a tabbable child element using a keyboard and screen reader. The current engine rules cover parent-child/child-parent structures or "presentational children" check do not examine the descendants. The new rule can check the structure/descendants first, and then check other requirements only if the structure is proper.

[philljenkins]

@shunguoy I was not able to click the Example 2 link via the keyboard, whether going forward or reverse.

... Chrome test, a user may not be able to navigate to the link using the reverse navigation (SHIFT + TAB) from a tabbable child element.

I placed your sample code above in this test file. Notivce that the text "IBM Store" is underlined in example 1, but not in example 2: allowed_descendant_test.html

[shunguoy]

@philljenkins the second example shows just the HTML part of the code, and it needs Javascript code to add event handling.