CODEWITHSUNDEEP
reactjsaccessibilitytalkbackaria-role
Sunny
Sunny

Reputation: 932

Custom select not working while using talkback

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>

Upvotes: 1

Views: 580

Answers (0)

Related Questions