From 22115c0aeaa34faef5109c3f378add2d1647c837 Mon Sep 17 00:00:00 2001
From: Ravi Majithia <77275193+ravimajithia@users.noreply.github.com>
Date: Wed, 10 Nov 2021 12:47:39 +0100
Subject: [PATCH] JI-2899 Add aria label to width and height for embed popup
 (#110)

---
 h5p.classes.php | 3 ++-
 js/h5p.js       | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/h5p.classes.php b/h5p.classes.php
index 0704abe7..4089f78b 100644
--- a/h5p.classes.php
+++ b/h5p.classes.php
@@ -3736,7 +3736,8 @@ public function getLocalization() {
       'copyrightWarning' => $this->h5pF->t('Copyrighted material cannot be shared in the H5P Content Hub. If the content is licensed with a OER friendly license like Creative Commons, please choose the appropriate license. If not this content cannot be shared.'),
       'keywordsExits' => $this->h5pF->t('Keywords already exists!'),
       'someKeywordsExits' => $this->h5pF->t('Some of these keywords already exist'),
-
+      'width' => $this->h5pF->t('width'),
+      'height' => $this->h5pF->t('height')
     );
   }
 
diff --git a/js/h5p.js b/js/h5p.js
index e71a0d6e..ac232d4c 100644
--- a/js/h5p.js
+++ b/js/h5p.js
@@ -1348,7 +1348,7 @@ H5P.openReuseDialog = function ($element, contentData, library, instance, conten
  */
 H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size, instance) {
   var fullEmbedCode = embedCode + resizeCode;
-  var dialog = new H5P.Dialog('embed', H5P.t('embed'), '<textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>' + H5P.t('size') + ': <input type="text" value="' + Math.ceil(size.width) + '" class="h5p-embed-size"/> × <input type="text" value="' + Math.ceil(size.height) + '" class="h5p-embed-size"/> px<br/><div role="button" tabindex="0" class="h5p-expander">' + H5P.t('showAdvanced') + '</div><div class="h5p-expander-content"><p>' + H5P.t('advancedHelp') + '</p><textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false">' + resizeCode + '</textarea></div>', $element);
+  var dialog = new H5P.Dialog('embed', H5P.t('embed'), '<textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>' + H5P.t('size') + ': <input aria-label="'+ H5P.t('width') +'" type="text" value="' + Math.ceil(size.width) + '" class="h5p-embed-size"/> × <input aria-label="'+ H5P.t('width') +'" type="text" value="' + Math.ceil(size.height) + '" class="h5p-embed-size"/> px<br/><div role="button" tabindex="0" class="h5p-expander">' + H5P.t('showAdvanced') + '</div><div class="h5p-expander-content"><p>' + H5P.t('advancedHelp') + '</p><textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false">' + resizeCode + '</textarea></div>', $element);
 
   // Selecting embed code when dialog is opened
   H5P.jQuery(dialog).on('dialog-opened', function (event, $dialog) {