5

Estoy probando este ejemplo de un cuadro de dialogo con material design lite:

var dialog = document.querySelector('dialog');
var showModalButton = document.querySelector('.show-modal');
if (! dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}
showModalButton.addEventListener('click', function() {
  dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();
});
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.2/material.min.js"></script>

<button type="button" class="mdl-button show-modal">Show Modal</button>
<dialog class="mdl-dialog">
  <div class="mdl-dialog__content">
    <p>
      Allow this site to collect usage data to improve your experience?
    </p>
  </div>
  <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
    <button type="button" class="mdl-button">Agree</button>
    <button type="button" class="mdl-button">Disagree</button>
  </div>
</dialog>

El ejemplo es claro y me funciona bien; sin embargo, ¿cómo puedo seleccionar la opción utilizando las flechas de dirección del teclado? Porque hasta el momento solo puedo utilizar el mouse.

1
  • Creo que un buen comienzo sería consultar como hacer que una página web detecte las pulsaciones del teclado, creo que debe servir igual para cualquier diseño. Una vez hecho por favor comparte tu información, es muy útil saber eso.
    – SalahAdDin
    Commented el 14 mar. 2016 a las 0:03

2 respuestas 2

1

Lo que puedes hacer es al abrir el diálogo, seleccionar el primer botón y añadir un controlador del keyup que cambie la selección si el usuario pulsa arriba (keyCode 38) o abajo (keyCode 40). Como sólo tienes dos botones, no importa realmente el botón.

Se podría hacer de muchas maneras diferentes. Aquí dejo un ejemplo de cómo podrías hacerlo:

  • Usa los atributos data-* para llevar un control de qué botón estará activo en cada momento.
  • Añade el controlador para keydown que incrementará/decrementará el valor del atributo data- correspondiente según el botón pulsado.
  • Pon el foco en el botón activo usando focus().

Y el código para ello basado en el código de la pregunta:

var dialog = document.querySelector('dialog');
var showModalButton = document.querySelector('.show-modal');
if (! dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}
showModalButton.addEventListener('click', function() {
  dialog.showModal();

  // después de mostrar el modal, seleccionamos el primer botón por defecto
  // y añadimos información sobre los botones y el botón seleccionado en los atributos data
  dialog.dataset.activeButton = 0; // botón seleccionado, el primero
  dialog.dataset.numButtons = dialog.querySelectorAll(".mdl-button").length; // número de botones en el diálogo
  dialog.querySelector(".mdl-button").focus();

});
dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();
});

// controladores para cuando se pulse una tecla
window.addEventListener('keyup', function(e) {

  // si el modal está abierto y se pulsó la tecla de arriba o abajo
  if (dialog.hasAttribute("open") && (e.keyCode == 38 || e.keyCode == 40)) {
    if (e.keyCode == 38) {
      // si se pulsó abajo, decrementamos en una unidad el botón seleccionado (o lo ponemos al máximo número de botones si estaba al principio
      dialog.dataset.activeButton = parseInt(dialog.dataset.activeButton) > 0 ?  (parseInt(dialog.dataset.activeButton) - 1) % dialog.dataset.numButtons : dialog.dataset.numButtons - 1;
    } else {
      // si se pulsó arriba, incrementamos en una unidad el botón seleccionado
      dialog.dataset.activeButton = (parseInt(dialog.dataset.activeButton) + 1) % dialog.dataset.numButtons;
    }
    // ponemos el foco en el botón que corresponde (nota: nth-child empieza en 1 y no en 0)
    dialog.querySelector(".mdl-button:nth-child(" + (parseInt(dialog.dataset.activeButton)+1) + ")").focus();
  }

});
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.2/material.min.js"></script>

<button type="button" class="mdl-button show-modal">Show Modal</button>
<dialog class="mdl-dialog">
  <div class="mdl-dialog__content">
    <p>
      Allow this site to collect usage data to improve your experience?
    </p>
  </div>
  <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
    <button type="button" class="mdl-button">Agree</button>
    <button type="button" class="mdl-button">Maybe</button>
    <button type="button" class="mdl-button close">Disagree</button>
  </div>
</dialog>

Tal y como está hecho el controlador irá rotando de botón de manera circular (si llega a un final empieza por el otro extremo), y el usuario sólo tendría que pulsar enter para ejecutar el botón activo. Se podría cambiar para que si llegara a un extremo, parara.

1

Al ser elementos <button> puedes navegar utilizando la tecla Tab para avanzar o Shift+Tab para retroceder, pero si quieres usar las flechas podrías agregar algo como esto:

var buttons = document.querySelectorAll('.mdl-dialog__actions .mdl-button');
var currentIndex = 0;
document.addEventListener('keydown', function(e) {
    if (e.keyCode == 40) {
        buttons[currentIndex++].focus();
    }

    if (e.keyCode == 38) {
        buttons[currentIndex--].focus();
    }

    if (currentIndex >= buttons.length) {
        currentIndex = 0;
    }

    if (currentIndex < 0) {
        currentIndex = buttons.length - 1;
    }
});

Así se obtienen los botones sobre los que quieres navegar y le haces focus al siguiente cuando presionas arriba o abajo. Los keyCode para cada flecha son:

  • 37 Izquierda
  • 38 Arriba
  • 39 Derecha
  • 40 Abajo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.