@configuratorware/configurator-frontendgui 1.49.9 → 1.50.0

package/src/App/Screens/Configurator/Components/PreviewPortal/index.js

@@ -1,17 +1,18 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import isFunction from 'lodash/isFunction';
 import Icon from '@material-ui/core/Icon';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
-import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import { withAlignTarget } from 'redhotmagma-visualization/AlignTargetProvider';
 import { t } from 'Framework/i18n';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import Thumbnails from '../../Containers/Thumbnail';
+import Dialog from '@material-ui/core/Dialog';
+import { CustomDialogHeader } from '../../../../../Shared/Components/CustomDialog';
+import { withAnalyticsTarget } from '../../../../Shared/Components/Analytics/AnalyticsWrapper';
 
 const styles = theme => ({
     fullscreenPortal: {
@@ -122,26 +123,20 @@ class PreviewPortal extends React.Component {
         }
     };
 
-    renderPreview() {
-        const { hasMoreItems, closePreviewMode, classes, children, width, dialogStyle } = this.props;
-        const portalStyle = dialogStyle
-            ? classes.fullscreenPortal + ' ' + dialogStyle
-            : classes.fullscreenPortal;
+    render() {
+        const { hasMoreItems, closePreviewMode, classes, children, width } = this.props;
+
+        const dialogTitleId = 'product-preview-dialog-title';
 
         return (
-            <div className={portalStyle}>
+            <Dialog fullScreen open aria-labelledby={dialogTitleId} onClose={closePreviewMode}>
                 <div className={classes.fullScreenTitle}>
                     {width === 'xs' && (
-                        <React.Fragment>
-                            <Typography component="div" className={classes.previewTitle}>
-                                {t('configurator.previewTitle')}
-                            </Typography>
-                            <AnalyticsWrapper targetId="preview_close">
-                                <Icon className="previewClose" onClick={closePreviewMode}>
-                                    close
-                                </Icon>
-                            </AnalyticsWrapper>
-                        </React.Fragment>
+                        <CustomDialogHeader
+                            dialogTitle={t('configurator.previewTitle')}
+                            dialogTitleId={dialogTitleId}
+                            onClose={withAnalyticsTarget(closePreviewMode, 'preview_close')}
+                        />
                     )}
                 </div>
                 <div
@@ -154,13 +149,13 @@ class PreviewPortal extends React.Component {
                 </div>
                 {hasMoreItems && <Thumbnails previewOpen={true} />}
                 {width !== 'xs' && (
-                    <AnalyticsWrapper targetId="preview_close">
-                        <Grid
-                            container
-                            className={classes.CloseEditorRoot}
-                            alignItems="center"
-                            justify="center"
-                        >
+                    <Grid
+                        container
+                        className={classes.CloseEditorRoot}
+                        alignItems="center"
+                        justifyContent="center"
+                    >
+                        <AnalyticsWrapper targetId="preview_close">
                             <Button
                                 variant="text"
                                 onClick={closePreviewMode}
@@ -176,16 +171,12 @@ class PreviewPortal extends React.Component {
                                 </Icon>
                                 <b>{t('configurator.previewClose')}</b>
                             </Button>
-                        </Grid>
-                    </AnalyticsWrapper>
+                        </AnalyticsWrapper>
+                    </Grid>
                 )}
-            </div>
+            </Dialog>
         );
     }
-
-    render() {
-        return ReactDOM.createPortal(this.renderPreview(), document.getElementById('frame'));
-    }
 }
 
 export default withWidth()(withStyles(styles, { name: 'Portal' })(withAlignTarget(PreviewPortal)));

package/src/App/Screens/Configurator/Components/Thumbnail/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,10 @@ exports[`renders dots correctly 1`] = `
     class="Thumbnail-dots-7"
   >
     <div
-      class="Thumbnail-dotContainer-9 "
+      aria-disabled="false"
+      class="MuiButtonBase-root AccessibleButton-root-12 Thumbnail-dotContainer-9 "
+      role="button"
+      tabindex="0"
     >
       <div
         class="MuiTypography-root Thumbnail-inactiveDotMode-10 MuiTypography-body1"
@@ -15,7 +18,10 @@ exports[`renders dots correctly 1`] = `
       </div>
     </div>
     <div
-      class="Thumbnail-dotContainer-9 "
+      aria-disabled="false"
+      class="MuiButtonBase-root AccessibleButton-root-12 Thumbnail-dotContainer-9 "
+      role="button"
+      tabindex="0"
     >
       <div
         class="MuiTypography-root Thumbnail-inactiveDotMode-10 MuiTypography-body1"
@@ -24,7 +30,10 @@ exports[`renders dots correctly 1`] = `
       </div>
     </div>
     <div
-      class="Thumbnail-dotContainer-9 "
+      aria-disabled="false"
+      class="MuiButtonBase-root AccessibleButton-root-12 Thumbnail-dotContainer-9 "
+      role="button"
+      tabindex="0"
     >
       <div
         class="MuiTypography-root Thumbnail-inactiveDotMode-10 MuiTypography-body1"
@@ -33,7 +42,10 @@ exports[`renders dots correctly 1`] = `
       </div>
     </div>
     <div
-      class="Thumbnail-dotContainer-9 "
+      aria-disabled="false"
+      class="MuiButtonBase-root AccessibleButton-root-12 Thumbnail-dotContainer-9 "
+      role="button"
+      tabindex="0"
     >
       <div
         class="MuiTypography-root Thumbnail-inactiveDotMode-10 MuiTypography-body1"
@@ -67,7 +79,10 @@ exports[`renders images correctly 1`] = `
           style="justify-content:initial"
         >
           <div
-            class="Thumbnail-thumbnailImageContainer-8"
+            aria-disabled="false"
+            class="MuiButtonBase-root AccessibleButton-root-12 Thumbnail-thumbnailImageContainer-8"
+            role="button"
+            tabindex="0"
             value="frontside"
           >
             <img
@@ -77,7 +92,10 @@ exports[`renders images correctly 1`] = `
             />
           </div>
           <div
-            class="Thumbnail-thumbnailImageContainer-8"
+            aria-disabled="false"
+            class="MuiButtonBase-root AccessibleButton-root-12 Thumbnail-thumbnailImageContainer-8"
+            role="button"
+            tabindex="0"
             value="backside"
           >
             <img
@@ -87,7 +105,10 @@ exports[`renders images correctly 1`] = `
             />
           </div>
           <div
-            class="Thumbnail-thumbnailImageContainer-8"
+            aria-disabled="false"
+            class="MuiButtonBase-root AccessibleButton-root-12 Thumbnail-thumbnailImageContainer-8"
+            role="button"
+            tabindex="0"
             value="leftside"
           >
             <img
@@ -97,7 +118,10 @@ exports[`renders images correctly 1`] = `
             />
           </div>
           <div
-            class="Thumbnail-thumbnailImageContainer-8"
+            aria-disabled="false"
+            class="MuiButtonBase-root AccessibleButton-root-12 Thumbnail-thumbnailImageContainer-8"
+            role="button"
+            tabindex="0"
             value="rightside"
           >
             <img

package/src/App/Screens/Configurator/Components/Thumbnail/index.js

@@ -8,6 +8,7 @@ import Icon from '@material-ui/core/Icon';
 import { withResizeDetectWrapper } from 'Shared/HOCs/ResizeDetect/ResizeDetect';
 import Typography from '@material-ui/core/Typography';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
+import AccessibleButton from '../../../../Shared/Components/AccessibleButton/AccessibleButton';
 
 export const styles = theme => ({
     thumbnailCarouselWrapper: {
@@ -247,9 +248,11 @@ class Thumbnail extends React.Component {
                 <div className={classes.dots}>
                     {items &&
                         items.map((thumbnail, index) => (
-                            <div
+                            <AccessibleButton
+                                component="div"
                                 className={`${classes.dotContainer} ${isSmallScreen ? 'wrap-container' : ''}`}
                                 key={thumbnail.identifier}
+                                onClick={() => onThumbnailClick(thumbnail.identifier)}
                             >
                                 <Typography
                                     component="div"
@@ -258,11 +261,10 @@ class Thumbnail extends React.Component {
                                             ? classes.activeDotMode
                                             : classes.inactiveDotMode
                                     }
-                                    onClick={() => onThumbnailClick(thumbnail.identifier)}
                                 >
                                     {index + 1}
                                 </Typography>
-                            </div>
+                            </AccessibleButton>
                         ))}
                 </div>
             );
@@ -293,7 +295,8 @@ class Thumbnail extends React.Component {
                     >
                         {items &&
                             items.map(thumbnail => (
-                                <div
+                                <AccessibleButton
+                                    component="div"
                                     className={classes.thumbnailImageContainer}
                                     key={thumbnail.identifier}
                                     onClick={() => onThumbnailClick(thumbnail.identifier)}
@@ -309,7 +312,7 @@ class Thumbnail extends React.Component {
                                                 : classes.inactiveThumbnail
                                         }
                                     />
-                                </div>
+                                </AccessibleButton>
                             ))}
                     </div>
                 </Scrollbars>

package/src/App/Screens/Configurator/ThemeProvider.js

@@ -97,6 +97,10 @@ const defaultTheme = {
             outlined: {
                 color: darkTextColor,
             },
+            root: {
+                textAlign: 'left',
+                textTransform: 'none',
+            },
         },
         MuiIcon: {
             root: {
@@ -185,12 +189,11 @@ const defaultTheme = {
             },
         },
         productPart: {
-            captionPaddingTop: '0px',
+            captionPaddingTop: '4px',
             itemSize: '110px',
             selectedItemSize: '118px',
-            lineHeight: '1.5em',
+            lineHeight: '1em',
             markerThickness: '8px',
-            spaceBetweenItemAndMarker: '8px',
         },
         productPartsList: {
             marginLeft: 10,

package/src/App/Shared/Components/AccessibleButton/AccessibleButton.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import PropTypes from 'prop-types';
+
+const AccessibleButtonBase = ({ notAccessible, ...props }) => (
+    <ButtonBase tabIndex={notAccessible ? -1 : 0} focusRipple disableTouchRipple {...props} />
+);
+
+AccessibleButtonBase.propTypes = {
+    notAccessible: PropTypes.bool,
+};
+
+AccessibleButtonBase.defaultProps = {
+    notAccessible: false,
+};
+
+export default withStyles(
+    () => ({
+        root: {
+            justifyContent: 'left',
+            textAlign: 'left',
+            '& .MuiTouchRipple-root .MuiTouchRipple-child': {
+                borderRadius: '8px',
+            },
+        },
+    }),
+    { name: 'AccessibleButton' }
+)(AccessibleButtonBase);

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

@@ -48,16 +48,11 @@ class AlertDialog extends React.Component {
                     className={classes.dialogWrapper}
                     open={true}
                     onClose={this.handleClose}
-                    aria-labelledby="alert-dialog-title"
-                    aria-describedby="alert-dialog-description"
                     onCancel={this.handleClose}
                     dialogTitle={title}
                 >
                     <DialogContent>
-                        <DialogContentText
-                            id="alert-dialog-description"
-                            dangerouslySetInnerHTML={{ __html: message }}
-                        />
+                        <DialogContentText dangerouslySetInnerHTML={{ __html: message }} />
                     </DialogContent>
                     <DialogActions>
                         <MainButton

package/src/App/Shared/Components/AmountPrice/__snapshots__/index.test.jsx.snap

@@ -32,13 +32,13 @@ exports[`renders a boxed component with the boxed prop 1`] = `
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-7 MuiGrid-grid-lg-7"
           >
-            <h5
-              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-h5"
+            <p
+              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-body2"
             >
               <b>
                 500,00 €
               </b>
-            </h5>
+            </p>
             <span
               class="MuiTypography-root AmountPrice-AmountPriceTypographyVat-13 MuiTypography-caption"
             >
@@ -113,13 +113,13 @@ exports[`renders correctly 1`] = `
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-7 MuiGrid-grid-lg-7"
           >
-            <h5
-              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-h5"
+            <p
+              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-body2"
             >
               <b>
                 500,00 €
               </b>
-            </h5>
+            </p>
             <span
               class="MuiTypography-root AmountPrice-AmountPriceTypographyVat-13 MuiTypography-caption"
             >
@@ -194,13 +194,13 @@ exports[`renders receiveOfferForm 1`] = `
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-7 MuiGrid-grid-lg-7"
           >
-            <h5
-              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-h5"
+            <p
+              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-body2"
             >
               <b>
                 500,00 €
               </b>
-            </h5>
+            </p>
             <span
               class="MuiTypography-root AmountPrice-AmountPriceTypographyVat-13 MuiTypography-caption"
             >
@@ -282,13 +282,13 @@ exports[`renders the ConfigurationModeSwitchComponent (if it is provided) 1`] =
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-7 MuiGrid-grid-lg-7"
           >
-            <h5
-              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-h5"
+            <p
+              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-body2"
             >
               <b>
                 500,00 €
               </b>
-            </h5>
+            </p>
             <span
               class="MuiTypography-root AmountPrice-AmountPriceTypographyVat-13 MuiTypography-caption"
             >
@@ -370,13 +370,13 @@ exports[`renders without callToAction 1`] = `
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-7 MuiGrid-grid-lg-7"
           >
-            <h5
-              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-h5"
+            <p
+              class="MuiTypography-root AmountPrice-AmountPriceTypography-12 MuiTypography-body2"
             >
               <b>
                 500,00 €
               </b>
-            </h5>
+            </p>
             <span
               class="MuiTypography-root AmountPrice-AmountPriceTypographyVat-13 MuiTypography-caption"
             >

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

@@ -33,6 +33,9 @@ import { debounce } from '@material-ui/core/utils';
 import AcceptPrivacy from '../AcceptPrivacy';
 import ConfigurationOverview from '../ConfigurationOverview';
 import { isMobileDevice } from 'Framework/Helpers/isMobileDevice';
+import IconButton from '@material-ui/core/IconButton';
+import AutoFocusDialogContentContainer from '../AutoFocusDialogContentContainer/AutoFocusDialogContentContainer';
+
 const styles = theme => ({
     contentPositioning: {
         paddingLeft: 32,
@@ -177,6 +180,7 @@ const styles = theme => ({
     AmountPriceTypography: {
         textAlign: 'end',
         lineHeight: 1.2,
+        fontSize: '1.5rem',
         [theme.breakpoints.down('xs')]: {
             padding: '3px 0',
             textAlign: 'start',
@@ -203,10 +207,10 @@ const styles = theme => ({
     },
     closeIcon: {
         position: 'absolute',
-        right: 32,
-        top: 32,
+        right: 16,
+        top: 16,
         [theme.breakpoints.down('xs')]: {
-            right: 16,
+            right: 0,
         },
         '&:hover': {
             cursor: 'pointer',
@@ -561,10 +565,11 @@ class AmountPrice extends React.Component {
 
         const { ConfigurationOverviewComponent, userConfiguration, width, classes } = this.props;
 
+        const dialogTitleId = 'configuration-overview-dialog-title';
+
         return (
             <Dialog
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
+                aria-labelledby={dialogTitleId}
                 classes={{
                     paper: classes.dialogWrapper,
                     container: width === 'md' || width === 'xs' ? classes.dialogPositioning : '',
@@ -579,12 +584,12 @@ class AmountPrice extends React.Component {
             >
                 <LoadingOverlay show={this.props.addToCartPopUpLoader} />
                 <DialogTitle classes={{ root: classes.dialogTitleRoot }}>
-                    <Typography variant="body1">
+                    <Typography variant="body1" id={dialogTitleId}>
                         <b>{t('amountPrice.configurationOverview')}</b>
                     </Typography>
-                    <Icon className={classes.closeIcon} onClick={this.handleClose.bind(this)}>
-                        close
-                    </Icon>
+                    <IconButton className={classes.closeIcon} onClick={this.handleClose.bind(this)}>
+                        <Icon>close</Icon>
+                    </IconButton>
                 </DialogTitle>
                 <RootRef rootRef={this.dialogContentRef}>
                     <DialogContent classes={{ root: classes.contentPositioning }}>
@@ -597,11 +602,12 @@ class AmountPrice extends React.Component {
         );
     }
 
-    renderDialogTitle() {
+    renderDialogTitle(options) {
+        const { dialogTitleId } = options;
         return this.props.renderDialogTitle ? (
-            this.props.renderDialogTitle(this.props)
+            this.props.renderDialogTitle(this.props, options)
         ) : (
-            <Typography variant="body1">
+            <Typography variant="body1" id={dialogTitleId}>
                 <b>
                     {t(
                         this.props.showReceiveOfferForm
@@ -663,10 +669,11 @@ class AmountPrice extends React.Component {
             });
         }
 
+        const dialogTitleId = 'price-overview-dialog-title';
+
         return (
             <Dialog
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
+                aria-labelledby={dialogTitleId}
                 classes={{
                     paper: classes.dialogWrapper,
                     container: width === 'md' || width === 'xs' ? classes.dialogPositioning : '',
@@ -682,13 +689,16 @@ class AmountPrice extends React.Component {
             >
                 <LoadingOverlay show={this.props.addToCartPopUpLoader} />
                 <DialogTitle classes={{ root: classes.dialogTitleRoot }}>
-                    {this.renderDialogTitle()}
-                    <Icon className={classes.closeIcon} onClick={this.handleClose.bind(this)}>
-                        close
-                    </Icon>
+                    {this.renderDialogTitle({ dialogTitleId })}
+                    <IconButton onClick={this.handleClose.bind(this)} className={classes.closeIcon}>
+                        <Icon>close</Icon>
+                    </IconButton>
                 </DialogTitle>
                 <RootRef rootRef={this.dialogContentRef}>
-                    <DialogContent classes={{ root: classes.contentPositioning }}>
+                    <AutoFocusDialogContentContainer
+                        Component={DialogContent}
+                        classes={{ root: classes.contentPositioning }}
+                    >
                         {this.state.hasErrorReceiveOfferForm && (
                             <Typography color="error" variant="body2">
                                 {t('receiveOfferForm.checkInputsInForm')}
@@ -763,7 +773,7 @@ class AmountPrice extends React.Component {
                             }
                             showReceiveOfferForm={showReceiveOfferForm}
                         />
-                    </DialogContent>
+                    </AutoFocusDialogContentContainer>
                 </RootRef>
                 <DialogActionsWrapper onTouchMove={this.handleTouchMove}>
                     <AddToCartComponent
@@ -848,7 +858,7 @@ class AmountPrice extends React.Component {
                             {!hidePrices && (
                                 <Grid item xs={12} sm={6} md={7} lg={7}>
                                     <Typography
-                                        variant="h5"
+                                        variant="body2"
                                         classes={{
                                             root: classes.AmountPriceTypography,
                                         }}

package/src/App/Shared/Components/Analytics/AnalyticsWrapper.js

@@ -19,4 +19,10 @@ const AnalyticsWrapper = ({ targetId, data, children }) => {
     }
     return React.cloneElement(children, { ...props, ...events });
 };
+
+export const withAnalyticsTarget = (fn, targetId, data) => (...args) => {
+    Services.analytics.triggerEvent(EventTypes[targetId], data);
+    return fn(...args);
+};
+
 export default AnalyticsWrapper;

package/src/App/Shared/Components/AutoFocusDialogContentContainer/AutoFocusDialogContentContainer.jsx

@@ -0,0 +1,52 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropsTypes from 'prop-types';
+
+const AutoFocusDialogContentContainer = props => {
+    const { Component, open, children, ...otherProps } = props;
+    const [contentRef, setContentRef] = useState(null);
+    const [focusedOnce, setFocusedOnce] = useState(false);
+    const focusFirstInteractiveElement = useCallback(element => {
+        setContentRef(element);
+    }, []);
+    useEffect(() => {
+        open && setFocusedOnce(false);
+    }, [open]);
+    useEffect(() => {
+        if (!contentRef) {
+            return;
+        }
+        const focusableElements = contentRef.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+
+        if (
+            !focusedOnce &&
+            focusableElements.length > 0 &&
+            ![...focusableElements].some(element => element === document.activeElement)
+        ) {
+            const timeout = setTimeout(() => {
+                const firstElement = focusableElements[0];
+                firstElement.focus();
+                setFocusedOnce(true);
+            }, 100);
+            return () => clearTimeout(timeout);
+        }
+    }, [children, focusedOnce, contentRef, focusFirstInteractiveElement]);
+    return (
+        <Component ref={focusFirstInteractiveElement} {...otherProps}>
+            {children}
+        </Component>
+    );
+};
+
+AutoFocusDialogContentContainer.propTypes = {
+    Component: PropsTypes.elementType,
+    open: PropsTypes.bool,
+    children: PropsTypes.node,
+};
+
+AutoFocusDialogContentContainer.defaultProps = {
+    Component: 'div',
+};
+
+export default AutoFocusDialogContentContainer;

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

@@ -35,8 +35,8 @@ const styles = theme => ({
     },
     CloseIcon: {
         position: 'absolute',
-        right: 30,
-        top: 30,
+        right: 16,
+        top: 16,
 
         '&:hover': {
             cursor: 'pointer',
@@ -114,6 +114,7 @@ class BulkNames extends React.Component {
         handleText: PropTypes.func,
         addTextField: PropTypes.func,
     };
+
     render() {
         const {
             classes,
@@ -132,6 +133,9 @@ class BulkNames extends React.Component {
             saveConfigurationBulkNames,
             size,
         } = this.props;
+
+        const dialogTitleId = 'bulk-names-edit-dialog-title';
+
         return (
             <Dialog
                 open={showBulkNameForm}
@@ -140,14 +144,15 @@ class BulkNames extends React.Component {
                 fullWidth
                 fullScreen={width === 'sm' || width === 'xs'}
                 scroll="paper"
+                aria-labelledby={dialogTitleId}
             >
                 <DialogTitle className={classes.dialogTitleRoot}>
-                    <Typography className={classes.TypographyCaption} variant="body1">
+                    <Typography className={classes.TypographyCaption} variant="body1" id={dialogTitleId}>
                         <b>{t('bulkNames.bulkNamesEdit')}</b>
                     </Typography>
-                    <Icon className={classes.CloseIcon} onClick={onClose}>
-                        close
-                    </Icon>
+                    <IconButton className={classes.CloseIcon} onClick={onClose}>
+                        <Icon>close</Icon>
+                    </IconButton>
                 </DialogTitle>
                 <DialogContent className={classes.dialogContentRoot}>
                     <Grid container>

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

@@ -98,8 +98,6 @@ class LoadConfiguration extends React.Component {
             <CustomDialog
                 open={show}
                 onClose={onClose}
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
                 dialogTitle={t('loadConfiguration.dialogTitle')}
                 onCancel={onClose}
             >