@gamelearn/arcade-components 2.15.3 → 2.15.4

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

@@ -161,31 +161,46 @@ var ComicComponent = function ComicComponent(_ref) {
   if (!(slides !== null && slides !== void 0 && slides.length)) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     dir: (0, _LangIsRtl.default)() ? 'rtl' : 'auto',
-    className: "comic component growIn-animation"
+    className: "comic component growIn-animation",
+    role: "main",
+    "aria-label": "Comic"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comic--slider"
+    className: "comic--slider",
+    role: "navigation",
+    "aria-label": "Slider"
   }, slides[slideCount] && /*#__PURE__*/_react.default.createElement(_Slide.default, {
     key: "comic page ".concat(slides[slideCount].slideOrder),
     slide: slides[slideCount],
     transition: slideTransition,
     soundActions: soundActions,
-    emitEvent: emitEvent
+    emitEvent: emitEvent,
+    role: "complementary",
+    "aria-hidden": "true"
   }), slideCount > 0 && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "comic-control comic-control--left gat--btn__round",
+    "data-testid": "btn-bck",
     onClick: handleManualBack,
-    "data-testid": "btn-bck"
+    "aria-label": "Back"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
+    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back',
+    role: "img",
+    "aria-label": "Icon Navigation Back"
   })), slideCount + 1 < slides.length && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "comic-control comic-control--right gat--btn__round",
     "data-testid": "btn-nxt",
-    onClick: handleManualNext
+    onClick: handleManualNext,
+    "aria-label": "Next"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
+    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next',
+    role: "img",
+    "aria-label": "Icon Navigation Next"
   })), slideCount + 1 >= slides.length && /*#__PURE__*/_react.default.createElement("div", {
-    className: "position--absolute top right"
+    className: "position--absolute top right",
+    role: "heading",
+    "aria-level": "1",
+    "aria-label": "heading"
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "gat--btn__round gat--btn__close",
@@ -193,9 +208,12 @@ var ComicComponent = function ComicComponent(_ref) {
     onClick: function onClick() {
       play('click-ui');
       close();
-    }
+    },
+    "aria-label": "Close"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-close"
+    className: "icon-close",
+    role: "img",
+    "aria-label": "Icon Close"
   })))));
 };
 

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

@@ -16,12 +16,14 @@ var Slide = function Slide(_ref) {
       transition = _ref.transition;
   var slideTransition = slide.transitionEffects || transition;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "comic--slide__item ".concat(slideTransition)
+    className: "comic--slide__item ".concat(slideTransition),
+    "aria-label": "comic slide item"
   }, slide.vignettes.map(function (vignette) {
     return /*#__PURE__*/_react.default.createElement(_Vignette.default, {
       key: "Vignete ".concat(vignette.vignetteOrder),
       vignette: vignette,
-      alias: slide.alias
+      alias: slide.alias,
+      "aria-hidden": "true"
     });
   }));
 };

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

@@ -48,17 +48,22 @@ var Vignette = function Vignette(_ref) {
     className: "comic--image"
   }, resolvedIdImg && /*#__PURE__*/_react.default.createElement("img", {
     src: resolvedIdImg,
-    alt: "comic pic"
+    alt: "comic pic",
+    "aria-label": "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' : '')
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: toggleText,
     type: "button",
-    className: "un-btn comic-collapsable__header comic-collapsable__toggle"
+    className: "un-btn comic-collapsable__header comic-collapsable__toggle",
+    "aria-label": "toogle text"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(isCollapsed ? 'icon-up-arrow' : 'icon-down-arrow')
+    className: "".concat(isCollapsed ? 'icon-up-arrow' : 'icon-down-arrow'),
+    "aria-label": "toogle icon",
+    role: "img"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comic-collapsable__text"
+    className: "comic-collapsable__text",
+    "aria-label": "vignette text"
   }, alias ? /*#__PURE__*/_react.default.createElement("b", null, alias, ": ") : null, vignette.textData.text)) : null);
 };
 

package/dist/components/konva-components/Area/index.js

@@ -180,7 +180,7 @@ var Area = function Area(_ref) {
     shape: "poly",
     fill: finished ? '' : fillColor,
     stroke: finished || isClicked ? strokeColor : '',
-    strokeWidth: isMobile ? 10 : 2,
+    strokeWidth: isMobile ? 10 : 4,
     opacity: finished || isClicked ? 1 : 0,
     closed: true
   }));

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

@@ -46,45 +46,45 @@ var PopupImageComponent = function PopupImageComponent(_ref) {
 
   var disabled = !selected;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__popup--layer"
+    className: "folder-popup"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__folder"
+    className: "folder-popup__content"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__folder--head"
+    className: "folder-popup__header"
+  }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "folder-popup__title"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "puzzle--webBuilder__folder--head__icon"
+    className: "folder-popup__icon-header icon-fb-search"
+  }), /*#__PURE__*/_react.default.createElement("span", null, translate('webbuilder.imageSelect.title'))), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: closingAction,
+    className: "folder-popup__close",
+    type: "button"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-fb-search"
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: "text"
-  }, translate('webbuilder.imageSelect.title')), /*#__PURE__*/_react.default.createElement("span", {
-    className: "puzzle--webBuilder__folder--close",
-    onClick: closingAction
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-close"
+    className: "icon-close-fit"
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__folder--body"
+    className: "folder-popup__body"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "folder-popup__scroll"
   }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "puzzle--webBuilder__folder__list"
+    className: "folder-popup__list"
   }, images.map(function (image) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: image.src + Date.now(),
-      className: "puzzle--webBuilder__folder__list--item"
+      className: "folder-item-file"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      title: image.src,
-      className: "puzzle--webBuilder__item",
+      className: "folder-item-file__imagewrap",
       onClick: function onClick() {
         return select(image);
       }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "puzzle--webBuilder__icon"
     }, /*#__PURE__*/_react.default.createElement("img", {
       alt: image.src,
-      title: image.src,
       src: _resourcePath.default + image.src
-    })), translate('image.name')));
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__buttons"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "folder-item-file__title",
+      title: image.src
+    }, image.src));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "folder-popup__buttons"
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "gat--btn gat--btn__secondary",

package/package.json

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