feat: using extraProps in Image

Author: kkmch

src/blocks/Tabs/Tabs.tsx

@@ -48,7 +48,9 @@ export const TabsBlock = ({
         imageProps = themedImage && getMediaImage(themedImage);
         if (activeTabData.caption && imageProps) {
             Object.assign(imageProps, {
-                'aria-describedby': captionId,
+                extraProps: {
+                    'aria-describedby': captionId,
+                },
             });
         }
     }

src/components/Image/Image.tsx

@@ -1,17 +1,25 @@
-import React, {CSSProperties, Fragment, MouseEventHandler, useContext, useState} from 'react';
+import React, {
+    CSSProperties,
+    Fragment,
+    HTMLProps,
+    MouseEventHandler,
+    useContext,
+    useState,
+} from 'react';
 
 import {BREAKPOINTS} from '../../constants';
 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;
     className?: string;
     onClick?: MouseEventHandler;
     containerClassName?: string;
+    extraProps?: Omit<HTMLProps<HTMLImageElement>, keyof ImageBaseProps>;
 }
 
 export interface DeviceSpecificFragmentProps extends QAProps {
@@ -57,6 +65,7 @@ const Image = (props: ImageProps) => {
         onClick,
         containerClassName,
         qa,
+        extraProps,
     } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
 
@@ -113,6 +122,7 @@ const Image = (props: ImageProps) => {
                 style={style}
                 onClick={onClick}
                 onError={() => setImgLoadingError(true)}
+                {...extraProps}
             />
         </picture>
     );

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;
 }