@gamelearn/arcade-components 2.16.0 → 2.17.2

package/dist/components/auto-evaluation-component/components/AutoEvaluation.js

@@ -48,7 +48,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var AutoEvaluation = function AutoEvaluation(_ref) {
-  var _questions$currentQue, _surveyData$current$q3, _surveyData$current$q4;
+  var _questions$currentQue, _surveyData$current$q3;
 
   var description = _ref.description,
       questions = _ref.questions,
@@ -157,10 +157,12 @@ var AutoEvaluation = function AutoEvaluation(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "test--container__overlay"
+    className: "test--container__overlay",
+    "aria-label": "test container overlay"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "test--container",
-    dir: "auto"
+    dir: "auto",
+    "aria-label": "test container"
   }, phase === 'start' && /*#__PURE__*/_react.default.createElement(_StartScreen.default, {
     description: description,
     onNext: function onNext() {
@@ -169,24 +171,34 @@ var AutoEvaluation = function AutoEvaluation(_ref) {
     },
     translate: translate
   }), phase === 'questions' && /*#__PURE__*/_react.default.createElement("div", {
-    className: "survey--questions"
+    className: "survey--questions",
+    "aria-label": "survey questions"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "survey--questions__container"
+    className: "survey--questions__container",
+    "aria-label": "survey questions container"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "survey--questions__count"
+    className: "survey--questions__count",
+    "aria-label": "survey questions count"
   }, /*#__PURE__*/_react.default.createElement("span", null, translate('auto-evaluation.question'), "\xA0", currentQuestion + 1, " ", translate('storylines.misc.of'), " ", questions.length), /*#__PURE__*/_react.default.createElement("span", null, translate('auto-evaluation.allQuestionsMandatory'))), /*#__PURE__*/_react.default.createElement("div", {
     key: "".concat(questions[currentQuestion])
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "survey--questions__item"
+    className: "survey--questions__item",
+    "aria-label": "survey questions item"
   }, (_questions$currentQue = questions[currentQuestion]) === null || _questions$currentQue === void 0 ? void 0 : _questions$currentQue.text), /*#__PURE__*/_react.default.createElement("div", {
-    className: "survey--page__item"
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "survey--points"
+    className: "survey--page__item",
+    "aria-label": "survey page item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "survey--points",
+    "aria-label": "survey points"
   }, Array(11).fill(0).map(function (_, i) {
     var _surveyData$current$q2;
 
-    return /*#__PURE__*/_react.default.createElement("li", {
+    return /*#__PURE__*/_react.default.createElement("span", {
       key: "".concat(0 + i),
+      "aria-label": "".concat(i, " points btn"),
+      role: "button",
+      tabIndex: 0,
+      onKeyUp: function onKeyUp() {},
       onTouchStart: function onTouchStart() {
         setPointIsBeingTouched(i);
       },
@@ -199,32 +211,39 @@ var AutoEvaluation = function AutoEvaluation(_ref) {
       className: "survey--points__item ".concat(((_surveyData$current$q2 = surveyData.current.questions[currentQuestion]) === null || _surveyData$current$q2 === void 0 ? void 0 : _surveyData$current$q2.answer) === i || pointIsBeingTouched === i ? 'selected' : '')
     }, i);
   }))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "test--buttons next"
+    className: "test--buttons next",
+    "aria-label": "test buttons"
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     disabled: currentQuestion === 0,
     onClick: function onClick() {
       return handleNextQuestion(null, true);
     },
+    "aria-label": "next question button",
     className: "gat--btn__navigation ".concat(currentQuestion === 0 ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
+    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back',
+    "aria-label": "icon button"
   })), finish ? /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     onClick: function onClick() {
       setPhase('end');
       play('click-ui');
     },
-    className: "gat--btn gat--btn__primary auto-evaluation__button not-transition"
+    "aria-label": "finish button",
+    className: "gat--btn gat--btn__primary auto-evaluation__button not-transition "
   }, /*#__PURE__*/_react.default.createElement("span", null, translate('auto-evaluation.end'))) : /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     onClick: function onClick() {
       return handleNextQuestion(null, false);
     },
     disabled: ((_surveyData$current$q3 = surveyData.current.questions[currentQuestion]) === null || _surveyData$current$q3 === void 0 ? void 0 : _surveyData$current$q3.answer) === undefined,
-    className: "gat--btn__navigation ".concat(((_surveyData$current$q4 = surveyData.current.questions[currentQuestion]) === null || _surveyData$current$q4 === void 0 ? void 0 : _surveyData$current$q4.answer) === undefined ? 'disabled' : '')
+    "aria-label": "navigation button",
+    className: "gat--btn__navigation $\n                  {\n                    surveyData.current.questions[currentQuestion]?.answer === undefined ? 'disabled' : ''\n                  }"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
+    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next',
+    "aria-label": "navigation icon",
+    role: "img"
   })))), phase === 'end' && /*#__PURE__*/_react.default.createElement(_EndScreen.default, {
     onFinish: close,
     translate: translate

package/dist/components/auto-evaluation-component/components/EndScreen.js

@@ -31,13 +31,19 @@ var EndScreen = function EndScreen(_ref) {
     };
   }, [onFinish]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "auto-evaluation__endscreen"
+    className: "auto-evaluation__endscreen",
+    "aria-label": "auto evaluation endscreen"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "auto-evaluation__finishband"
+    className: "auto-evaluation__finishband",
+    "aria-label": "auto evaluation finishband"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-check-laptop auto-evaluation__iconendscreen"
+    className: "icon-check-laptop auto-evaluation__iconendscreen",
+    "aria-label": "icon-check",
+    role: "img"
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "auto-evaluation__thanks"
+    className: "auto-evaluation__thanks",
+    "aria-label": "auto evaluation thanks",
+    role: "contentinfo"
   }, translate('auto-evaluation.thanks'))));
 };
 

package/dist/components/auto-evaluation-component/components/StartScreen.js

@@ -14,16 +14,25 @@ var StartScreen = function StartScreen(_ref) {
       description = _ref.description,
       translate = _ref.translate;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "auto-evaluation__startscreen"
+    className: "auto-evaluation__startscreen",
+    role: "alertdialog",
+    "aria-modal": "true",
+    "aria-label": "ae start screen"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-happy-laptop auto-evaluation__starticon"
+    className: "icon-happy-laptop auto-evaluation__starticon",
+    "aria-label": "icon laptop",
+    role: "img"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "auto-evaluation__starttext"
+    className: "auto-evaluation__starttext",
+    "aria-label": "desciption"
   }, /*#__PURE__*/_react.default.createElement("span", null, description)), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "gat--btn gat--btn__primary auto-evaluation__button auto-evaluation__button--start",
-    onClick: onNext
-  }, /*#__PURE__*/_react.default.createElement("span", null, translate('auto-evaluation.start'))));
+    onClick: onNext,
+    "aria-label": "start button"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-label": "start text"
+  }, translate('auto-evaluation.start'))));
 };
 
 var _default = StartScreen;

package/dist/components/cards-selector-puzzle-component/components/Card/index.js

@@ -96,7 +96,10 @@ var Card = function Card(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
     order: card.order,
+    onKeyUp: function onKeyUp() {},
     onClick: function onClick() {
       if (!isEmpty() && canBeClicked()) {
         handleClick(cardIndex);

package/dist/components/decision-component/components/Options.js

@@ -61,15 +61,23 @@ var Options = function Options(_ref) {
       defaultChecked: selectedChoice.id === option.id
     }), showingResults ? /*#__PURE__*/_react.default.createElement("label", {
       className: "".concat(option.right ? 'radio-text-success' : 'radio-text-fail'),
-      htmlFor: option.id,
       onClick: function onClick() {
         selectChoice(option);
-      }
+      },
+      role: "button",
+      "aria-label": option.text,
+      tabIndex: 0,
+      onKeyUp: function onKeyUp() {},
+      htmlFor: option.id
     }, option.text) : /*#__PURE__*/_react.default.createElement("label", {
       htmlFor: option.id,
       onClick: function onClick() {
         selectChoiceFirstTime(option);
-      }
+      },
+      role: "button",
+      "aria-label": option.text,
+      tabIndex: 0,
+      onKeyUp: function onKeyUp() {}
     }, option.text));
   }));
 };

package/dist/components/frame-click-puzzle-component/components/FrameClickPuzzleComponent.js

@@ -190,6 +190,9 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     className: "puzzle-frame__progress--handle"
   }))), showFrames ? /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame__info",
+    role: "button",
+    tabIndex: 0,
+    onKeyUp: function onKeyUp() {},
     onClick: onClickCounter
   }, /*#__PURE__*/_react.default.createElement(_Counter.default, {
     current: selected,

package/dist/components/hacker-puzzle-component/components/HackerPuzzleComponent.js

@@ -248,10 +248,11 @@ var HackerPuzzleComponent = function HackerPuzzleComponent(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    tabIndex: "0",
+    role: "button",
+    tabIndex: 0,
     "data-testid": "hacker",
     ref: el,
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyPress,
     onTouchStart: handleKeyPress,
     className: "puzzle--hacker__container background-hacker-".concat(currentTheme.bg)
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/hanged-puzzle-component/components/HangedPuzzleComponent.js

@@ -524,6 +524,9 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     return /*#__PURE__*/_react.default.createElement("span", {
       key: "".concat(letter + index),
       "data-testid": "key-".concat(letter.char),
+      role: "button",
+      tabIndex: 0,
+      onKeyUp: function onKeyUp() {},
       onClick: function onClick() {
         if (!letter.deleted && !resolvedClass && !disabled) {
           addCharacter(letter.char, index);
@@ -536,6 +539,9 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     onClick: disabled ? null : function () {
       return removeCharacter();
     },
+    role: "button",
+    tabIndex: 0,
+    onKeyUp: function onKeyUp() {},
     className: "puzzle--hanged__keyboard--item delete\n                ".concat(disabled ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-delete-keyboard"

package/dist/components/inventory-item/components/InventoryItem.js

@@ -85,6 +85,10 @@ var InventoryItem = function InventoryItem(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "inventory-popup fadeIn--animation ".concat(description ? 'inventory-popup--withdescription' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onKeyUp: function onKeyUp() {},
+    "aria-label": "close inventory popup",
     className: "inventory-popup__close",
     onClick: function onClick() {
       close();

package/dist/components/keyboard-puzzle-component/components/KeyboardPuzzleComponent.js

@@ -265,6 +265,9 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
     }, (Array.isArray(row) ? row : Object.values(row)).map(function (col, colNumb) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "puzzle--keyboard__character",
+        role: "button",
+        onKeyUp: function onKeyUp() {},
+        tabIndex: 0,
         onClick: function onClick() {
           return handleNumbClick(rowNumb, colNumb);
         },

package/dist/components/lectures-component/components/LecturesComponent.js

@@ -13,6 +13,8 @@ var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
 
 var _LectureButtons = _interopRequireDefault(require("./LectureButtons"));
 
+var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -45,7 +47,12 @@ var LecturesComponent = function LecturesComponent(_ref) {
       viewed = _ref.viewed,
       soundActions = _ref.soundActions,
       backgroundImage = _ref.backgroundImage,
-      keyboardControl = _ref.keyboardControl;
+      keyboardControl = _ref.keyboardControl,
+      audio = _ref.audio,
+      audioType = _ref.audioType,
+      audioVolume = _ref.audioVolume,
+      voice = _ref.voice,
+      pause = _ref.pause;
 
   var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -67,7 +74,24 @@ var LecturesComponent = function LecturesComponent(_ref) {
   var goToLecture = !required || required && time >= limit || required && !visible;
 
   var _soundActions = _slicedToArray(soundActions, 1),
-      playSound = _soundActions[0];
+      playSound = _soundActions[0]; // Formateo de la prop 'text' para que Azure haga pausas después de cada tag que se requiera y para evitar que Azure lea los tags htmls
+
+
+  var regexForClosingTags = /<\/p>|<\/h1>|<\/h2>|<\/h3>|<\/h4>|<\/h5>|<\/h6>|<\/li>/gi;
+  var stringsToDelete = /&quot;|&#39;/gi;
+  var textWithDotsBeforeClosingTags = text.replace(regexForClosingTags, '. </p>');
+  var textWithoutStringsToDelete = textWithDotsBeforeClosingTags.replace(stringsToDelete, '');
+  var textParsedForTTSwithoutHtmlTags = textWithoutStringsToDelete.replace(/(<([^>]+)>)/gi, '');
+  (0, _useEkho.default)({
+    audioType: audioType,
+    voice: voice,
+    text: textParsedForTTSwithoutHtmlTags,
+    audio: audio,
+    soundActions: soundActions,
+    emitEvent: emitEvent,
+    volume: audioVolume,
+    pauseTTS: pause
+  });
 
   var translate = function translate(id) {
     return emitEvent({

package/dist/components/media-visor/components/MediaVisor.js

@@ -104,17 +104,23 @@ var VideoVisor = function VideoVisor(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "video media-visor",
     style: isAudio ? configForAudio : null
-  }, !isEmbeddedVideo ? /*#__PURE__*/_react.default.createElement("video", _extends({
+  }, !isEmbeddedVideo ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("video", _extends({
     onEnded: onEnded,
     onError: onError
   }, videoProps, {
     controls: true,
     disablePictureInPicture: true,
     controlsList: "nofullscreen nodownload noremoteplayback"
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "position--absolute right top z-index1"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "gat--btn__round gat--btn__close",
+    role: "button",
+    tabIndex: 0,
+    onKeyUp: function onKeyUp() {},
+    "aria-label": "close button",
     onClick: endVideo
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-close"

package/dist/components/referral-component/components/EmailPill.js

@@ -21,8 +21,10 @@ var EmailPill = function EmailPill(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     tabIndex: "0",
     role: "button",
+    onKeyUp: function onKeyUp() {},
     onClick: handleClick,
-    className: "icon-close"
+    className: "icon-close",
+    "aria-label": "icon click"
   })));
 };
 

package/dist/components/referral-component/components/StepOne.js

@@ -145,6 +145,9 @@ var StepOne = function StepOne(_ref) {
     dir: "auto"
   }, translate('puzzles.referrals.inviter.limit'))), /*#__PURE__*/_react.default.createElement("div", {
     className: "referrals-piece__faketextarea",
+    onKeyUp: function onKeyUp() {},
+    role: "button",
+    tabIndex: 0,
     onClick: focusInInput
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "referrals-piece__scrollarea"
@@ -176,6 +179,7 @@ var StepOne = function StepOne(_ref) {
   }, emailsPills.length, "/10")))), /*#__PURE__*/_react.default.createElement("div", {
     className: "referrals-piece__buttons"
   }, /*#__PURE__*/_react.default.createElement("button", {
+    "data-testid": "cancelButton",
     className: "gat--btn gat--btn__secondary",
     type: "button",
     onClick: handleCancel

package/dist/components/rewards-component/components/RewardsComponent.js

@@ -137,6 +137,10 @@ var RewardsComponent = function RewardsComponent(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "test--results__rewards"
   }, /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "back button",
+    onKeyUp: function onKeyUp() {},
     onClick: onClickPrev,
     className: "icon-back ".concat(rewardsUnified.length <= displayingItems ? 'visibility--hidden' : '', " ").concat(offset <= 0 ? 'disabled' : '')
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -175,6 +179,10 @@ var RewardsComponent = function RewardsComponent(_ref) {
       }
     });
   })))), /*#__PURE__*/_react.default.createElement("span", {
+    onKeyUp: function onKeyUp() {},
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "next",
     onClick: onClickNext,
     className: "icon-next ".concat(rewardsUnified.length <= displayingItems ? 'visibility--hidden' : '', " ").concat(offset + displayingItems >= totalItems ? 'disabled' : '')
   }));

package/dist/components/survey-component/components/ApplicableBox.js

@@ -38,6 +38,9 @@ var ApplicableBox = function ApplicableBox(_ref) {
       onClick: function onClick() {
         return select(option);
       },
+      role: "button",
+      tabIndex: 0,
+      onKeyUp: function onKeyUp() {},
       className: "survey--response__item ".concat(survey[id] === option ? 'selected' : '')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "survey--response__index"

package/dist/components/survey-component/components/OpinionBox.js

@@ -30,16 +30,21 @@ var OpinionBox = function OpinionBox(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "survey--page__item"
-  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "survey--page__item",
+    "aria-label": "opinion box"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "survey--points"
   }, OPINION_OPTIONS.map(function (option) {
-    return /*#__PURE__*/_react.default.createElement("li", {
+    return /*#__PURE__*/_react.default.createElement("span", {
       key: option,
+      className: "survey--points__item ".concat(survey[id] === option ? 'selected' : ''),
+      role: "button",
+      onKeyUp: function onKeyUp() {},
+      tabIndex: 0,
+      "aria-label": option,
       onClick: function onClick() {
         return select(option);
-      },
-      className: "survey--points__item ".concat(survey[id] === option ? 'selected' : '')
+      }
     }, option);
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "survey--points__labels"

package/dist/components/terminal-puzzle-component/components/FilesGroup/Item.js

@@ -19,6 +19,10 @@ var Item = function Item(_ref) {
     className: "puzzle--terminal__folder__list--item"
   }, /*#__PURE__*/_react.default.createElement("div", {
     title: filename,
+    role: "button",
+    onKeyUp: function onKeyUp() {},
+    "aria-label": "file",
+    tabIndex: 0,
     className: "puzzle--terminal__item id-".concat(item.id),
     onClick: function onClick() {
       return !item.fixed ? selectItem(item) : null;

package/dist/components/terminal-puzzle-component/components/FilesGroup/index.js

@@ -40,6 +40,10 @@ var FilesGroup = function FilesGroup(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--terminal__folder--head"
   }, /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    onKeyUp: function onKeyUp() {},
+    "aria-label": "back file",
+    tabIndex: 0,
     onClick: function onClick() {
       return backFile();
     },
@@ -51,6 +55,10 @@ var FilesGroup = function FilesGroup(_ref) {
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "text"
   }, file.name), /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "close folder",
+    onKeyUp: function onKeyUp() {},
     onClick: function onClick() {
       return closeFolder();
     },

package/dist/components/test-component/components/Questions.js

@@ -63,7 +63,10 @@ var Questions = function Questions(_ref) {
       onClick: function onClick() {
         return !disabled ? updateForm(answer, question.id, index) : null;
       },
+      onKeyUp: function onKeyUp() {},
       key: answer.text,
+      role: "button",
+      tabIndex: 0,
       className: "test--response__item ".concat(disabled ? 'review' : '', " ").concat(getClass(answer))
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "test--response__index"

package/dist/components/url-component/components/UrlComponent.js

@@ -70,6 +70,10 @@ var UrlComponent = function UrlComponent(_ref) {
   }, !viewed && clicked ? /*#__PURE__*/_react.default.createElement("div", {
     className: "popup--close",
     "data-testid": "close",
+    role: "button",
+    tabIndex: 0,
+    onKeyUp: function onKeyUp() {},
+    "aria-label": "link",
     onClick: function onClick() {
       return close();
     }

package/dist/components/video-visor/components/VideoControllers/ControlButtons.js

@@ -15,7 +15,11 @@ var ControlButtons = function ControlButtons(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "video--controls__buttons"
   }, /*#__PURE__*/_react.default.createElement("div", {
+    "aria-label": "play and pause button",
+    onKeyUp: function onKeyUp() {},
     className: !paused ? 'icon-pause' : 'icon-play',
+    role: "button",
+    tabIndex: 0,
     onClick: function onClick() {
       pauseVideo();
     }

package/dist/components/video-visor/components/VideoControllers/FinishedVideoButtons.js

@@ -20,6 +20,10 @@ var FinishedVideoButtons = function FinishedVideoButtons(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "video--extra__actions video--extra__actions--widthTransparencyLayer position--absolute z-index1"
   }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    "aria-label": "rewind video",
+    tabIndex: 0,
+    onKeyUp: function onKeyUp() {},
     onClick: function onClick() {
       restart();
     },

package/dist/components/video-visor/components/VideoControllers/PlayInitButton.js

@@ -21,6 +21,10 @@ var PlayInitButton = function PlayInitButton(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "video--extra__actions position--absolute z-index1"
   }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "play video",
+    onKeyUp: function onKeyUp() {},
     onClick: function onClick() {
       play();
     },

package/dist/components/video-visor/components/VideoControllers/SkipButton.js

@@ -19,6 +19,10 @@ var skipButton = function skipButton(_ref) {
     className: "position--absolute right top z-index1"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "gat--btn__round gat--btn__close",
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "close",
+    onKeyUp: function onKeyUp() {},
     onClick: function onClick() {
       skip();
     }

package/dist/components/video-visor/components/VideoVisor.js

@@ -274,7 +274,9 @@ var VideoVisor = function VideoVisor(_ref) {
     onEnded: onEnded,
     onError: onError,
     onPlaying: onPlaying
-  }, videoProps)), loading ? /*#__PURE__*/_react.default.createElement("div", {
+  }, videoProps), /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  })), loading ? /*#__PURE__*/_react.default.createElement("div", {
     className: "video-loading-container",
     style: {
       top: 0,
@@ -289,6 +291,10 @@ var VideoVisor = function VideoVisor(_ref) {
   }, /*#__PURE__*/_react.default.createElement("p", null, Math.floor(loadedPercentage))))) : null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "position--absolute right top z-index1"
   }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onKeyUp: function onKeyUp() {},
+    "aria-label": "end video",
     className: "gat--btn__round gat--btn__close",
     onClick: function onClick() {
       playSound('click-ui');

package/dist/components/web-builder-puzzle-component/Popups/PopupImageComponent/index.js

@@ -75,7 +75,10 @@ var PopupImageComponent = function PopupImageComponent(_ref) {
       className: "folder-item-file__imagewrap",
       onClick: function onClick() {
         return select(image);
-      }
+      },
+      onKeyUp: function onKeyUp() {},
+      role: "button",
+      tabIndex: 0
     }, /*#__PURE__*/_react.default.createElement("img", {
       alt: image.src,
       src: _resourcePath.default + image.src

package/dist/components/web-builder-puzzle-component/Popups/PopupTextComponent/index.js

@@ -82,7 +82,8 @@ var PopupTextComponent = function PopupTextComponent(_ref) {
     className: classDropDown,
     onClick: function onClick() {
       return toggleDropdown();
-    }
+    },
+    role: "presentation"
   }, /*#__PURE__*/_react.default.createElement(Selected, {
     item: selected
   }), /*#__PURE__*/_react.default.createElement("span", {
@@ -93,6 +94,9 @@ var PopupTextComponent = function PopupTextComponent(_ref) {
     if (option instanceof Object) {
       return /*#__PURE__*/_react.default.createElement("span", {
         key: option.title,
+        role: "button",
+        tabIndex: 0,
+        onKeyUp: function onKeyUp() {},
         className: "puzzle--webBuilder__dropdown--option",
         onClick: function onClick() {
           select(option);
@@ -104,6 +108,9 @@ var PopupTextComponent = function PopupTextComponent(_ref) {
 
     return /*#__PURE__*/_react.default.createElement("span", {
       key: option,
+      role: "button",
+      tabIndex: 0,
+      onKeyUp: function onKeyUp() {},
       className: "puzzle--webBuilder__dropdown--option",
       onClick: function onClick() {
         select(option);

package/dist/components/web-builder-puzzle-component/components/EditButton/index.js

@@ -13,6 +13,10 @@ var EditButton = function EditButton(_ref) {
   var action = _ref.action,
       className = _ref.className;
   return /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "".concat(action, " edit button"),
+    onKeyUp: function onKeyUp() {},
     className: "puzzle--webBuilder__edit ".concat(className),
     onClick: action
   }, /*#__PURE__*/_react.default.createElement("span", {

package/dist/components/web-builder-puzzle-component/components/PublishButton/index.js

@@ -13,6 +13,10 @@ var PublishButton = function PublishButton(_ref) {
   var onPublish = _ref.onPublish,
       translate = _ref.translate;
   return /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onKeyUp: function onKeyUp() {},
+    "aria-label": "publish",
     className: "position--absolute bottom center",
     onClick: onPublish
   }, /*#__PURE__*/_react.default.createElement("div", {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.16.0",
+  "version": "2.17.2",
   "main": "dist/index.js",
   "files": [
     "dist",