1

I'm trying to create an accessible dropdown component using reactJS. It works absolutely fine on desktop, and an mobile browsers. It even works well with screen readers on desktop. But, on my android phone, with talkback, I'm not able to select the options, though the roles are added.

Is it happening due to tabIndex="-1"? I'd like to know how does 'tabIndex' play a role on mobile accessibility. Could anybody help me understand?

<div className="select-list">
  <button class="inputButton" aria-haspopup="listbox" aria-expanded="false"}>Selected value here</button>
  <ul role="listbox">
    <li role="option" tabindex="-1">One</li>
    <li role="option" tabindex="-1">Two</li>
    <li role="option" tabindex="-1">Three</li>
    <li role="option" tabindex="-1">Four</li>
  </ul>
</div>
Sunny
  • 902
  • 3
  • 18
  • 41
  • 1
    I don't have an Android device to check, but have you had a look to see whether you encounter the same issue in the Aria Practices documentation for a Select-Only Combobox? https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html#ex_label – shainanigans Jul 28 '22 at 18:48
  • Could you share your javascript, too? It’s hard to guess what the issue is from static HTML. Are you setting `tabindex` to 0 and `aria-selected` on the selected option, f.e.? Also, it’s weird that your listbox is visible by default in your code example. – Andy Jul 29 '22 at 13:11

0 Answers0