Mejorando la accesibilidad con teclado de nuestro modal

Super el curso, un apunte que quiero hacer respecto al Modal. No todos los elementos, como el texto, deben tener foco. Al iniciar el curso fue una de las cosas que se mencionó. Creo que el foco al abrir el modal debería ir directo al boton de cerrar ya que este elemento si tiene interacción. Ahora bien como manejar este caso para el voiceover, yo hice un ejercicio similar.

<dialog aria-label="Este es un dialogo" aria-describedby="description" open>
    <p id="description">
      Mi descripción
    </p>
    <button>Mi botón</button>
</dialog>

De esta manera usando el elemento dialog se deberia hacer foco al botón cuando se abre el modal pero debería leer la descripción. Si no lo hace con Js se puede enfocar el dialog y el tab pasaría al botón.

Ahora bien, <dialog> api no es soportado por algunos navegadores. Para este caso se puede utlizar el aria-role,.

<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">You can change your details at any time in the user account section.</p>
  <button>Close</button>
</div>

Por último, si se tiene problemas con el voiceover que es frecuente cuando se trata de hacer focus a un elemento que se requiere leer como los elementos p, que no son interactuables, se puede hacer uso del tabindex=-1 .

  <p id="dialog1Desc" tabindex="-1">You can change your details at any time in the user account section.</p>

De esta manera programaticamente se puede enviar el foco a ese elemento haciendo que el voiceover lo lea para luego al presionar tab el elemento no es interactuable y tiene sentido, como mencione al inicio no todos los elementos deben tener foco.

document.querySelector("#dialog1Desc").focus();

Nota: NO USAR TABINDEX en el elemento de dialog

Que útil información y qué bonita risa :3

Otra cosa que faltaría es que cuando el modal se abre y se va enfocando los elementos, que el foco no se salga del modal, es decir, despues de enfocar el último elemento, que se vaya al primero.
También, cuando se cierre el modal, que el foco regrese al último elemento enfocado antes de que el modal se abriera.

El focus() se envía a un elemento cuando se enfoca. Este evento es implícitamente aplicable a un conjunto limitado de elementos, tales como elementos de formulario ( <input>, <select>, etc.) y enlaces ( <a href>). En versiones recientes del navegador, el evento se puede extender para incluir todos los tipos de elementos al establecer explícitamente la tabindexpropiedad del elemento . Un elemento puede enfocarse mediante comandos del teclado, como la tecla Tabulador, o haciendo clic con el mouse sobre el elemento.

Creo que algo mejor que forzar un H1 o cualquier elemento a ser focuseable, en el caso del modal, sería mejor buscar los elementos focuseables que haya disponibles, y hacerle foco a ese.

const focusableElements = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
var firstFocusable = focusableElements[0];

Genial el aporte de keycode 😮

Viendo todo esto creo que aún me falta aplicar javascript correctamente en mis proyectos, esto me motiva a seguir mejorando

Otra manera de cerrar el modal (es lo mismo pero con el operador ternario)

/*Cierra modal con tecla Esc*/
function listenForEsc(e) {
  e.keyCode === 27 ? closeModal(e) : null
}

🤯 Esta muy genial esto. Toca repasar JS pero 😅

Actualmente html tiene una nueva etiqueta para el uso de los modales
el cual es <dialog>
el cual tiene dos propiedades para abrir que son show() y showModal() y para cerrarlo con close()

la diferencia entre show() y showModal() es que en show() abre como un cuadro de dialogo justo por debajo de donde es llamado y te permite seguir interactuar con el resto de la pagina y showModal() se abre como un modal en todo el centro de la pantalla y con un background difuminado(por defecto sin uso de css) y no te permite interactuar con el resto de la pagina

muy buen curso

La clase pasada dí una solución para el reto de poner la imagen del modal que hacías click pero me equivoque dado que no funcionaba para teclado, este es el correcto:

function ImgClick(e) {
  // VALIDAR SI FUE CON EL TECLADO O CON CLICK
  if (e.clientX === 0 && e.clientY === 0) {
    // TECLADO
    let IMG = e.srcElement.classList[0];
    document
      .querySelector("#img-modal")
      .setAttribute("src", `./images/${IMG}.png`);
  } else {
    // CLICK
    let IMG = e.srcElement.src;
    document.querySelector("#img-modal").setAttribute("src", IMG);
  }

  openModal();
}

Y lo visto hoy en clase podemos verificar la tecla así o simplemente con el nombre:

function CloseEsc(e) {
  if (e.key === "Escape") {
    closeModal(e);
  }
}

Buena clase.

Funciona, se cerró mi modal.

👌

Un modal es una pantalla que cubre el viewport total o parcialmente, con un contenido emergente.