Cuando cambio dinámicamente el texto del botón que es un div en línea, el lector de pantalla no puede leer la etiqueta aria que agrego al botón. Cambio la tecla arriba/abajo en el teclado para enfocar cada etiqueta. ¿Cómo debo hacer para que el lector de pantalla lea el contexto de la etiqueta aria?
Mi código está volado,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> <head> <title> Create custom shape button </title> </head> <body> <p> <input name="name" class="b_input" id="b_input" value="butterfly"></input> <button class="b_create_text" onclick="Func()" width="100px" aria-label="Search for butterfly">click me</button> </p> <button class="b_button"> <div class="b_button_label">@("show me more information")</div> </button> <script> function Func() { let dir="ltr"; let inputB = document.getElementById("b_input"); let inputText = inputB.value; let searchDescription = "Search for " + inputText; var sideBarLabelNodes = document.getElementsByClassName("b_button_label"); if (sideBarLabelNodes.length == 1) { sideBarLabelNodes[0].textContent = searchDescription; } let el = document.getElementsByClassName('b_button'); if(el.length == 1) { if(!!searchDescription) { el[0].setAttribute("aria-label", searchDescription); } } } </script> </body> </html>Gracias por tu ayuda.