@gamelearn/arcade-components 2.20.0 → 2.22.0

package/dist/components/comic-component/components/Vignette.js

@@ -36,13 +36,15 @@ var Vignette = function Vignette(_ref) {
   };
   var resolvedIdImg = resource.url;
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
-      isCollapsed = _useState2[0],
-      setIsCollapsed = _useState2[1];
+      isOpened = _useState2[0],
+      setIsOpened = _useState2[1];
 
-  var toggleText = function toggleText() {
-    setIsCollapsed(!isCollapsed);
+  var toggleText = function toggleText(e) {
+    var buttonSelect = document.querySelector("#".concat(e));
+    buttonSelect.focus();
+    setIsOpened(!isOpened);
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -51,17 +53,32 @@ var Vignette = function Vignette(_ref) {
     src: resolvedIdImg,
     alt: "comic pic"
   })), vignette !== null && vignette !== void 0 && (_vignette$textData = vignette.textData) !== null && _vignette$textData !== void 0 && _vignette$textData.text ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "comic-collapsable ".concat(isCollapsed ? 'comic-collapsable--collapsed' : '')
+    className: "comic-collapsable ".concat(isOpened ? 'comic-collapsable--opened' : '')
   }, /*#__PURE__*/_react.default.createElement("button", {
-    onClick: toggleText,
+    id: "buttonDown",
+    onClick: function onClick() {
+      return toggleText('buttonUp');
+    },
     type: "button",
-    className: "un-btn comic-collapsable__header comic-collapsable__toggle",
+    className: "un-btn comic-collapsable__headertoggle",
     "aria-label": translate('comic.toggleText')
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(isCollapsed ? 'icon-up-arrow' : 'icon-down-arrow')
+    className: "icon-down-arrow"
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "comic-collapsable__text"
-  }, alias ? /*#__PURE__*/_react.default.createElement("b", null, alias, ": ") : null, vignette.textData.text)) : null);
+  }, alias ? /*#__PURE__*/_react.default.createElement("b", null, alias, ": ") : null, vignette.textData.text)) : null, /*#__PURE__*/_react.default.createElement("button", {
+    id: "buttonUp",
+    tabIndex: isOpened ? '-1' : '0',
+    "aria-hidden": isOpened,
+    className: "unset-button comic-buttonup\n        ".concat(isOpened ? '' : 'comic-buttonup--visible'),
+    type: "button",
+    onClick: function onClick() {
+      return toggleText('buttonDown');
+    },
+    "aria-label": translate('comic.toggleText')
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-up-arrow"
+  })));
 };
 
 var _default = Vignette;

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

@@ -189,11 +189,11 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
       width: "".concat(selected / totalCorrects * 100, "%")
     },
     className: "puzzle-frame__progress--handle"
-  }))), showFrames ? /*#__PURE__*/_react.default.createElement("div", {
+  }))), showFrames ? /*#__PURE__*/_react.default.createElement("button", {
+    disabled: hideTooltip,
+    "aria-hidden": hideTooltip,
+    type: "button",
     className: "puzzle-frame__info",
-    role: "button",
-    tabIndex: 0,
-    onKeyUp: function onKeyUp() {},
     onClick: onClickCounter
   }, /*#__PURE__*/_react.default.createElement(_Counter.default, {
     current: selected,

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

@@ -521,12 +521,10 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
   }, poolLetters.sort(function (letter1, letter2) {
     return (0, _utils.sortChar)(letter1, letter2);
   }).map(function (letter, index) {
-    return /*#__PURE__*/_react.default.createElement("span", {
+    return /*#__PURE__*/_react.default.createElement("button", {
       key: "".concat(letter + index),
       "data-testid": "key-".concat(letter.char),
-      role: "button",
-      tabIndex: 0,
-      onKeyUp: function onKeyUp() {},
+      type: "button",
       onClick: function onClick() {
         if (!letter.deleted && !resolvedClass && !disabled) {
           addCharacter(letter.char, index);
@@ -535,14 +533,14 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
       },
       className: "puzzle--hanged__keyboard--item ".concat(letter.deleted || disabled ? 'disabled' : '')
     }, letter.char);
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("button", {
     onClick: disabled ? null : function () {
       return removeCharacter();
     },
-    role: "button",
-    tabIndex: 0,
-    onKeyUp: function onKeyUp() {},
-    className: "puzzle--hanged__keyboard--item delete\n                ".concat(disabled ? 'disabled' : '')
+    type: "button",
+    disabled: disabled ? 'disabled' : null,
+    "aria-label": translate('puzzles.hanged-puzzle.deleteButton'),
+    className: "puzzle--hanged__keyboard--item delete ".concat(disabled ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-delete-keyboard"
   }))))));

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

@@ -253,7 +253,8 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
   }) : /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     onClick: handleRemoveChar,
-    className: "puzzle--keyboard__delete"
+    className: "puzzle--keyboard__delete",
+    "aria-label": translate('puzzles.keyboard-puzzle.deleteButton')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-delete-keyboard"
   })))), /*#__PURE__*/_react.default.createElement("div", {
@@ -263,11 +264,9 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
       className: "puzzle--keyboard__row",
       key: "row_".concat(0 + rowNumb)
     }, (Array.isArray(row) ? row : Object.values(row)).map(function (col, colNumb) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement("button", {
         className: "puzzle--keyboard__character",
-        role: "button",
-        onKeyUp: function onKeyUp() {},
-        tabIndex: 0,
+        type: "button",
         onClick: function onClick() {
           return handleNumbClick(rowNumb, colNumb);
         },

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

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

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

@@ -18,7 +18,7 @@ var Image = function Image(_ref) {
     className: "puzzle--terminal__image ".concat(isWallpaper ? 'puzzle--terminal__image--wallpaper' : '')
   }, imageUrl ? /*#__PURE__*/_react.default.createElement("img", {
     src: imageUrl,
-    alt: name
+    alt: name || ''
   }) : null);
 };
 

package/dist/components/writer-puzzle-component/components/SingleElection.js

@@ -104,14 +104,14 @@ var SingleElection = function SingleElection(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "single-election"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "single-election__cta"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "single-election__btn",
+    className: "single-election__cta",
     type: "button",
     onClick: function onClick() {
       return selectOption();
     }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "single-election__btn"
   }, useText(option)), /*#__PURE__*/_react.default.createElement("div", {
     onMouseOver: moveEyeArrow,
     onFocus: moveEyeArrow,

package/dist/components/writer-puzzle-component/components/WriterPuzzleComponent.js

@@ -493,7 +493,9 @@ var WriterPuzzleComponent = function WriterPuzzleComponent(_ref) {
     className: "writer-puzzle__body",
     dir: (0, _LangIsRtl.default)() ? 'rtl' : 'auto'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "writer-puzzle__scroll",
+    className: "writer-puzzle__scroll" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
     style: {
       overflowX: 'hidden',
       padding: '0 0 20px 0',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.20.0",
+  "version": "2.22.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "2.14.8",
+    "@gamelearn/arcade-styles": "2.15.0",
     "@gamelearn/arcade-three-core": "1.17.2",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",