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.