@configuratorware/configurator-frontendgui 1.50.4 → 1.51.0

package/App/Modules/Creator/Components/Option/index.js

@@ -288,6 +288,9 @@ var Option = function Option(_ref) {
     var src = (0, _getImageUrl["default"])(thumbnail);
     return src && /*#__PURE__*/_react["default"].createElement("img", {
       src: src,
+      alt: (0, _i18n.t)('ariaLabels.optionImage', {
+        title: option.title
+      }),
       onError: setImageAvailability
     });
   };

package/App/Modules/Creator/Components/Optiondetail/index.js

@@ -305,7 +305,8 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         onClose = _this$props5.onClose,
         details = _this$props5.details,
         classes = _this$props5.classes,
-        width = _this$props5.width;
+        width = _this$props5.width,
+        optionclassification = _this$props5.optionclassification;
       var _this$state = this.state,
         loading = _this$state.loading,
         loadingContainerHeight = _this$state.loadingContainerHeight;
@@ -386,7 +387,10 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         onLoad: this.handleImageLoaded,
         className: this.state.zoomImage && ['xs', 'sm'].includes(width) ? classes.imageHidden : classes.image,
         src: (0, _getImageUrl["default"])(detailImage),
-        alt: details.title
+        alt: (0, _i18n.T)('ariaLabels.optionDetailsImage', {
+          componentTitle: optionclassification.title,
+          optionTitle: details.title
+        })
       })), detailsContent) : detailsContent, showNav && /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _clsx2["default"])(classes.detailNav, 'next'),
         onClick: this.next

package/App/Modules/Creator/Components/ProductPart/index.js

@@ -45,7 +45,11 @@ var ProductPart = function ProductPart(_ref) {
       className: "".concat(classes.icon, " ").concat(direction),
       style: imageUrl ? {
         backgroundImage: 'url(' + imageUrl + ')'
-      } : {}
+      } : {},
+      "aria-label": (0, _i18n.t)('ariaLabels.component', {
+        title: optionclassification.title
+      }),
+      role: "img"
     });
   };
   var displayText = function displayText() {

package/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -400,7 +400,6 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         closePreviewDialog = _this$props2.closePreviewDialog,
         continueClick = _this$props2.continueClick,
         loaderComponent = _this$props2.loaderComponent,
-        colorPickerEnabled = _this$props2.colorPickerEnabled,
         imageColorizeElement = _this$props2.imageColorizeElement,
         activeTabIndex = _this$props2.activeTabIndex,
         width = _this$props2.width,
@@ -611,7 +610,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         }),
         label: (0, _i18n.t)('fileUpload.removeBackgroundEverywhere'),
         disabled: backgroundSelected === null
-      })))), colorPickerEnabled && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      })))), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         variant: "caption",
         className: classes.colorizeCaption
       }, colorizeIcon !== null && colorizeIcon !== void 0 ? colorizeIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "colorize"), /*#__PURE__*/_react["default"].createElement("i", null, (0, _i18n.t)((0, _withWidth.isWidthDown)('xs', width) ? 'fileUpload.tabColorForRemove' : 'fileUpload.chooseColorForRemove')))), activeTabIndex === 2 && /*#__PURE__*/_react["default"].createElement("div", {

package/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -394,7 +394,6 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
           _options$forceFetch,
           forceFetch,
           image,
-          activeTabIndex,
           preview,
           originalImagePreview,
           previewUrl,
@@ -408,36 +407,32 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
               options = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : {};
               _options$forceFetch = options.forceFetch, forceFetch = _options$forceFetch === void 0 ? false : _options$forceFetch;
               image = _this.props.image;
-              activeTabIndex = _this.state.activeTabIndex;
               preview = null;
               originalImagePreview = null;
               previewUrl = image === null || image === void 0 || (_image$preview = image.preview) === null || _image$preview === void 0 ? void 0 : _image$preview.url;
-              if (previewUrl && activeTabIndex === 1) {
-                previewUrl = (0, _Transformers.getRasterURL)(previewUrl);
-              }
               isSvg = previewUrl && /\.svg$/.test(previewUrl);
               if (!image) {
-                _context6.next = 22;
+                _context6.next = 20;
                 break;
               }
               updateSVG = isSvg;
               if (!updateSVG) {
-                _context6.next = 19;
+                _context6.next = 17;
                 break;
               }
               if (svgContent) {
-                _context6.next = 16;
+                _context6.next = 14;
                 break;
               }
-              _context6.next = 15;
+              _context6.next = 13;
               return (0, _DesignDataService.getSvgContent)(image.preview.url, false, forceFetch);
-            case 15:
+            case 13:
               svgContent = _context6.sent;
-            case 16:
+            case 14:
               preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, image.displayColorPreview ? image.operations : null, svgContent);
-              _context6.next = 22;
+              _context6.next = 20;
               break;
-            case 19:
+            case 17:
               forceUpdate = isImageInvalidatedByChange(_this.lastImageUpdateData, image);
               if (forceUpdate) {
                 _this.previewVersion = Math.random();
@@ -446,13 +441,13 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
                 preview = (0, _Selectors3.getPreviewUrlFromImageData)(previewUrl) + (_this.previewVersion ? "?".concat(_this.previewVersion) : '');
                 originalImagePreview = preview;
               }
-            case 22:
+            case 20:
               _this.lastImageUpdateData = image;
               _this.setState({
                 preview: preview,
                 originalImagePreview: originalImagePreview
               });
-            case 24:
+            case 22:
             case "end":
               return _context6.stop();
           }
@@ -793,7 +788,6 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
         closePreviewDialog: this.closePreviewDialog,
         backgroundSelected: clipping,
         preview: preview,
-        colorPickerEnabled: !!clipping,
         uploadDelayed: uploadDelayed,
         continueButtonDisabled: continueButtonDisabled,
         continueClick: this.continueClick,

package/App/Shared/Components/ConfigurationOverview/index.js

@@ -11,6 +11,7 @@ var _Typography = _interopRequireDefault(require("@material-ui/core/Typography")
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _getImageUrl = _interopRequireDefault(require("../../../Utils/getImageUrl"));
+var _i18n = require("../../../../Framework/i18n");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -88,10 +89,14 @@ var ConfigurationOverview = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         optionclassifications = _this$props.optionclassifications,
         classes = _this$props.classes;
-      var renderImage = function renderImage(thumbnail) {
+      var renderImage = function renderImage(thumbnail, componentTitle, optionTitle) {
         var src = (0, _getImageUrl["default"])(thumbnail);
         return src && /*#__PURE__*/_react["default"].createElement("img", {
-          src: src
+          src: src,
+          alt: (0, _i18n.t)('ariaLabels.overViewSelectedOptionImage', {
+            componentTitle: componentTitle,
+            optionTitle: optionTitle
+          })
         });
       };
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -114,11 +119,11 @@ var ConfigurationOverview = /*#__PURE__*/function (_React$Component) {
             className: classes.options
           }, option.amount !== 1 ? /*#__PURE__*/_react["default"].createElement("div", {
             className: classes.image
-          }, renderImage((0, _get["default"])(option, 'thumbnail', '')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          }, renderImage((0, _get["default"])(option, 'thumbnail', ''), optionclassification.title, option.title), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
             className: classes.option
           }, option.amount, " x ", option.title)) : /*#__PURE__*/_react["default"].createElement("div", {
             className: classes.image
-          }, renderImage((0, _get["default"])(option, 'thumbnail', '')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          }, renderImage((0, _get["default"])(option, 'thumbnail', ''), optionclassification.title, option.title), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
             className: classes.option
           }, option.title)));
         }))));

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.50.4",
+  "version": "1.51.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.50.4",
+    "@configuratorware/scripts": "1.51.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.50.4",
-    "redhotmagma-visualization": "1.50.4",
+    "redhotmagma-graphics-editor": "1.51.0",
+    "redhotmagma-visualization": "1.51.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/translations/de_DE.json

@@ -474,5 +474,11 @@
     "title": "Produktübersicht",
     "customize": "Konfigurieren",
     "noItems": "Keine verfügbaren Produkte"
+  },
+  "ariaLabels": {
+    "component": "Komponente: %{title}",
+    "optionImage": "Option: %{title}",
+    "optionDetailsImage": "Detailansicht: %{componentTitle} %{optionTitle}",
+    "overViewSelectedOptionImage": "Meine Konfiguration: %{componentTitle} %{optionTitle}"
   }
 }

package/public/translations/en_GB.json

@@ -474,5 +474,11 @@
     "title": "Item Overview",
     "customize": "Customize",
     "noItems": "No available items"
+  },
+  "ariaLabels": {
+    "component": "Component: %{title}",
+    "optionImage": "Option: %{title}",
+    "optionDetailsImage": "Detailed view: %{componentTitle} %{optionTitle}",
+    "overViewSelectedOptionImage": "My configuration: %{componentTitle} %{optionTitle}"
   }
 }

package/src/App/Modules/Creator/Components/Option/__snapshots__/index.test.js.snap

@@ -323,6 +323,7 @@ exports[`Option renders with TextInput 1`] = `
       class="Option-image-154"
     >
       <img
+        alt="ariaLabels.optionImage"
         src="/images/options/010002011000.png"
       />
     </div>
@@ -386,6 +387,7 @@ exports[`Option renders with an available image 1`] = `
       class="Option-image-8"
     >
       <img
+        alt="ariaLabels.optionImage"
         src="/images/options/010002011000.png"
       />
     </div>

package/src/App/Modules/Creator/Components/Option/index.js

@@ -295,7 +295,15 @@ const Option = ({ children, render, ...props }) => {
 
     const renderImage = () => {
         const src = getImageUrl(thumbnail);
-        return src && <img src={src} onError={setImageAvailability} />;
+        return (
+            src && (
+                <img
+                    src={src}
+                    alt={t('ariaLabels.optionImage', { title: option.title })}
+                    onError={setImageAvailability}
+                />
+            )
+        );
     };
 
     const renderNotAvailableImage = () => {

package/src/App/Modules/Creator/Components/Optiondetail/index.js

@@ -265,7 +265,16 @@ class Optiondetail extends React.Component {
     };
 
     render() {
-        const { LoadingComponent, options, show, onClose, details, classes, width } = this.props;
+        const {
+            LoadingComponent,
+            options,
+            show,
+            onClose,
+            details,
+            classes,
+            width,
+            optionclassification,
+        } = this.props;
         const { loading, loadingContainerHeight } = this.state;
         const showNav = isArray(options) && options.length > 1;
         const detailImage = details.detailImage;
@@ -389,7 +398,10 @@ class Optiondetail extends React.Component {
                                                         : classes.image
                                                 }
                                                 src={getImageUrl(detailImage)}
-                                                alt={details.title}
+                                                alt={T('ariaLabels.optionDetailsImage', {
+                                                    componentTitle: optionclassification.title,
+                                                    optionTitle: details.title,
+                                                })}
                                             />
                                         </div>
                                         {detailsContent}

package/src/App/Modules/Creator/Components/ProductPart/__snapshots__/index.test.js.snap

@@ -13,7 +13,9 @@ exports[`ProductPart renders with horizontal marker 1`] = `
     type="button"
   >
     <i
+      aria-label="ariaLabels.component"
       class="ProductPart-icon-21 horizontal"
+      role="img"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
@@ -38,7 +40,9 @@ exports[`ProductPart renders with vertical marker 1`] = `
     type="button"
   >
     <i
+      aria-label="ariaLabels.component"
       class="ProductPart-icon-15 vertical"
+      role="img"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
@@ -63,7 +67,9 @@ exports[`ProductPart renders without marker 1`] = `
     type="button"
   >
     <i
+      aria-label="ariaLabels.component"
       class="ProductPart-icon-3 vertical"
+      role="img"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
@@ -88,7 +94,9 @@ exports[`ProductPart renders without marker when menu is closed 1`] = `
     type="button"
   >
     <i
+      aria-label="ariaLabels.component"
       class="ProductPart-icon-9 vertical"
+      role="img"
       style="background-image:url(/images/components/seat.png)"
     />
     <span

package/src/App/Modules/Creator/Components/ProductPart/index.js

@@ -7,6 +7,7 @@ import getImageUrl from 'App/Utils/getImageUrl';
 import customClassName from 'App/Utils/customClassName';
 import { Hyphenated } from 'Framework/i18n';
 import { withStyles } from '@material-ui/core/styles';
+import { t } from 'Framework/i18n';
 import AccessibleButton from '../../../../Shared/Components/AccessibleButton/AccessibleButton';
 
 const ProductPart = ({
@@ -41,6 +42,8 @@ const ProductPart = ({
             <i
                 className={`${classes.icon} ${direction}`}
                 style={imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : {}}
+                aria-label={t('ariaLabels.component', { title: optionclassification.title })}
+                role="img"
             />
         );
     };

package/src/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -352,7 +352,6 @@ class ImageEditDialog extends React.Component {
         closePreviewDialog: PropTypes.func,
         continueClick: PropTypes.func,
         onChangeColor: PropTypes.func,
-        colorPickerEnabled: PropTypes.bool,
         imageColorizeElement: PropTypes.element,
         activeTabIndex: PropTypes.number,
         onActiveTabChange: PropTypes.func,
@@ -464,7 +463,6 @@ class ImageEditDialog extends React.Component {
             closePreviewDialog,
             continueClick,
             loaderComponent,
-            colorPickerEnabled,
             imageColorizeElement,
             activeTabIndex,
             width,
@@ -785,18 +783,16 @@ class ImageEditDialog extends React.Component {
                                             </RadioGroup>
                                         </AnalyticsWrapper>
                                     </FormControl>
-                                    {colorPickerEnabled && (
-                                        <Typography variant="caption" className={classes.colorizeCaption}>
-                                            {colorizeIcon ?? <Icon>colorize</Icon>}
-                                            <i>
-                                                {t(
-                                                    isWidthDown('xs', width)
-                                                        ? 'fileUpload.tabColorForRemove'
-                                                        : 'fileUpload.chooseColorForRemove'
-                                                )}
-                                            </i>
-                                        </Typography>
-                                    )}
+                                    <Typography variant="caption" className={classes.colorizeCaption}>
+                                        {colorizeIcon ?? <Icon>colorize</Icon>}
+                                        <i>
+                                            {t(
+                                                isWidthDown('xs', width)
+                                                    ? 'fileUpload.tabColorForRemove'
+                                                    : 'fileUpload.chooseColorForRemove'
+                                            )}
+                                        </i>
+                                    </Typography>
                                 </div>
                             )}
                             {activeTabIndex === 2 && (

package/src/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -51,7 +51,7 @@ import createSelector from 'Utils/Function/createSelector';
 import { getConf } from 'App/configuration';
 import { EventTypes } from 'App/Constant';
 import { expandVectorizeColorsMap, getClosestColorFromMap } from '../Utils/ImageEditUtils';
-import { getRasterURL, isOriginalVector } from '../Utils/Transformers';
+import { isOriginalVector } from '../Utils/Transformers';
 import { getClient, getConfigurator } from '../../../Reducers/Configurator/Selectors';
 
 const getOperationsFromState = state => {
@@ -515,15 +515,11 @@ export class ImageEditDialogContainer extends React.Component {
     updatePreview = async (svgContent, options = {}) => {
         const { forceFetch = false } = options;
         const { image } = this.props;
-        const { activeTabIndex } = this.state;
 
         let preview = null;
         let originalImagePreview = null;
 
         let previewUrl = image?.preview?.url;
-        if (previewUrl && activeTabIndex === 1) {
-            previewUrl = getRasterURL(previewUrl);
-        }
 
         const isSvg = previewUrl && /\.svg$/.test(previewUrl);
 
@@ -741,7 +737,6 @@ export class ImageEditDialogContainer extends React.Component {
                     closePreviewDialog={this.closePreviewDialog}
                     backgroundSelected={clipping}
                     preview={preview}
-                    colorPickerEnabled={!!clipping}
                     uploadDelayed={uploadDelayed}
                     continueButtonDisabled={continueButtonDisabled}
                     continueClick={this.continueClick}

package/src/App/Shared/Components/ConfigurationOverview/index.js

@@ -4,6 +4,7 @@ import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import getImageUrl from '../../../Utils/getImageUrl';
+import { t } from 'Framework/i18n';
 
 const styles = () => ({
     tableWrapper: {
@@ -65,9 +66,19 @@ class ConfigurationOverview extends React.Component {
     render() {
         const { optionclassifications, classes } = this.props;
 
-        const renderImage = thumbnail => {
+        const renderImage = (thumbnail, componentTitle, optionTitle) => {
             const src = getImageUrl(thumbnail);
-            return src && <img src={src} />;
+            return (
+                src && (
+                    <img
+                        src={src}
+                        alt={t('ariaLabels.overViewSelectedOptionImage', {
+                            componentTitle: componentTitle,
+                            optionTitle: optionTitle,
+                        })}
+                    />
+                )
+            );
         };
 
         return (
@@ -88,14 +99,22 @@ class ConfigurationOverview extends React.Component {
                                                 <li className={classes.options}>
                                                     {option.amount !== 1 ? (
                                                         <div className={classes.image}>
-                                                            {renderImage(get(option, 'thumbnail', ''))}
+                                                            {renderImage(
+                                                                get(option, 'thumbnail', ''),
+                                                                optionclassification.title,
+                                                                option.title
+                                                            )}
                                                             <Typography className={classes.option}>
                                                                 {option.amount} x {option.title}
                                                             </Typography>
                                                         </div>
                                                     ) : (
                                                         <div className={classes.image}>
-                                                            {renderImage(get(option, 'thumbnail', ''))}
+                                                            {renderImage(
+                                                                get(option, 'thumbnail', ''),
+                                                                optionclassification.title,
+                                                                option.title
+                                                            )}
                                                             <Typography className={classes.option}>
                                                                 {option.title}
                                                             </Typography>