Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Review allowed roles for button #375

Closed
ZoeBijl opened this issue Nov 23, 2021 · 7 comments · Fixed by #396
Closed

Review allowed roles for button #375

ZoeBijl opened this issue Nov 23, 2021 · 7 comments · Fixed by #396
Labels
Allowed roles Pertaining to the allowed roles of HTML elements ARIA 1.2 related Issues directly related to updates in ARIA 1.2
Milestone
ARIA in HTML 1.1

Comments

@ZoeBijl
Copy link

ZoeBijl commented Nov 23, 2021 •
edited
Loading

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>
@ZoeBijl ZoeBijl added Allowed roles Pertaining to the allowed roles of HTML elements ARIA 1.2 related Issues directly related to updates in ARIA 1.2 labels Nov 23, 2021
@scottaohara
Copy link
Member

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
Copy link

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
Copy link

@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
Copy link
Member

scottaohara commented Nov 23, 2021 •
edited
Loading

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
Copy link

JAWS-test commented Nov 24, 2021 •
edited
Loading

@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
Copy link

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
Copy link
Member

thank you

scottaohara added a commit that referenced this issue Jan 15, 2022
@scottaohara
allow combobox role on button element
5e5d2a3 
closes #375

Allows `combobox` role on `button` element.

[test case](https://w3c.github.io/html-aria/tests/button-combobox.html)
This was referenced Jan 15, 2022
Merged
Closed
@scottaohara scottaohara added this to the ARIA in HTML: Next milestone Jan 16, 2022
scottaohara added a commit that referenced this issue Feb 13, 2022
@scottaohara
allow combobox role on button element (#396)
0a0d45d 
* allow combobox role on button element
* add combobox to input type=button
* add role=checkbox to input type=button allowances
* update changelog

closes #375
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Allowed roles Pertaining to the allowed roles of HTML elements ARIA 1.2 related Issues directly related to updates in ARIA 1.2
Projects
None yet
Milestone
ARIA in HTML 1.1
Development

Successfully merging a pull request may close this issue.

Addition: allow combobox role on button element w3c/html-aria
3 participants
@scottaohara @ZoeBijl @JAWS-test