feat: add passive flag and alt to img (#309)

VitaliiDC8 · web-flow · commit a1e5587ada92 · 2023-04-25T16:46:26.000+02:00
* feat: add passive flag and alt to img

* fix: change defer to loading attribute for iframe

* feat: add i18n for alt and title

* feat: remove passive flag from EventListener

* feat: add passive flag and alt to img

* fix: change defer to loading attribute for iframe

* feat: add i18n for alt and title

* feat: remove passive flag from EventListener

* feat: add passive flag and alt to img

* fix: change defer to loading attribute for iframe

* feat: add i18n for alt and title

* feat: remove passive flag from EventListener

* feat: add passive flag and alt to img

* feat: add i18n for alt and title

* feat: remove passive flag from EventListener
diff --git a/src/blocks/Security/Security.tsx b/src/blocks/Security/Security.tsx
@@ -4,6 +4,7 @@ import {AnimateBlock, FullWidthBackground, HTML, ImageBase, Link, Media} from '.
 import {Col, Grid, Row} from '../../grid';
 import {SecurityBlockProps} from '../../models';
 import {block} from '../../utils';
+import i18n from './i18n';
 
 import './Security.scss';
 
@@ -26,7 +27,11 @@ export const SecurityBlock = (props: SecurityBlockProps) => {
                         <Row className={b('points')}>
                             {points.map(({text, link, img}, index) => (
                                 <Col key={index} className={b('point')} sizes={{sm: 4, all: 12}}>
-                                    <ImageBase className={b('point-icon')} src={img} />
+                                    <ImageBase
+                                        className={b('point-icon')}
+                                        src={img}
+                                        alt={text || i18n('image-alt')}
+                                    />
                                     <HTML className={b('point-text')} block={true}>
                                         {text}
                                     </HTML>
diff --git a/src/blocks/Security/i18n/en.json b/src/blocks/Security/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "image-alt": "Point icon"
+}
diff --git a/src/blocks/Security/i18n/index.ts b/src/blocks/Security/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'SecurityBlock';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/blocks/Security/i18n/ru.json b/src/blocks/Security/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "image-alt": "Иконка"
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -8,7 +8,7 @@ import {useMetrika} from '../../hooks/useMetrika';
 import {Github} from '../../icons';
 import {ButtonProps as ButtonParams, DefaultEventNames} from '../../models';
 import {block, setUrlTld} from '../../utils';
-import ImageBase from '../ImageBase/ImageBase';
+import i18n from './i18n';
 import {ICON_QA, OldButtonSize, OldButtonTheme, toCommonSize, toCommonView} from './utils';
 
 import './Button.scss';
@@ -73,7 +73,9 @@ const Button = (props: ButtonProps) => {
     }
 
     let icon;
-    let image = img && <ImageBase className={b('image')} src={buttonImg.url} alt={buttonImg.alt} />;
+    let image = img && (
+        <img className={b('image')} src={buttonImg.url} alt={buttonImg.alt || i18n('image-alt')} />
+    );
 
     if (theme === 'github') {
         icon = <Icon className={b('icon')} data={Github} size={24} qa={ICON_QA} />;
diff --git a/src/components/Button/i18n/en.json b/src/components/Button/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "image-alt": "Button image"
+}
diff --git a/src/components/Button/i18n/index.ts b/src/components/Button/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'Button';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/Button/i18n/ru.json b/src/components/Button/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "image-alt": "Иконка кнопки"
+}
diff --git a/src/components/Control/Control.tsx b/src/components/Control/Control.tsx
@@ -4,6 +4,7 @@ import {Icon} from '@gravity-ui/uikit';
 import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
 
 import {block} from '../../utils';
+import i18n from './i18n';
 
 import './Control.scss';
 
@@ -33,6 +34,7 @@ const Control = (props: ControlProps) => {
     return (
         <button
             type="button"
+            aria-label={i18n('aria-label')}
             className={b({size, theme, disabled}, className)}
             onClick={disabled ? undefined : onClick}
             disabled={disabled}
diff --git a/src/components/Control/i18n/en.json b/src/components/Control/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "aria-label": "Button label"
+}
diff --git a/src/components/Control/i18n/index.ts b/src/components/Control/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'Control';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/Control/i18n/ru.json b/src/components/Control/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "aria-label": "Лейбл кнопки"
+}
diff --git a/src/components/FullscreenImage/FullscreenImage.tsx b/src/components/FullscreenImage/FullscreenImage.tsx
@@ -5,6 +5,7 @@ import {Icon, Modal} from '@gravity-ui/uikit';
 import {FullScreen, PreviewClose} from '../../icons';
 import {block} from '../../utils';
 import Image, {ImageProps} from '../Image/Image';
+import i18n from './i18n';
 
 import './FullScreenImage.scss';
 
@@ -19,7 +20,7 @@ const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 
 const FullScreenImage = (props: FullScreenImageProps) => {
-    const {imageClassName, modalImageClass, imageStyle} = props;
+    const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt')} = props;
     const [isOpened, setIsOpened] = useState(false);
     const [isMouseEnter, setIsMouseEnter] = useState(false);
 
@@ -37,6 +38,7 @@ const FullScreenImage = (props: FullScreenImageProps) => {
             >
                 <Image
                     {...props}
+                    alt={alt}
                     className={b('image', imageClassName)}
                     onClick={openModal}
                     style={imageStyle}
diff --git a/src/components/FullscreenImage/i18n/en.json b/src/components/FullscreenImage/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "img-alt": "Full screen image"
+}
diff --git a/src/components/FullscreenImage/i18n/index.ts b/src/components/FullscreenImage/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'FullScreenImage';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/FullscreenImage/i18n/ru.json b/src/components/FullscreenImage/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "img-alt": "Полноэкранное изображение"
+}
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -5,6 +5,7 @@ import {ProjectSettingsContext} from '../../context/projectSettingsContext';
 import {ImageDeviceProps, ImageObjectProps} from '../../models';
 import {isCompressible} from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
+import i18n from './i18n';
 
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
     style?: CSSProperties;
@@ -21,7 +22,7 @@ const Image = (props: ImageProps) => {
     const projectSettings = useContext(ProjectSettingsContext);
     const {
         src: imageSrc,
-        alt,
+        alt = i18n('img-alt'),
         disableCompress,
         tablet,
         desktop,
diff --git a/src/components/Image/i18n/en.json b/src/components/Image/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "img-alt": "Image alt"
+}
diff --git a/src/components/Image/i18n/index.ts b/src/components/Image/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'Image';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/Image/i18n/ru.json b/src/components/Image/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "img-alt": "Альтернатива изображению"
+}
diff --git a/src/components/Map/GoogleMap.tsx b/src/components/Map/GoogleMap.tsx
@@ -67,6 +67,7 @@ const GoogleMap: React.FC<GMapProps> = (props) => {
             style={{
                 height,
             }}
+            title="Google Map"
             loading="lazy"
             allowFullScreen
             referrerPolicy="no-referrer-when-downgrade"
diff --git a/src/components/Media/DataLens/DataLens.tsx b/src/components/Media/DataLens/DataLens.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {MediaComponentDataLensProps} from '../../../models';
 import {block} from '../../../utils';
+import i18n from './i18n';
 import {unifyDataLensToObject} from './utils';
 
 import './DataLens.scss';
@@ -17,6 +18,8 @@ const DataLens = (props: MediaComponentDataLensProps) => {
             <iframe
                 src={`https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}`}
                 className={b('iframe')}
+                loading="lazy"
+                title={i18n('iframe-title')}
                 frameBorder={0}
             />
         </div>
diff --git a/src/components/Media/DataLens/i18n/en.json b/src/components/Media/DataLens/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Datalens frame"
+}
diff --git a/src/components/Media/DataLens/i18n/index.ts b/src/components/Media/DataLens/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'DataLens';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/Media/DataLens/i18n/ru.json b/src/components/Media/DataLens/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм данных"
+}
diff --git a/src/components/VideoBlock/VideoBlock.tsx b/src/components/VideoBlock/VideoBlock.tsx
@@ -8,6 +8,7 @@ import {Icon} from '@gravity-ui/uikit';
 import {PlayVideo} from '../../icons';
 import {block, getPageSearchParams} from '../../utils';
 import Image from '../Image/Image';
+import i18n from './i18n';
 
 import './VideoBlock.scss';
 
@@ -106,9 +107,11 @@ const VideoBlock = (props: VideoBlockProps) => {
             iframe.src = fullSrc;
             iframe.width = '100%';
             iframe.height = '100%';
+            iframe.title = i18n('iframe-title');
             iframe.frameBorder = '0';
             iframe.setAttribute('allowfullscreen', 'true');
             iframe.setAttribute('allow', 'autoplay');
+            iframe.setAttribute('loading', 'lazy');
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
diff --git a/src/components/VideoBlock/i18n/en.json b/src/components/VideoBlock/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Video frame"
+}
diff --git a/src/components/VideoBlock/i18n/index.ts b/src/components/VideoBlock/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'VideoBlock';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/VideoBlock/i18n/ru.json b/src/components/VideoBlock/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм видеоблока"
+}
diff --git a/src/components/YandexForm/YandexForm.tsx b/src/components/YandexForm/YandexForm.tsx
@@ -87,6 +87,7 @@ const YandexForm = (props: YandexFormProps) => {
                 iframeRef.current.src = src;
                 iframeRef.current.id = containerId;
                 iframeRef.current.name = `form${id}`;
+                iframeRef.current.setAttribute('loading', 'lazy');
                 iframeRef.current.frameBorder = '0';
                 iframeRef.current.scrolling = 'no';
                 iframeRef.current.width = '100%';

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "image-alt": "Point icon"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "image-alt": "Иконка"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "image-alt": "Button image"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "image-alt": "Иконка кнопки"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "aria-label": "Button label"`
	`3`	`+}`