I'm testing this example of a dialog with 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>
The example is clear and works fine for me; however, how can I select the option using the directional arrows on the keyboard? Because so far I can only use the mouse.
Being elements
<button>
you can navigate using the key Tabto advance or Shift+ Tabto go back, but if you want to use the arrows you could add something like this:So you get the buttons you want to navigate over and focus on the next one when you press up or down. The
keyCode
for each arrow are:What you can do is open the dialog, select the first button and add a handler
keyup
that changes the selection if the user presses up (keyCode 38) or down (keyCode 40). Since you only have two buttons, it doesn't really matter which button.It could be done in many different ways. Here is an example of how you could do it:
data-*
to keep track of which button will be active at what time.keydown
that it will increase/decrease the value of the corresponding attributedata-
according to the button clicked.focus()
.And the code for it based on the code in the question:
As it is done, the controller will rotate the button in a circular way (if it reaches one end it starts at the other end), and the user would only have to press enterto execute the active button. It could be changed so that if it reached an extreme, it would stop.