Review allowed roles for `button`

[ZoeBijl]

With the introduction of a select only combobox (no text input), would it make sense to allow role=combobox on <button>?

<button
    aria-label="Tag"
    role="combobox"
    aria-activedescendant="selected_option"
    aria-autocomplete="list"
    aria-controls="owned_listbox"
    aria-expanded="true"
    aria-haspopup="listbox"
    type="button"
>
    Zoom
</button>
<ul role="listbox" id="owned_listbox">
    <li role="option">Zebra</li>
    <li role="option" id="selected_option">Zoom</li>
</ul>

[scottaohara]

Been mulling this over for awhile, and did some testing with the ARIA practices codepen demo - changing the div to a button. It seems like it might be ok from a quick pass? Kind of nice actually, because then the label can actually be associated with the button as well. Though it would have to be used on a button with type=button, to mitigate the possibility of the button's default submit behavior activating. But to be fair that's a stipulation that would apply to adding any role to a button.

Testing in Chromium browsers with NVDA, JAWS and Narrator, it seems ok?

Would be good to get more robust testing. @ZoeBijl can you give this a spin as well? https://codepen.io/scottohara/pen/LYjoXxX

[JAWS-test]

The advantage of a button over a div would be that with Windows contrast adjustment, the drop down element would be more recognizable as an interactive element

[JAWS-test]

@scottaohara

Your example does not work in Firefox (JAWS and NVDA). However, this is also true for the original WAI-ARIA Authoring Practices 1.2 example. The cause is a bug in Firefox that

• does not pass the value
• does not submit the role correctly (combobox instead of select)

But this does not speak against the suggestion of @ZoeBijl, because once the Firefox bug is fixed, it should work with div and button

[scottaohara]

Thanks for the heads up @JAWS-test. Is there presently a bug for this gap in firefox's bug tracker, that you might be aware of?

[JAWS-test]

@scottaohara

https://bugzilla.mozilla.org/show_bug.cgi?id=1702392
https://bugzilla.mozilla.org/show_bug.cgi?id=1631693
https://bugzilla.mozilla.org/show_bug.cgi?id=1732284

[JAWS-test]

Safari and VoiceOver:

• role-combobox on input, div and button is output the same.
• output differs from output of select and datalist, although input should be like datalist and div and button like select - this seems to me to be a bug of Safari or VoiceOver

But this doesn't mean you shouldn't allow combobox on button either

[scottaohara]

thank you