feat: alt attributes and titles, fix yfm plugins bug (#655)

* feat: alt attributes for Quote block and Author avatar
* feat: share links with labels and titles
* feat: alt attributes are not present at all by default
* fix: yfm plugins paramter bug

Author: Kyzyl-ool

src/blocks/Share/Share.tsx

@@ -44,6 +44,8 @@ const Share = ({items, title}: ShareBlockProps) => {
                     const url = getAbsolutePath(hostname, pathname);
                     const socialUrl = getShareLink(url, type);
                     const icon = icons[type];
+                    const urlTitle = i18n(`${type}-title`);
+                    const buttonLabel = i18n(`${type}-label`);
 
                     return (
                         <Button
@@ -54,6 +56,10 @@ const Share = ({items, title}: ShareBlockProps) => {
                             href={socialUrl}
                             className={b('item', {type: type.toLowerCase()})}
                             onClick={handleButtonClick}
+                            title={urlTitle}
+                            extraProps={{
+                                'aria-label': buttonLabel,
+                            }}
                         >
                             {icon && <Icon data={icon} size={24} className={b('icon', {type})} />}
                         </Button>

src/blocks/Share/i18n/en.json

@@ -1,3 +1,13 @@
 {
-  "constructor-share": "Share"
+  "constructor-share": "Share",
+  "facebook-title": "Opens in a new tab",
+  "twitter-title": "Opens in a new tab",
+  "linkedin-title": "Opens in a new tab",
+  "vk-title": "Opens in a new tab",
+  "telegram-title": "Opens in a new tab",
+  "facebook-label": "Facebook logo",
+  "twitter-label": "Twitter logo",
+  "linkedin-label": "LinkedIn logo",
+  "vk-label": "VK logo",
+  "telegram-label": "Telegram logo"
 }

src/blocks/Share/i18n/ru.json

@@ -1,3 +1,13 @@
 {
-  "constructor-share": "Поделиться"
+  "constructor-share": "Поделиться",
+  "facebook-title": "Откроется в новой вкладке",
+  "twitter-title": "Откроется в новой вкладке",
+  "linkedin-title": "Откроется в новой вкладке",
+  "vk-title": "Откроется в новой вкладке",
+  "telegram-title": "Откроется в новой вкладке",
+  "facebook-label": "Facebook лого",
+  "twitter-label": "Twitter лого",
+  "linkedin-label": "LinkedIn лого",
+  "vk-label": "VK лого",
+  "telegram-label": "Telegram лого"
 }

src/components/Author/Author.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import {AuthorProps, AuthorType, WithChildren} from '../../models';
+import {AuthorProps, AuthorType, ImageProps, WithChildren} from '../../models';
 import {block} from '../../utils';
+import {getMediaImage} from '../Media/Image/utils';
 import {Image} from '../index';
 
 import './Author.scss';
@@ -13,12 +14,17 @@ const Author = (props: WithChildren<AuthorProps>) => {
     const {firstName, secondName, description, avatar} = author;
 
     const name = secondName ? `${firstName} ${secondName}` : firstName;
+    const isAvatarJSX = React.isValidElement(avatar);
+    let avatarProps = {};
+    if (!isAvatarJSX && avatar) {
+        avatarProps = getMediaImage(avatar as ImageProps);
+    }
 
     return (
         <div className={b({type}, className)} data-qa={qa}>
             {avatar && (
                 <div className={b('avatar', authorContainerClassName)}>
-                    {typeof avatar === 'string' ? <Image src={avatar} /> : avatar}
+                    {isAvatarJSX ? avatar : <Image {...avatarProps} />}
                 </div>
             )}
             <div className={b('label')}>

src/components/CardBase/CardBase.tsx

@@ -30,6 +30,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     qa?: string;
+    extraProps?: React.HTMLAttributes<HTMLElement>;
 }
 
 export interface CardHeaderBaseProps {
@@ -61,6 +62,7 @@ export const Layout = (props: CardBaseProps) => {
         border = 'shadow',
         urlTitle,
         qa,
+        extraProps = {},
     } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
@@ -133,14 +135,15 @@ export const Layout = (props: CardBaseProps) => {
                 extraProps={{
                     draggable: false,
                     onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),
+                    ...extraProps,
                 }}
                 qa={qa}
             >
                 {cardContent}
             </Link>
         </RouterLink>
     ) : (
-        <div className={fullClassName} data-qa={qa}>
+        <div className={fullClassName} data-qa={qa} {...extraProps}>
             {cardContent}
         </div>
     );

src/components/Image/Image.tsx

@@ -7,8 +7,6 @@ import {getQaAttrubutes} from '../../utils';
 import {isCompressible} from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
 
-import i18n from './i18n';
-
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
     style?: CSSProperties;
     className?: string;
@@ -49,7 +47,7 @@ const Image = (props: ImageProps) => {
     const projectSettings = useContext(ProjectSettingsContext);
     const {
         src: imageSrc,
-        alt = i18n('img-alt'),
+        alt,
         disableCompress,
         tablet,
         desktop,

src/components/Image/__tests__/Image.test.tsx

@@ -9,7 +9,6 @@ import {
 } from '../../../../test-utils/shared/common';
 import {testSourceProps} from '../../../../test-utils/shared/image';
 import Image, {ImageProps} from '../Image';
-import i18n from '../i18n';
 
 const qaId = 'image-component';
 
@@ -106,11 +105,11 @@ describe('Image', () => {
         });
     });
 
-    test('render default "alt"', () => {
+    test('render without attribute "alt" if not provided', () => {
         render(<Image src={imageSrc} qa={qaId} />);
 
         const component = screen.getByRole('img');
-        expect(component).toHaveAttribute('alt', i18n('img-alt'));
+        expect(component).not.toHaveAttribute('alt');
     });
 
     test('render custom "alt"', () => {