From cca2656396069909658a244d0b9cecda63935edc Mon Sep 17 00:00:00 2001 From: Oliver Tacke Date: Thu, 15 Feb 2024 16:00:35 +0100 Subject: [PATCH 1/2] Add support for optional button label --- language/.en.json | 5 +- language/af.json | 3 + language/ar.json | 3 + language/bg.json | 3 + language/bs.json | 3 + language/ca.json | 3 + language/cs.json | 3 + language/da.json | 3 + language/de.json | 3 + language/el.json | 3 + language/es-mx.json | 3 + language/es.json | 3 + language/et.json | 3 + language/eu.json | 3 + language/fa.json | 3 + language/fi.json | 3 + language/fr.json | 3 + language/gl.json | 3 + language/he.json | 3 + language/id.json | 3 + language/it.json | 3 + language/ja.json | 3 + language/ka.json | 3 + language/km.json | 3 + language/ko.json | 3 + language/lt.json | 3 + language/lv.json | 3 + language/mn.json | 3 + language/nb.json | 3 + language/nl.json | 3 + language/nn.json | 3 + language/pl.json | 3 + language/pt-br.json | 3 + language/pt.json | 3 + language/ru.json | 3 + language/sl.json | 3 + language/sma.json | 3 + language/sme.json | 3 + language/smj.json | 3 + language/sr.json | 3 + language/sv.json | 3 + language/sw.json | 3 + language/tr.json | 3 + language/uk.json | 3 + language/zh-cn.json | 3 + language/zh-hans.json | 3 + language/zh-tw.json | 3 + language/zh.json | 3 + semantics.json | 7 ++ src/scripts/cp.js | 148 ++++++++++++++++++++++++++++++------------ src/styles/cp.css | 40 +++++++++++- 51 files changed, 295 insertions(+), 46 deletions(-) diff --git a/language/.en.json b/language/.en.json index 0833158e..b4615d3b 100644 --- a/language/.en.json +++ b/language/.en.json @@ -26,6 +26,9 @@ { "label": "Display as button" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ @@ -400,4 +403,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/language/af.json b/language/af.json index 82b6f86e..57163a82 100644 --- a/language/af.json +++ b/language/af.json @@ -26,6 +26,9 @@ { "label": "Vertoon as knoppie" }, + { + "label": "Optional button label" + }, { "label": "Knoppie grote", "options": [ diff --git a/language/ar.json b/language/ar.json index 2a35c590..d2ade87d 100644 --- a/language/ar.json +++ b/language/ar.json @@ -26,6 +26,9 @@ { "label": "عرض كزر" }, + { + "label": "Optional button label" + }, { "label": "حجم الزر", "options": [ diff --git a/language/bg.json b/language/bg.json index 30ea698e..8e66e826 100644 --- a/language/bg.json +++ b/language/bg.json @@ -26,6 +26,9 @@ { "label": "Показване като бутон" }, + { + "label": "Optional button label" + }, { "label": "Размер на бутона", "options": [ diff --git a/language/bs.json b/language/bs.json index f986b9c3..cb4308ca 100644 --- a/language/bs.json +++ b/language/bs.json @@ -26,6 +26,9 @@ { "label": "Prikaži kao dugme" }, + { + "label": "Optional button label" + }, { "label": "Veličina dugmeta", "options": [ diff --git a/language/ca.json b/language/ca.json index 8965bdab..dc75ad9e 100644 --- a/language/ca.json +++ b/language/ca.json @@ -26,6 +26,9 @@ { "label": "Mostra com a botó" }, + { + "label": "Optional button label" + }, { "label": "Mida del botó", "options": [ diff --git a/language/cs.json b/language/cs.json index c29a26bc..6b660d12 100644 --- a/language/cs.json +++ b/language/cs.json @@ -26,6 +26,9 @@ { "label": "Zobrazit jako tlačítko" }, + { + "label": "Optional button label" + }, { "label": "Velikost tlačítka", "options": [ diff --git a/language/da.json b/language/da.json index 40701f7b..d2dab61a 100644 --- a/language/da.json +++ b/language/da.json @@ -26,6 +26,9 @@ { "label": "Vis som knap" }, + { + "label": "Optional button label" + }, { "label": "Størrelse knap", "options": [ diff --git a/language/de.json b/language/de.json index 7e9d4047..0b273a9a 100644 --- a/language/de.json +++ b/language/de.json @@ -26,6 +26,9 @@ { "label": "Als Button anzeigen" }, + { + "label": "Optional button label" + }, { "label": "Buttongröße", "options": [ diff --git a/language/el.json b/language/el.json index f94193ed..5191909a 100644 --- a/language/el.json +++ b/language/el.json @@ -26,6 +26,9 @@ { "label": "Κουμπί \"εμφάνιση ως\"" }, + { + "label": "Optional button label" + }, { "label": "Μέγεθος κουμπιού", "options": [ diff --git a/language/es-mx.json b/language/es-mx.json index cf00353d..efe9a041 100644 --- a/language/es-mx.json +++ b/language/es-mx.json @@ -26,6 +26,9 @@ { "label": "Mostrar como botón" }, + { + "label": "Optional button label" + }, { "label": "Tamaño del botón", "options": [ diff --git a/language/es.json b/language/es.json index 13980ed8..a739883b 100644 --- a/language/es.json +++ b/language/es.json @@ -26,6 +26,9 @@ { "label": "Mostrar como botón" }, + { + "label": "Optional button label" + }, { "label": "Tamaño del botón", "options": [ diff --git a/language/et.json b/language/et.json index 063afa02..84f26ce6 100644 --- a/language/et.json +++ b/language/et.json @@ -26,6 +26,9 @@ { "label": "Näita nupuna" }, + { + "label": "Optional button label" + }, { "label": "Nupu suurus", "options": [ diff --git a/language/eu.json b/language/eu.json index e52caea8..f28546ce 100644 --- a/language/eu.json +++ b/language/eu.json @@ -26,6 +26,9 @@ { "label": "Bistaratu botoi moduan" }, + { + "label": "Optional button label" + }, { "label": "Botoiaren tamaina", "options": [ diff --git a/language/fa.json b/language/fa.json index 9b87ca28..56cb2e86 100644 --- a/language/fa.json +++ b/language/fa.json @@ -26,6 +26,9 @@ { "label": "نمایش به عنوان دکمه" }, + { + "label": "Optional button label" + }, { "label": "اندازه دکمه", "options": [ diff --git a/language/fi.json b/language/fi.json index e6b7f0b5..408780b0 100644 --- a/language/fi.json +++ b/language/fi.json @@ -26,6 +26,9 @@ { "label": "Näytä painikkeena" }, + { + "label": "Optional button label" + }, { "label": "Painikkeen koko", "options": [ diff --git a/language/fr.json b/language/fr.json index 6e9d9646..9d54a8af 100644 --- a/language/fr.json +++ b/language/fr.json @@ -26,6 +26,9 @@ { "label": "Afficher sous forme de bouton" }, + { + "label": "Optional button label" + }, { "label": "La taille de bouton", "options": [ diff --git a/language/gl.json b/language/gl.json index 313fba93..83d00352 100644 --- a/language/gl.json +++ b/language/gl.json @@ -26,6 +26,9 @@ { "label": "Amosar como botón" }, + { + "label": "Optional button label" + }, { "label": "Tamaño do botón", "options": [ diff --git a/language/he.json b/language/he.json index 27e1131f..509927bf 100644 --- a/language/he.json +++ b/language/he.json @@ -26,6 +26,9 @@ { "label": "מוצג ככפתור" }, + { + "label": "Optional button label" + }, { "label": "גודל כפתור", "options": [ diff --git a/language/id.json b/language/id.json index d58b3deb..efde7b71 100644 --- a/language/id.json +++ b/language/id.json @@ -26,6 +26,9 @@ { "label": "Tampilkan sebagai tombol" }, + { + "label": "Optional button label" + }, { "label": "Ukuran tombol", "options": [ diff --git a/language/it.json b/language/it.json index 2155cf6d..ef9fc475 100644 --- a/language/it.json +++ b/language/it.json @@ -26,6 +26,9 @@ { "label": "Mostra come pulsante" }, + { + "label": "Optional button label" + }, { "label": "Dimensione del pulsante", "options": [ diff --git a/language/ja.json b/language/ja.json index 0f7383f8..4575bdd1 100644 --- a/language/ja.json +++ b/language/ja.json @@ -26,6 +26,9 @@ { "label": "ボタンとして表示" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/ka.json b/language/ka.json index 8e2b2bf8..e1e9d5d7 100644 --- a/language/ka.json +++ b/language/ka.json @@ -26,6 +26,9 @@ { "label": "ღილაკის სახით ჩვენება" }, + { + "label": "Optional button label" + }, { "options": [ { diff --git a/language/km.json b/language/km.json index 23709ac9..8bb15c72 100644 --- a/language/km.json +++ b/language/km.json @@ -26,6 +26,9 @@ { "label": "បង្ហាញជាប៊ូតុង" }, + { + "label": "Optional button label" + }, { "label": "ទំហំប៊ូតុង", "options": [ diff --git a/language/ko.json b/language/ko.json index 09b0de4d..a9c46bf0 100644 --- a/language/ko.json +++ b/language/ko.json @@ -26,6 +26,9 @@ { "label": "버튼 보이기" }, + { + "label": "Optional button label" + }, { "label": "버튼 크기", "options": [ diff --git a/language/lt.json b/language/lt.json index cf29ace8..fcfc27eb 100644 --- a/language/lt.json +++ b/language/lt.json @@ -26,6 +26,9 @@ { "label": "Rodyti kaip mygtuką" }, + { + "label": "Optional button label" + }, { "label": "Mygtuko dydis", "options": [ diff --git a/language/lv.json b/language/lv.json index 26a0cd14..492fc069 100644 --- a/language/lv.json +++ b/language/lv.json @@ -26,6 +26,9 @@ { "label": "Parādīt kā pogu" }, + { + "label": "Optional button label" + }, { "label": "Pogas izmērs", "options": [ diff --git a/language/mn.json b/language/mn.json index 3d76825a..22e3001a 100644 --- a/language/mn.json +++ b/language/mn.json @@ -26,6 +26,9 @@ { "label": "Товчлуур хэлбэрээр харуулах" }, + { + "label": "Optional button label" + }, { "label": "Товчлуурын хэмжээ", "options": [ diff --git a/language/nb.json b/language/nb.json index 2df96b18..b7621aca 100644 --- a/language/nb.json +++ b/language/nb.json @@ -26,6 +26,9 @@ { "label": "Vis som knapp" }, + { + "label": "Optional button label" + }, { "label": "Knappstørrelse", "options": [ diff --git a/language/nl.json b/language/nl.json index b8a8bd54..d69cd4f5 100644 --- a/language/nl.json +++ b/language/nl.json @@ -26,6 +26,9 @@ { "label": "Tonen als knop" }, + { + "label": "Optional button label" + }, { "label": "Knopgrootte", "options": [ diff --git a/language/nn.json b/language/nn.json index c0954e19..27294fb8 100644 --- a/language/nn.json +++ b/language/nn.json @@ -26,6 +26,9 @@ { "label": "Vis som knapp" }, + { + "label": "Optional button label" + }, { "label": "Knappstorleik", "options": [ diff --git a/language/pl.json b/language/pl.json index 15541886..22b05fdb 100644 --- a/language/pl.json +++ b/language/pl.json @@ -26,6 +26,9 @@ { "label": "Wyświetlaj jako przycisk" }, + { + "label": "Optional button label" + }, { "label": "Wielkość przycisku", "options": [ diff --git a/language/pt-br.json b/language/pt-br.json index 9cc8aee0..9209e168 100644 --- a/language/pt-br.json +++ b/language/pt-br.json @@ -26,6 +26,9 @@ { "label": "Mostrar como botão" }, + { + "label": "Optional button label" + }, { "label": "Tamanho do botão", "options": [ diff --git a/language/pt.json b/language/pt.json index a0267cb0..20203288 100644 --- a/language/pt.json +++ b/language/pt.json @@ -26,6 +26,9 @@ { "label": "Mostrar como botão" }, + { + "label": "Optional button label" + }, { "label": "Tamanho do botão", "options": [ diff --git a/language/ru.json b/language/ru.json index 923f0bb2..d8e9cc10 100644 --- a/language/ru.json +++ b/language/ru.json @@ -26,6 +26,9 @@ { "label": "Показать как кнопку" }, + { + "label": "Optional button label" + }, { "label": "Размер кнопки", "options": [ diff --git a/language/sl.json b/language/sl.json index 2b8634d4..4bf7cc3c 100644 --- a/language/sl.json +++ b/language/sl.json @@ -26,6 +26,9 @@ { "label": "Prikaži kot gumb" }, + { + "label": "Optional button label" + }, { "label": "Velikost gumba", "options": [ diff --git a/language/sma.json b/language/sma.json index 86b2eaf5..b4615d3b 100644 --- a/language/sma.json +++ b/language/sma.json @@ -26,6 +26,9 @@ { "label": "Display as button" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/sme.json b/language/sme.json index 86b2eaf5..b4615d3b 100644 --- a/language/sme.json +++ b/language/sme.json @@ -26,6 +26,9 @@ { "label": "Display as button" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/smj.json b/language/smj.json index 86b2eaf5..b4615d3b 100644 --- a/language/smj.json +++ b/language/smj.json @@ -26,6 +26,9 @@ { "label": "Display as button" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/sr.json b/language/sr.json index db5499f6..40c8bc27 100644 --- a/language/sr.json +++ b/language/sr.json @@ -26,6 +26,9 @@ { "label": "Приказ као дугме" }, + { + "label": "Optional button label" + }, { "label": "Величина дугмета", "options": [ diff --git a/language/sv.json b/language/sv.json index 3fdaaaae..2c262563 100644 --- a/language/sv.json +++ b/language/sv.json @@ -26,6 +26,9 @@ { "label": "Visa som knapp" }, + { + "label": "Optional button label" + }, { "label": "Knappstorlek", "options": [ diff --git a/language/sw.json b/language/sw.json index 2d727a57..5292e790 100644 --- a/language/sw.json +++ b/language/sw.json @@ -26,6 +26,9 @@ { "label": "Onyesha kama kitufe" }, + { + "label": "Optional button label" + }, { "label": "Ukubwa wa kitufe", "options": [ diff --git a/language/tr.json b/language/tr.json index 7b99a877..8a84a5ec 100644 --- a/language/tr.json +++ b/language/tr.json @@ -26,6 +26,9 @@ { "label": "Buton olarak göster" }, + { + "label": "Optional button label" + }, { "label": "Buton boyutu", "options": [ diff --git a/language/uk.json b/language/uk.json index df17eac8..d099678d 100644 --- a/language/uk.json +++ b/language/uk.json @@ -26,6 +26,9 @@ { "label": "Показати як кнопку" }, + { + "label": "Optional button label" + }, { "label": "Розмір кнопки", "options": [ diff --git a/language/zh-cn.json b/language/zh-cn.json index e60cd665..d660d9a9 100644 --- a/language/zh-cn.json +++ b/language/zh-cn.json @@ -26,6 +26,9 @@ { "label": "显示为按钮" }, + { + "label": "Optional button label" + }, { "label": "按钮大小", "options": [ diff --git a/language/zh-hans.json b/language/zh-hans.json index 911d8b13..c122e8d8 100644 --- a/language/zh-hans.json +++ b/language/zh-hans.json @@ -26,6 +26,9 @@ { "label": "以按钮样式显示" }, + { + "label": "Optional button label" + }, { "label": "按钮尺寸", "options": [ diff --git a/language/zh-tw.json b/language/zh-tw.json index 8c795ba7..c3afec32 100644 --- a/language/zh-tw.json +++ b/language/zh-tw.json @@ -26,6 +26,9 @@ { "label": "顯示為按鈕" }, + { + "label": "Optional button label" + }, { "label": "按鈕尺寸", "options": [ diff --git a/language/zh.json b/language/zh.json index cd32dc94..ddb7e4c3 100644 --- a/language/zh.json +++ b/language/zh.json @@ -26,6 +26,9 @@ { "label": "以按鈕樣式顯示" }, + { + "label": "Optional button label" + }, { "label": "按鈕尺寸", "options": [ diff --git a/semantics.json b/semantics.json index d9976b02..7ea1ebb1 100644 --- a/semantics.json +++ b/semantics.json @@ -128,6 +128,13 @@ "default": false, "optional": true }, + { + "name": "buttonLabel", + "type": "text", + "label": "Optional button label", + "importance": "medium", + "optional": true + }, { "name": "buttonSize", "type": "select", diff --git a/src/scripts/cp.js b/src/scripts/cp.js index ac1b3251..ef6ba8cf 100644 --- a/src/scripts/cp.js +++ b/src/scripts/cp.js @@ -950,8 +950,29 @@ CoursePresentation.prototype.attachElement = function (element, instance, $slide $elementContainer.toggleClass('h5p-transparent', isTransparent); if (displayAsButton) { - const $button = this.createInteractionButton(element, instance); + const [$button, labelElement] = + this.createInteractionButton(element, instance); + + // Label in logically before button to allow sibling selector in CSS + if (labelElement) { + $elementContainer.get(0).append(labelElement); + } $button.appendTo($elementContainer); + + if (labelElement) { + // Position label left/right depending on available space + window.requestAnimationFrame(() => { + const labelRect = labelElement.getBoundingClientRect(); + const containerOffset = this.$container.get(0).offsetLeft; + + if ( + -containerOffset + labelRect.x + labelRect.width > + this.$container.get(0).offsetWidth + ) { + labelElement.classList.add('left'); + } + }); + } } else { const hasLibrary = element.action && element.action.library; @@ -1079,55 +1100,96 @@ CoursePresentation.prototype.restoreTabIndexes = function () { * * @param {Object} element * @param {Object} instance - * - * @return {jQuery} + * @returns {[jQuery, HTMLElement|undefined]} Button element and label if set. */ -CoursePresentation.prototype.createInteractionButton = function (element, instance) { - let label = element.action.metadata ? element.action.metadata.title : ''; - if (label === '' || label === undefined) { - label = element.action?.params?.contentName || element.action?.params?.title || element.action.library.split(' ')[0].split('.')[1]; - } - const libTypePmz = this.getLibraryTypePmz(element.action.library); +CoursePresentation.prototype.createInteractionButton = + function (element, instance) { + const isButtonLabelSet = typeof element.buttonLabel === 'string' && + element.buttonLabel !== ''; + + const labelText = element.buttonLabel ?? + element.action.metadata?.title ?? + ( + element.action?.params?.contentName || + element.action?.params?.title || + element.action?.library.split(' ')[0].split('.')[1] || + '' + ); + + // Optional label for button + let labelElement; + if (isButtonLabelSet) { + labelElement = document.createElement('div'); + labelElement.classList.add('h5p-element-button-label'); + if (element.buttonSize === 'small') { + labelElement.classList.add('small'); + } - /** - * Returns a function that will set [aria-expanded="false"] on the $btn element - * - * @param {jQuery} $btn - * @return {Function} - */ - const setAriaExpandedFalse = $btn => () => $btn.attr('aria-expanded', 'false'); - - const $button = $('
', { - role: 'button', - tabindex: 0, - 'aria-label': label, - 'aria-popup': true, - 'aria-expanded': false, - 'class': `h5p-element-button h5p-element-button-${element.buttonSize} ${libTypePmz}-button` - }); + const labelElementText = document.createElement('div'); + labelElementText.classList.add('h5p-element-button-label-text'); + labelElementText.setAttribute('aria-hidden', true); + labelElementText.innerText = labelText; + labelElement.append(labelElementText); + } - const $buttonElement = $('
'); - instance.attach($buttonElement); + const libTypePmz = this.getLibraryTypePmz(element.action.library); - const parentPosition = libTypePmz === 'h5p-advancedtext' ? { - x: element.x, - y: element.y - } : null; - addClickAndKeyboardListeners($button, () => { - $button.attr('aria-expanded', 'true'); - this.showInteractionPopup(instance, $button, $buttonElement, libTypePmz, setAriaExpandedFalse($button), parentPosition); - }); + // Button + const button = document.createElement('div'); + button.classList.add('h5p-element-button'); + button.classList.add(`h5p-element-button-${element.buttonSize}`); + button.classList.add(`${libTypePmz}-button`); + button.setAttribute('role', 'button'); + button.setAttribute('tabindex', 0); + button.setAttribute('aria-popup', true); + button.setAttribute('aria-expanded', false); + button.setAttribute('aria-label', labelText); - if (element.action !== undefined && element.action.library.substr(0, 20) === 'H5P.InteractiveVideo') { - instance.on('controls', function () { - if (instance.controls.$fullscreen) { - instance.controls.$fullscreen.remove(); - } + const buttonElement = document.createElement('div'); + buttonElement.classList.add('h5p-element-button-element'); + + instance.attach(H5P.jQuery(buttonElement)); + + const parentPosition = libTypePmz === 'h5p-advancedtext' ? + { + x: element.x, + y: element.y + } : + null; + + const handleButtonInteraction = () => { + button.setAttribute('aria-expanded', 'true'); + this.showInteractionPopup( + instance, + H5P.jQuery(button), + H5P.jQuery(buttonElement), + libTypePmz, + () => { + button.setAttribute('aria-expanded', 'false'); + }, + parentPosition + ); + }; + + addClickAndKeyboardListeners(H5P.jQuery(button), () => { + handleButtonInteraction(); }); - } - return $button; -}; + // Allow to show interaction popup on label click, too + labelElement?.addEventListener('click', () => { + handleButtonInteraction(); + }); + + if (element.action?.library.split(' ')[0] === 'H5P.InteractiveVideo') { + instance.on('controls', () => { + if (instance.controls.$fullscreen) { + instance.controls.$fullscreen.remove(); + } + }); + } + + return [H5P.jQuery(button), labelElement]; + }; /** * Shows the interaction popup on button press diff --git a/src/styles/cp.css b/src/styles/cp.css index 7a2525ea..5fb93cd4 100644 --- a/src/styles/cp.css +++ b/src/styles/cp.css @@ -446,12 +446,14 @@ backface-visibility: hidden; } -.h5p-course-presentation .h5p-element-button:hover { +.h5p-course-presentation .h5p-element-button:hover, +.h5p-course-presentation .h5p-element-button-label:hover ~ .h5p-element-button { box-shadow: 0 0.3em 0.25em 0 rgba(0, 0, 0, 0.5); background: #003fdf; } -.h5p-course-presentation .h5p-element-button:focus { +.h5p-course-presentation .h5p-element-button:focus, +.h5p-course-presentation .h5p-element-button-label:focus ~ .h5p-element-button { outline: none; top: -0.167em; left: -0.167em; @@ -473,6 +475,40 @@ font-size: 0.87em; } +.h5p-course-presentation .h5p-element-button-label { + background: rgba(0,0,0,.8); + border-radius: 0 1em 1em 0; + color: #fff; + cursor: pointer; + height: 2.25em; + left: 1.25em; + padding: 0 0.75em 0 1.5em; + position: absolute; + white-space: nowrap; +} + +.h5p-course-presentation .h5p-element-button-label.left { + border-radius: 1em 0 0 1em; + left: auto; + padding: 0 1.5em 0 0.75em; + right: 1.25em; +} + +.h5p-course-presentation .h5p-element-button-label.small { + height: 1.5em; + line-height: 1.5em; +} + +.h5p-course-presentation .h5p-element-button-label.small:not(.left) { + left: 1em; + padding: 0 0.75em 0 1em; +} + +.h5p-course-presentation .h5p-element-button-label.small.left { + padding: 0 1em 0 0.75em; + right: 1em; +} + .h5p-course-presentation .h5p-exportabletextarea-button, .h5p-course-presentation .h5p-blanks-button, .h5p-course-presentation .h5p-multichoice-button, From ca48e049f732edced48d10f525d67dd2f07298a5 Mon Sep 17 00:00:00 2001 From: Oliver Tacke Date: Mon, 9 Sep 2024 14:06:21 +0200 Subject: [PATCH 2/2] HFP-3872 Fix html encoding in label --- src/scripts/cp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/cp.js b/src/scripts/cp.js index ef6ba8cf..15d70fa3 100644 --- a/src/scripts/cp.js +++ b/src/scripts/cp.js @@ -1128,7 +1128,7 @@ CoursePresentation.prototype.createInteractionButton = const labelElementText = document.createElement('div'); labelElementText.classList.add('h5p-element-button-label-text'); labelElementText.setAttribute('aria-hidden', true); - labelElementText.innerText = labelText; + labelElementText.innerText = stripHTML(labelText); labelElement.append(labelElementText); }