From b7c6d1cd7f0612dba38b291802e44714a52773c3 Mon Sep 17 00:00:00 2001
From: kkmch <kkmch@yandex-team.ru>
Date: Wed, 8 Nov 2023 11:04:09 +0100
Subject: [PATCH 1/2] feat: using extraProps in Image

---
 src/blocks/Tabs/Tabs.tsx               | 4 +++-
 src/components/Image/Image.tsx         | 6 +++++-
 src/models/constructor-items/common.ts | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx
index f5353b00f..17f1f065e 100644
--- a/src/blocks/Tabs/Tabs.tsx
+++ b/src/blocks/Tabs/Tabs.tsx
@@ -73,7 +73,9 @@ export const TabsBlock = ({
 
         if (activeTabData.caption && imageProps) {
             Object.assign(imageProps, {
-                'aria-describedby': captionId,
+                extraProps: {
+                    'aria-describedby': captionId,
+                },
             });
         }
     }
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 01c828b10..c1958debb 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -1,6 +1,7 @@
 import React, {
     CSSProperties,
     Fragment,
+    HTMLProps,
     MouseEventHandler,
     ReactEventHandler,
     useContext,
@@ -12,7 +13,7 @@ import {ProjectSettingsContext} from '../../context/projectSettingsContext';
 import {ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';
 import {getQaAttrubutes} from '../../utils';
 import {isCompressible} from '../../utils/imageCompress';
-import ImageBase from '../ImageBase/ImageBase';
+import ImageBase, {ImageBaseProps} from '../ImageBase/ImageBase';
 
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
     style?: CSSProperties;
@@ -20,6 +21,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     onClick?: MouseEventHandler;
     onLoad?: ReactEventHandler<HTMLDivElement>;
     containerClassName?: string;
+    extraProps?: Omit<HTMLProps<HTMLImageElement>, keyof ImageBaseProps>;
 }
 
 export interface DeviceSpecificFragmentProps extends QAProps {
@@ -66,6 +68,7 @@ const Image = (props: ImageProps) => {
         onLoad,
         containerClassName,
         qa,
+        extraProps,
     } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
 
@@ -123,6 +126,7 @@ const Image = (props: ImageProps) => {
                 onClick={onClick}
                 onError={() => setImgLoadingError(true)}
                 onLoad={onLoad}
+                {...extraProps}
             />
         </picture>
     );
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
index d702499bf..47bf39855 100644
--- a/src/models/constructor-items/common.ts
+++ b/src/models/constructor-items/common.ts
@@ -124,7 +124,7 @@ interface LoopProps {
 
 // images
 
-export interface ImageInfoProps extends Pick<HTMLProps<HTMLImageElement>, 'aria-describedby'> {
+export interface ImageInfoProps {
     alt?: string;
     disableCompress?: boolean;
 }

From ca3bec14834efb3398973bff5243efd1efb977a5 Mon Sep 17 00:00:00 2001
From: kkmch <kkmch@yandex-team.ru>
Date: Wed, 8 Nov 2023 11:08:32 +0100
Subject: [PATCH 2/2] fix: imageProps in FullscreenImage

---
 src/components/FullscreenImage/FullscreenImage.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/FullscreenImage/FullscreenImage.tsx b/src/components/FullscreenImage/FullscreenImage.tsx
index 33e73023c..a17680895 100644
--- a/src/components/FullscreenImage/FullscreenImage.tsx
+++ b/src/components/FullscreenImage/FullscreenImage.tsx
@@ -10,7 +10,7 @@ import i18n from './i18n';
 
 import './FullscreenImage.scss';
 
-export interface FullscreenImageProps extends ImageProps {
+export interface FullscreenImageProps extends Omit<ImageProps, 'extraProps'> {
     imageClassName?: string;
     modalImageClass?: string;
     imageStyle?: CSSProperties;
@@ -22,7 +22,8 @@ const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 
 const FullscreenImage = (props: FullscreenImageProps) => {
-    const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps} = props;
+    const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt')} = props;
+    const {extraProps, ...imageProps} = props;
     const [isOpened, setIsOpened] = useState(false);
 
     const openModal = () => setIsOpened(true);
@@ -32,7 +33,7 @@ const FullscreenImage = (props: FullscreenImageProps) => {
         <div className={b()} {...extraProps}>
             <div className={b('image-wrapper')}>
                 <Image
-                    {...props}
+                    {...imageProps}
                     alt={alt}
                     className={b('image', imageClassName)}
                     onClick={openModal}
@@ -62,7 +63,7 @@ const FullscreenImage = (props: FullscreenImageProps) => {
                                 className={b('icon', {hover: true})}
                             />
                         </button>
-                        <Image {...props} className={b('modal-image', modalImageClass)} />
+                        <Image {...imageProps} className={b('modal-image', modalImageClass)} />
                     </div>
                 </Modal>
             )}