role="separator" not allowed on button via aria-allowed-role

[gerardkcohen]

Product

axe-core

Product Version

4.7.2

Latest Version

• [X] I have tested the issue with the latest version of the product

Issue Description

Expectation

In order to achieve a simple, focusable separator I should be able to add role="separator" and aria-valuenow to a button.

Actual

Adding role="separator" to a button in order to achieve a focusable separator fails axe-core tests for aria-allowed-role as a best practice.

To solve this problem, you need to fix the following: ARIA role separator is not allowed for given element

ARIA role should be appropriate for the element

How to Reproduce

<button role="separator" aria-valuenow="50" aria-label="Handle">></button>

Sample code: Simple focusable separator

Additional context

Is there anything that is preventing me from overwriting the button semantics with role="separator" in order gain native focusability and event handling?

[straker]

Thanks for the issue. ARIA in HTML is the spec we follow when determining what roles and attributes are allowed on elements. According to the spec, the role="separator" is not one of the allowed roles for a button element

[gerardkcohen]

@straker Thanks for the response. I reached out and looks like that will be updated soon. See separator role on button #488.

[straker]

Awesome. When https://github.com/w3c/html-aria/pull/489 is merged we can go ahead and add separator to the allowed list for button.

[scottaohara]

@straker I will be merging the ARIA in HTML PR today

[MrHBS]

FWIW it has been merged