From 51851f14c340165f7e76779d21090942ad36a4f6 Mon Sep 17 00:00:00 2001
From: Thomas Marstrander <thomasmars87@gmail.com>
Date: Thu, 9 Jun 2016 13:18:09 +0200
Subject: [PATCH] Use aria-labelledby to describe dialog, instead of alert.

HFJ-2003
---
 js/h5p-confirmation-dialog.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js
index b6ff15f..481429f 100644
--- a/js/h5p-confirmation-dialog.js
+++ b/js/h5p-confirmation-dialog.js
@@ -16,6 +16,10 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
   function ConfirmationDialog(options) {
     EventDispatcher.call(this);
     var self = this;
+    
+    // Make sure confirmation dialogs have unique id
+    H5P.ConfirmationDialog.uniqueId += 1;
+    var uniqueId = H5P.ConfirmationDialog.uniqueId;
 
     // Default options
     options = options || {};
@@ -70,6 +74,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
     var popup = document.createElement('div');
     popup.classList.add('h5p-confirmation-dialog-popup', 'hidden');
     popup.setAttribute('role', 'dialog');
+    popup.setAttribute('aria-labelledby', 'h5p-confirmation-dialog-dialog-text-' + uniqueId);
     popupBackground.appendChild(popup);
     popup.addEventListener('keydown', function (e) {
       if (e.which === 27) {// Esc key
@@ -97,8 +102,8 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
     // Popup text
     var text = document.createElement('div');
     text.classList.add('h5p-confirmation-dialog-text');
-    text.setAttribute('role', 'alert');
     text.innerHTML = options.dialogText;
+    text.id = 'h5p-confirmation-dialog-dialog-text-' + uniqueId;
     body.appendChild(text);
 
     // Popup buttons
@@ -346,3 +351,5 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
   return ConfirmationDialog;
 
 }(H5P.EventDispatcher));
+
+H5P.ConfirmationDialog.uniqueId = -1;