From 233b5e76530806124ae8f750f071b5ff8e1f108a Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Fri, 8 Apr 2016 10:23:55 +0200 Subject: [PATCH] Programmatically set focus to confirmation dialog. HFJ-1572 --- js/h5p-confirmation-dialog.js | 5 ++++- styles/h5p-confirmation-dialog.css | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index b631c0c..3263b76 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -176,7 +176,10 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { fitToContainer(); popupBackground.classList.remove('hiding'); popup.classList.remove('hidden'); - cancelButton.focus(); + + // Programmatically focus popup + popup.setAttribute('tabindex', '-1'); + popup.focus(); return this; }; diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css index 8b9fedd..05e3a3f 100644 --- a/styles/h5p-confirmation-dialog.css +++ b/styles/h5p-confirmation-dialog.css @@ -25,6 +25,10 @@ transition: opacity 0.1s linear 0s, visibility 0s linear 0.1s; } +.h5p-confirmation-dialog-popup:focus { + outline: none; +} + .h5p-confirmation-dialog-popup { position: absolute; display: flex;