npm - @gravity-ui/blog-constructor - Versions diffs - 5.8.0-alpha.0 → 5.8.0 - Mend

@gravity-ui/blog-constructor 5.8.0-alpha.0 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/build/cjs/blocks/Author/schema.d.ts CHANGED Viewed

@@ -37,6 +37,9 @@ export declare const Author: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/Banner/schema.d.ts CHANGED Viewed

@@ -36,6 +36,9 @@ export declare const Banner: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -123,6 +126,9 @@ export declare const Banner: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/CTA/schema.d.ts CHANGED Viewed

@@ -33,6 +33,9 @@ export declare const CTA: {
                                     url: {
                                         type: string;
                                     };
+                                    urlTitle: {
+                                        type: string;
+                                    };
                                     resetMargin: {
                                         type: string;
                                     };
@@ -123,6 +126,9 @@ export declare const CTA: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/ColoredText/schema.d.ts CHANGED Viewed

@@ -53,6 +53,9 @@ export declare const ColoredText: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -140,6 +143,9 @@ export declare const ColoredText: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/Feed/schema.d.ts CHANGED Viewed

@@ -19,6 +19,9 @@ export declare const Feed: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     resetMargin: {
                         type: string;
                     };
@@ -47,6 +50,9 @@ export declare const Feed: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/Header/schema.d.ts CHANGED Viewed

@@ -511,6 +511,9 @@ export declare const Header: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/Layout/schema.d.ts CHANGED Viewed

@@ -44,6 +44,9 @@ export declare const Layout: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/Media/schema.d.ts CHANGED Viewed

@@ -279,6 +279,9 @@ export declare const Media: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/Meta/schema.d.ts CHANGED Viewed

@@ -33,6 +33,9 @@ export declare const Meta: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/Suggest/schema.d.ts CHANGED Viewed

@@ -33,6 +33,9 @@ export declare const Suggest: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/blocks/YFM/schema.d.ts CHANGED Viewed

@@ -38,6 +38,9 @@ export declare const YFM: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/cjs/components/PostCard/PostCard.js CHANGED Viewed

@@ -4,10 +4,12 @@ exports.PostCard = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
+const uikit_1 = require("@gravity-ui/uikit");
 const LikesContext_1 = require("../../contexts/LikesContext");
 const common_1 = require("../../models/common");
 const cn_1 = require("../../utils/cn");
 const SuggestPostInfo_1 = require("../PostInfo/SuggestPostInfo");
+const useAriaAttributes_1 = require("../../hooks/useAriaAttributes");
 const b = (0, cn_1.block)('post-card');
 const PostCard = ({ post, metrikaGoals, fullWidth = false, size = common_1.PostCardSize.SMALL, showTag = false, titleHeadingLevel = common_1.PostCardTitleHeadingLevel.H3, }) => {
     var _a;
@@ -21,19 +23,33 @@ const PostCard = ({ post, metrikaGoals, fullWidth = false, size = common_1.PostC
             toggleLike,
         }
         : undefined, [hasUserLike, likes, toggleLike, hasLikes]);
-    return (react_1.default.createElement(page_constructor_1.CardBase, { url: url, metrikaGoals: metrikaGoals, className: b('card', { fullWidth }) },
+    const titleId = (0, uikit_1.useUniqId)();
+    const descriptionId = (0, uikit_1.useUniqId)();
+    const dateId = (0, uikit_1.useUniqId)();
+    const tagId = (0, uikit_1.useUniqId)();
+    const readingTimeId = (0, uikit_1.useUniqId)();
+    const isTagVisible = showTag && ((_a = tags === null || tags === void 0 ? void 0 : tags[0]) === null || _a === void 0 ? void 0 : _a.name);
+    const ariaAttributes = (0, useAriaAttributes_1.useAriaAttributes)({
+        labelIds: [isTagVisible && tagId, title && titleId],
+        descriptionIds: [
+            description && descriptionId,
+            date && dateId,
+            readingTime && readingTimeId,
+        ],
+    });
+    return (react_1.default.createElement(page_constructor_1.CardBase, { url: url, metrikaGoals: metrikaGoals, className: b('card', { fullWidth }), extraProps: ariaAttributes },
         react_1.default.createElement(page_constructor_1.CardBase.Header, { image: image, className: b('header', { fullWidth }) },
             react_1.default.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
         react_1.default.createElement(page_constructor_1.CardBase.Content, null,
-            showTag && ((_a = tags === null || tags === void 0 ? void 0 : tags[0]) === null || _a === void 0 ? void 0 : _a.name) && (react_1.default.createElement("div", { className: b('tag', { size }) }, tags[0].name)),
+            isTagVisible && (react_1.default.createElement("div", { id: tagId, className: b('tag', { size }) }, tags[0].name)),
             title &&
                 react_1.default.createElement(titleHeadingLevel, { className: b('title', { size }) }, react_1.default.createElement("span", null,
-                    react_1.default.createElement(page_constructor_1.HTML, null, title))),
+                    react_1.default.createElement(page_constructor_1.HTML, { id: titleId }, title))),
             description && (react_1.default.createElement(page_constructor_1.YFMWrapper, { className: b('description'), content: description, modifiers: {
                     blog: size === 'm',
                     blogCard: true,
-                } }))),
+                }, id: descriptionId }))),
         react_1.default.createElement(page_constructor_1.CardBase.Footer, null,
-            react_1.default.createElement(SuggestPostInfo_1.SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, qa: "blog-suggest-block" }))));
+            react_1.default.createElement(SuggestPostInfo_1.SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, qa: "blog-suggest-block", dateId: dateId, readingTimeId: readingTimeId }))));
 };
 exports.PostCard = PostCard;

package/build/cjs/components/PostInfo/SuggestPostInfo.d.ts CHANGED Viewed

@@ -8,6 +8,8 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
         hasUserLike?: boolean;
         toggleLike?: ToggleLikeCallbackType;
     };
+    dateId?: string;
+    readingTimeId?: string;
 }
 /**
  * Suggest blog card info component
@@ -20,7 +22,9 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
  * @param qa - test-attr
  * @param size - text size
  * @param isModernIcon - flag what we need render 'bookmark' icon
+ * @param dateId - id value for element with post date. Useful when providing accessible description
+ * @param readingTimeId - id value for element with reading time. Useful when providing accessible description
  *
  * @returns jsx
  */
-export declare const SuggestPostInfo: ({ postId, date, readingTime, likes, size, qa, }: SuggestPostInfoProps) => React.JSX.Element;
+export declare const SuggestPostInfo: ({ postId, date, readingTime, likes, size, qa, dateId, readingTimeId, }: SuggestPostInfoProps) => React.JSX.Element;

package/build/cjs/components/PostInfo/SuggestPostInfo.js CHANGED Viewed

@@ -21,10 +21,12 @@ const b = (0, cn_1.block)('post-info');
  * @param qa - test-attr
  * @param size - text size
  * @param isModernIcon - flag what we need render 'bookmark' icon
+ * @param dateId - id value for element with post date. Useful when providing accessible description
+ * @param readingTimeId - id value for element with reading time. Useful when providing accessible description
  *
  * @returns jsx
  */
-const SuggestPostInfo = ({ postId, date, readingTime, likes, size = common_1.PostCardSize.SMALL, qa, }) => {
+const SuggestPostInfo = ({ postId, date, readingTime, likes, size = common_1.PostCardSize.SMALL, qa, dateId, readingTimeId, }) => {
     const { hasUserLike, likesCount, handleLike } = (0, useLikes_1.useLikes)({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
@@ -33,8 +35,8 @@ const SuggestPostInfo = ({ postId, date, readingTime, likes, size = common_1.Pos
     });
     return (react_1.default.createElement("div", { className: b('container') },
         react_1.default.createElement("div", { className: b('suggest-container') },
-            date && react_1.default.createElement(Date_1.Date, { date: date, size: size }),
-            readingTime && react_1.default.createElement(ReadingTime_1.ReadingTime, { readingTime: readingTime, size: size })),
+            date && react_1.default.createElement(Date_1.Date, { date: date, size: size, id: dateId }),
+            readingTime && (react_1.default.createElement(ReadingTime_1.ReadingTime, { readingTime: readingTime, size: size, id: readingTimeId }))),
         likes && postId && (react_1.default.createElement(Save_1.Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, qa: qa }))));
 };
 exports.SuggestPostInfo = SuggestPostInfo;

package/build/cjs/components/PostInfo/components/Date.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { PostCardSize } from '../../../models/common';
 type DateProps = {
     date: string | number;
     size?: PostCardSize;
+    id?: string;
 };
-export declare const Date: ({ date, size }: DateProps) => React.JSX.Element;
+export declare const Date: ({ date, size, id }: DateProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostInfo/components/Date.js CHANGED Viewed

@@ -8,8 +8,8 @@ const common_1 = require("../../../models/common");
 const cn_1 = require("../../../utils/cn");
 const date_1 = require("../../../utils/date");
 const b = (0, cn_1.block)('post-info');
-const Date = ({ date, size = common_1.PostCardSize.SMALL }) => {
+const Date = ({ date, size = common_1.PostCardSize.SMALL, id }) => {
     const { locale } = (0, react_1.useContext)(LocaleContext_1.LocaleContext);
-    return react_1.default.createElement("div", { className: b('item', { size }) }, (0, date_1.format)(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code));
+    return (react_1.default.createElement("div", { className: b('item', { size }), id: id }, (0, date_1.format)(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code)));
 };
 exports.Date = Date;

package/build/cjs/components/PostInfo/components/ReadingTime.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 type ReadingTimeProps = {
     readingTime: number;
     size?: 's' | 'm';
+    id?: string;
 };
-export declare const ReadingTime: ({ readingTime, size }: ReadingTimeProps) => React.JSX.Element;
+export declare const ReadingTime: ({ readingTime, size, id }: ReadingTimeProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostInfo/components/ReadingTime.js CHANGED Viewed

@@ -9,7 +9,7 @@ const Time_1 = require("../../../icons/Time");
 const cn_1 = require("../../../utils/cn");
 const b = (0, cn_1.block)('post-info');
 const ICON_SIZE = 16;
-const ReadingTime = ({ readingTime, size = 's' }) => (react_1.default.createElement("div", { className: b('item', { size }) },
+const ReadingTime = ({ readingTime, size = 's', id }) => (react_1.default.createElement("div", { className: b('item', { size }), id: id },
     react_1.default.createElement("span", { className: b('icon') },
         react_1.default.createElement(uikit_1.Icon, { data: Time_1.Time, size: ICON_SIZE, className: b('icon-color') })),
     (0, i18n_1.i18)(i18n_1.Keyset.ContextReadingTime, { count: readingTime })));

package/build/cjs/hooks/useAriaAttributes.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+type Labels = string | number | boolean | undefined;
+type Description = string | number | boolean | undefined;
+interface UseAriaAttributesProps {
+    labelIds?: Labels[];
+    descriptionIds: Description[];
+}
+/**
+ * Returns aria-attributes
+ * @param labelIds - labels ids. Falsy values will be ignored
+ * @param descriptionIds - descriptions ids. Falsy values will be ignored
+ * @returns aria attributes for the element to be labelled
+ */
+export declare const useAriaAttributes: ({ labelIds, descriptionIds }: UseAriaAttributesProps) => {
+    'aria-labelledby': string;
+    'aria-describedby': string;
+};
+export {};

package/build/cjs/hooks/useAriaAttributes.js ADDED Viewed

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAriaAttributes = void 0;
+const react_1 = require("react");
+/**
+ * Returns aria-attributes
+ * @param labelIds - labels ids. Falsy values will be ignored
+ * @param descriptionIds - descriptions ids. Falsy values will be ignored
+ * @returns aria attributes for the element to be labelled
+ */
+const useAriaAttributes = ({ labelIds = [], descriptionIds = [] }) => {
+    const labelledBy = (0, react_1.useMemo)(() => labelIds.filter(Boolean).join(' '), [labelIds]);
+    const describedBy = (0, react_1.useMemo)(() => descriptionIds.filter(Boolean).join(' '), [descriptionIds]);
+    return {
+        'aria-labelledby': labelledBy,
+        'aria-describedby': describedBy,
+    };
+};
+exports.useAriaAttributes = useAriaAttributes;

package/build/cjs/schema/index.d.ts CHANGED Viewed

@@ -519,6 +519,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -579,6 +582,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -636,6 +642,9 @@ export declare const schemasForCustom: {
                                 url: {
                                     type: string;
                                 };
+                                urlTitle: {
+                                    type: string;
+                                };
                                 resetMargin: {
                                     type: string;
                                 };
@@ -723,6 +732,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -797,6 +809,9 @@ export declare const schemasForCustom: {
                                 url: {
                                     type: string;
                                 };
+                                urlTitle: {
+                                    type: string;
+                                };
                                 resetMargin: {
                                     type: string;
                                 };
@@ -884,6 +899,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -938,6 +956,9 @@ export declare const schemasForCustom: {
                                             url: {
                                                 type: string;
                                             };
+                                            urlTitle: {
+                                                type: string;
+                                            };
                                             resetMargin: {
                                                 type: string;
                                             };
@@ -1028,6 +1049,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1068,6 +1092,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                             resetMargin: {
                                 type: string;
                             };
@@ -1096,6 +1123,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1161,6 +1191,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1461,6 +1494,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1515,6 +1551,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1569,6 +1608,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1628,6 +1670,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {

package/build/esm/blocks/Author/schema.d.ts CHANGED Viewed

@@ -37,6 +37,9 @@ export declare const Author: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Banner/schema.d.ts CHANGED Viewed

@@ -36,6 +36,9 @@ export declare const Banner: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -123,6 +126,9 @@ export declare const Banner: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/CTA/schema.d.ts CHANGED Viewed

@@ -33,6 +33,9 @@ export declare const CTA: {
                                     url: {
                                         type: string;
                                     };
+                                    urlTitle: {
+                                        type: string;
+                                    };
                                     resetMargin: {
                                         type: string;
                                     };
@@ -123,6 +126,9 @@ export declare const CTA: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/ColoredText/schema.d.ts CHANGED Viewed

@@ -53,6 +53,9 @@ export declare const ColoredText: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -140,6 +143,9 @@ export declare const ColoredText: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Feed/schema.d.ts CHANGED Viewed

@@ -19,6 +19,9 @@ export declare const Feed: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     resetMargin: {
                         type: string;
                     };
@@ -47,6 +50,9 @@ export declare const Feed: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Header/schema.d.ts CHANGED Viewed

@@ -511,6 +511,9 @@ export declare const Header: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Layout/schema.d.ts CHANGED Viewed

@@ -44,6 +44,9 @@ export declare const Layout: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Media/schema.d.ts CHANGED Viewed

@@ -279,6 +279,9 @@ export declare const Media: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Meta/schema.d.ts CHANGED Viewed

@@ -33,6 +33,9 @@ export declare const Meta: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Suggest/schema.d.ts CHANGED Viewed

@@ -33,6 +33,9 @@ export declare const Suggest: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/YFM/schema.d.ts CHANGED Viewed

@@ -38,6 +38,9 @@ export declare const YFM: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/components/PostCard/PostCard.js CHANGED Viewed

@@ -1,9 +1,11 @@
 import React, { useContext, useMemo } from 'react';
 import { CardBase, HTML, YFMWrapper } from '@gravity-ui/page-constructor';
+import { useUniqId } from '@gravity-ui/uikit';
 import { LikesContext } from '../../contexts/LikesContext';
 import { PostCardSize, PostCardTitleHeadingLevel } from '../../models/common';
 import { block } from '../../utils/cn';
 import { SuggestPostInfo } from '../PostInfo/SuggestPostInfo';
+import { useAriaAttributes } from '../../hooks/useAriaAttributes';
 import './PostCard.css';
 const b = block('post-card');
 export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = PostCardSize.SMALL, showTag = false, titleHeadingLevel = PostCardTitleHeadingLevel.H3, }) => {
@@ -18,18 +20,32 @@ export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = PostCar
             toggleLike,
         }
         : undefined, [hasUserLike, likes, toggleLike, hasLikes]);
-    return (React.createElement(CardBase, { url: url, metrikaGoals: metrikaGoals, className: b('card', { fullWidth }) },
+    const titleId = useUniqId();
+    const descriptionId = useUniqId();
+    const dateId = useUniqId();
+    const tagId = useUniqId();
+    const readingTimeId = useUniqId();
+    const isTagVisible = showTag && ((_a = tags === null || tags === void 0 ? void 0 : tags[0]) === null || _a === void 0 ? void 0 : _a.name);
+    const ariaAttributes = useAriaAttributes({
+        labelIds: [isTagVisible && tagId, title && titleId],
+        descriptionIds: [
+            description && descriptionId,
+            date && dateId,
+            readingTime && readingTimeId,
+        ],
+    });
+    return (React.createElement(CardBase, { url: url, metrikaGoals: metrikaGoals, className: b('card', { fullWidth }), extraProps: ariaAttributes },
         React.createElement(CardBase.Header, { image: image, className: b('header', { fullWidth }) },
             React.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
         React.createElement(CardBase.Content, null,
-            showTag && ((_a = tags === null || tags === void 0 ? void 0 : tags[0]) === null || _a === void 0 ? void 0 : _a.name) && (React.createElement("div", { className: b('tag', { size }) }, tags[0].name)),
+            isTagVisible && (React.createElement("div", { id: tagId, className: b('tag', { size }) }, tags[0].name)),
             title &&
                 React.createElement(titleHeadingLevel, { className: b('title', { size }) }, React.createElement("span", null,
-                    React.createElement(HTML, null, title))),
+                    React.createElement(HTML, { id: titleId }, title))),
             description && (React.createElement(YFMWrapper, { className: b('description'), content: description, modifiers: {
                     blog: size === 'm',
                     blogCard: true,
-                } }))),
+                }, id: descriptionId }))),
         React.createElement(CardBase.Footer, null,
-            React.createElement(SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, qa: "blog-suggest-block" }))));
+            React.createElement(SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, qa: "blog-suggest-block", dateId: dateId, readingTimeId: readingTimeId }))));
 };

package/build/esm/components/PostInfo/SuggestPostInfo.d.ts CHANGED Viewed

@@ -9,6 +9,8 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
         hasUserLike?: boolean;
         toggleLike?: ToggleLikeCallbackType;
     };
+    dateId?: string;
+    readingTimeId?: string;
 }
 /**
  * Suggest blog card info component
@@ -21,7 +23,9 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
  * @param qa - test-attr
  * @param size - text size
  * @param isModernIcon - flag what we need render 'bookmark' icon
+ * @param dateId - id value for element with post date. Useful when providing accessible description
+ * @param readingTimeId - id value for element with reading time. Useful when providing accessible description
  *
  * @returns jsx
  */
-export declare const SuggestPostInfo: ({ postId, date, readingTime, likes, size, qa, }: SuggestPostInfoProps) => React.JSX.Element;
+export declare const SuggestPostInfo: ({ postId, date, readingTime, likes, size, qa, dateId, readingTimeId, }: SuggestPostInfoProps) => React.JSX.Element;

package/build/esm/components/PostInfo/SuggestPostInfo.js CHANGED Viewed

@@ -18,10 +18,12 @@ const b = block('post-info');
  * @param qa - test-attr
  * @param size - text size
  * @param isModernIcon - flag what we need render 'bookmark' icon
+ * @param dateId - id value for element with post date. Useful when providing accessible description
+ * @param readingTimeId - id value for element with reading time. Useful when providing accessible description
  *
  * @returns jsx
  */
-export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = PostCardSize.SMALL, qa, }) => {
+export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = PostCardSize.SMALL, qa, dateId, readingTimeId, }) => {
     const { hasUserLike, likesCount, handleLike } = useLikes({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
@@ -30,7 +32,7 @@ export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = PostC
     });
     return (React.createElement("div", { className: b('container') },
         React.createElement("div", { className: b('suggest-container') },
-            date && React.createElement(Date, { date: date, size: size }),
-            readingTime && React.createElement(ReadingTime, { readingTime: readingTime, size: size })),
+            date && React.createElement(Date, { date: date, size: size, id: dateId }),
+            readingTime && (React.createElement(ReadingTime, { readingTime: readingTime, size: size, id: readingTimeId }))),
         likes && postId && (React.createElement(Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, qa: qa }))));
 };

package/build/esm/components/PostInfo/components/Date.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import '../PostInfo.css';
 type DateProps = {
     date: string | number;
     size?: PostCardSize;
+    id?: string;
 };
-export declare const Date: ({ date, size }: DateProps) => React.JSX.Element;
+export declare const Date: ({ date, size, id }: DateProps) => React.JSX.Element;
 export {};

package/build/esm/components/PostInfo/components/Date.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { block } from '../../../utils/cn';
 import { format } from '../../../utils/date';
 import '../PostInfo.css';
 const b = block('post-info');
-export const Date = ({ date, size = PostCardSize.SMALL }) => {
+export const Date = ({ date, size = PostCardSize.SMALL, id }) => {
     const { locale } = useContext(LocaleContext);
-    return React.createElement("div", { className: b('item', { size }) }, format(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code));
+    return (React.createElement("div", { className: b('item', { size }), id: id }, format(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code)));
 };

package/build/esm/components/PostInfo/components/ReadingTime.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import '../PostInfo.css';
 type ReadingTimeProps = {
     readingTime: number;
     size?: 's' | 'm';
+    id?: string;
 };
-export declare const ReadingTime: ({ readingTime, size }: ReadingTimeProps) => React.JSX.Element;
+export declare const ReadingTime: ({ readingTime, size, id }: ReadingTimeProps) => React.JSX.Element;
 export {};

package/build/esm/components/PostInfo/components/ReadingTime.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { block } from '../../../utils/cn';
 import '../PostInfo.css';
 const b = block('post-info');
 const ICON_SIZE = 16;
-export const ReadingTime = ({ readingTime, size = 's' }) => (React.createElement("div", { className: b('item', { size }) },
+export const ReadingTime = ({ readingTime, size = 's', id }) => (React.createElement("div", { className: b('item', { size }), id: id },
     React.createElement("span", { className: b('icon') },
         React.createElement(Icon, { data: Time, size: ICON_SIZE, className: b('icon-color') })),
     i18(Keyset.ContextReadingTime, { count: readingTime })));

package/build/esm/hooks/useAriaAttributes.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+type Labels = string | number | boolean | undefined;
+type Description = string | number | boolean | undefined;
+interface UseAriaAttributesProps {
+    labelIds?: Labels[];
+    descriptionIds: Description[];
+}
+/**
+ * Returns aria-attributes
+ * @param labelIds - labels ids. Falsy values will be ignored
+ * @param descriptionIds - descriptions ids. Falsy values will be ignored
+ * @returns aria attributes for the element to be labelled
+ */
+export declare const useAriaAttributes: ({ labelIds, descriptionIds }: UseAriaAttributesProps) => {
+    'aria-labelledby': string;
+    'aria-describedby': string;
+};
+export {};

package/build/esm/hooks/useAriaAttributes.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+/**
+ * Returns aria-attributes
+ * @param labelIds - labels ids. Falsy values will be ignored
+ * @param descriptionIds - descriptions ids. Falsy values will be ignored
+ * @returns aria attributes for the element to be labelled
+ */
+export const useAriaAttributes = ({ labelIds = [], descriptionIds = [] }) => {
+    const labelledBy = useMemo(() => labelIds.filter(Boolean).join(' '), [labelIds]);
+    const describedBy = useMemo(() => descriptionIds.filter(Boolean).join(' '), [descriptionIds]);
+    return {
+        'aria-labelledby': labelledBy,
+        'aria-describedby': describedBy,
+    };
+};

package/build/esm/schema/index.d.ts CHANGED Viewed

@@ -519,6 +519,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -579,6 +582,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -636,6 +642,9 @@ export declare const schemasForCustom: {
                                 url: {
                                     type: string;
                                 };
+                                urlTitle: {
+                                    type: string;
+                                };
                                 resetMargin: {
                                     type: string;
                                 };
@@ -723,6 +732,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -797,6 +809,9 @@ export declare const schemasForCustom: {
                                 url: {
                                     type: string;
                                 };
+                                urlTitle: {
+                                    type: string;
+                                };
                                 resetMargin: {
                                     type: string;
                                 };
@@ -884,6 +899,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -938,6 +956,9 @@ export declare const schemasForCustom: {
                                             url: {
                                                 type: string;
                                             };
+                                            urlTitle: {
+                                                type: string;
+                                            };
                                             resetMargin: {
                                                 type: string;
                                             };
@@ -1028,6 +1049,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1068,6 +1092,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                             resetMargin: {
                                 type: string;
                             };
@@ -1096,6 +1123,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1161,6 +1191,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1461,6 +1494,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1515,6 +1551,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1569,6 +1608,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {
@@ -1628,6 +1670,9 @@ export declare const schemasForCustom: {
                             url: {
                                 type: string;
                             };
+                            urlTitle: {
+                                type: string;
+                            };
                         };
                     };
                     visible: {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "5.8.0-alpha.0",
+  "version": "5.8.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -66,7 +66,6 @@
     "react-helmet": "^6.1.0",
     "react-player": "^2.9.0",
     "react-slick": "^0.29.0",
-    "react-spring": "^9.7.2",
     "react-transition-group": "^4.4.2",
     "react-waypoint": "^10.1.0",
     "sanitize-html": "^2.6.1",
@@ -79,7 +78,7 @@
   },
   "peerDependencies": {
     "@doc-tools/transform": "^3.3.2",
-    "@gravity-ui/page-constructor": "^4.26.0",
+    "@gravity-ui/page-constructor": "^4.31.0",
     "@gravity-ui/uikit": "^5.12.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
@@ -90,7 +89,7 @@
     "@commitlint/config-conventional": "^17.4.3",
     "@doc-tools/transform": "^3.11.0",
     "@gravity-ui/eslint-config": "^3.1.1",
-    "@gravity-ui/page-constructor": "^4.28.0",
+    "@gravity-ui/page-constructor": "^4.31.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",