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

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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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",