Tengo el siguiente código de lista desplegable que se genera usando selectboxit js lib. JAWS no está leyendo los elementos en la lista de selección cuando se enfoca en los elementos. He intentado agregar atributos aria-label y title en li, a, span e incluso en el elemento i, pero aún no se lee. ¿Qué atributo necesito agregar para que JAWS pueda leerlo correctamente en foco? El foco va correctamente en el elemento li cuando se usa la flecha hacia arriba y hacia abajo.
<ul id="ddlSubReason_1SelectBoxItOptions" class="selectboxit-options selectboxit-list" tabindex="-1" role="listbox" aria-hidden="true"> <li id="0" data-val="" data-disabled="false" class="selectboxit-option selectboxit-option-first selectboxit-selected" role="option" aria-label=""> <a class="selectboxit-option-anchor"> <span class="selectboxit-option-icon-container"> <i class="selectboxit-option-icon selectboxit-container"></i></span></a></li> <li id="1" data-val="29" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 1"> <a class="selectboxit-option-anchor"> <span class="selectboxit-option-icon-container"> <i class="selectboxit-option-icon selectboxit-container"></i></span> Selection text placeholder 1</a></li> <li id="2" data-val="28" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 2"> <a class="selectboxit-option-anchor"> <span class="selectboxit-option-icon-container"> <i class="selectboxit-option-icon selectboxit-container"></i></span> Selection text placeholder 2</a></li> <li id="3" data-val="55" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 3"> <a class="selectboxit-option-anchor"> <span class="selectboxit-option-icon-container"> <i class="selectboxit-option-icon selectboxit-container"></i></span> Selection text placeholder 3</a></li> </ul>Tiene aria-hidden="true" en el contenedor principal ( <ul> ). Eso ocultará a todos los niños del lector de pantalla y no se anunciará nada. Intenta eliminarlo.
.<ul id="ddlSubReason_1SelectBoxItOptions" class="selectboxit-options selectboxit-list" tabindex="-1" role="listbox" aria-hidden="true" >
Publicando la solución que funcionó para mí que encontré en este enlace: https://webaim.org/discussion/mail_thread?thread=6559