Accessibility: Missing role="listbox" on dropdown container for combobox button

[riccardinhocala]

Hello,
I'm using intl-tel-input in a project that undergoes strict accessibility checks (IBM Equal Access, WAVE, etc.), and I noticed an issue related to ARIA roles:

When using the component, the selected country button is rendered with:

<button
  title="Italy"
  role="combobox"
  aria-controls="iti-1__dropdown-content"
  aria-haspopup="true"
  aria-expanded="false"
  aria-label="Selected country"
  type="button"
>

However, the dropdown element it controls (#iti-1__dropdown-content) is rendered without a valid ARIA role, like:

<div id="iti-1__dropdown-content" role="">

According to ARIA Authoring Practices, a combobox must control a popup with one of the following roles: listbox, grid, tree, dialog

Without this, screen readers and assistive technologies may not behave correctly, and accessibility testing tools flag it as a failure.

Expected behavior:

The dropdown container (#iti-1__dropdown-content) should have:

role="listbox"

Additionally, the button should ideally use:

aria-haspopup="listbox"

Thank you.

[jackocnr]

Hi there, thanks for raising this, and my apologies in the delay in replying.

My concern with this change is that we're making the dropdown container into a role=listbox, when it actually contains a country search input followed by a <ul> which is its own role=listbox - is that ok? Can you have nested listboxes like that? Thanks for your help.

[jackocnr]

By the way, if you've ever come across a similar situation on the web, it would be really helpful to share a link to it, e.g. where there is a button (showing the currently selected item) that opens a dropdown which contains a search box to filter the list items, which adheres to the strict accessibility checks you mention.