I have a custom js dropdown, which is not read by screen readers, If dropdown is open, moving from one option to another using arrow keys won't be read, only after selecting one of the options the selected options is pronounced, so the problem is, users won't have any idea about the list of available options until they select one.
I have defined the role but it is still not working.
<div class="select__holder" role="listbox" id="select-7181726" style="top: 1540px; max-height: 324.955px; left: 531.352px; width: 759px;">
<div id="select-7181726option-11" data-index="0" data-value="1" role="option" class="select__option" aria-selected="false">
<span class="select__option__lbl">
<span class="select__option__txt">option 1</span>
</span>
</div>
<div id="select-7181726option-22" data-index="1" data-value="2" role="option" class="select__option" aria-selected="false">
<span class="select__option__lbl">
<span class="select__option__txt">option 2</span>
</span>
</div>
<div id="select-7181726option-33" data-index="2" data-value="3" role="option" class="select__option" aria-selected="false">
<span class="select__option__lbl">
<span class="select__option__txt">option 3</span>
</span>
</div>
<div id="select-7181726option-44" data-index="3" data-value="4" role="option" class="select__option active" aria-selected="true">
<span class="select__option__lbl">
<span class="select__option__txt">option 4</span>
</span>
</div>
<div id="select-7181726option-55" data-index="4" data-value="5" role="option" class="select__option" aria-selected="false">
<span class="select__option__lbl">
<span class="select__option__txt">option 5</span>
</span>
</div>
</div>
What can i do to make the screen reader read it.
So i found a solution for this, the problem with my code was, it was not changing the value in the input field as we scroll through option. changing the value of input field while as we go through the options makes the screen reader read them.