@gravity-ui/page-constructor 4.3.0 → 4.4.1

package/build/cjs/components/HTML/HTML.d.ts

@@ -5,12 +5,14 @@ export interface HTMLProps {
     block?: boolean;
     className?: string;
     itemProp?: string;
+    id?: string;
 }
-declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp, id }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
         __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
     itemProp: string | undefined;
+    id: string | undefined;
 }, HTMLElement> | null;
 export default HTML;

package/build/cjs/components/HTML/HTML.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
-const HTML = ({ children, block = false, className, itemProp }) => {
+const HTML = ({ children, block = false, className, itemProp, id }) => {
     if (!children) {
         return null;
     }
@@ -11,6 +11,7 @@ const HTML = ({ children, block = false, className, itemProp }) => {
         dangerouslySetInnerHTML: { __html: children },
         className,
         itemProp,
+        id,
     });
 };
 exports.default = HTML;

package/build/cjs/components/Table/Table.js

@@ -4,28 +4,34 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const __1 = require("../");
 const utils_1 = require("../../utils");
+function getMarkerId(index) {
+    if (isNaN(index)) {
+        return undefined;
+    }
+    return `marker-${index}`;
+}
 const b = (0, utils_1.block)('table');
 class Table extends react_1.default.Component {
     render() {
-        const { content, legend, marker = 'disk', className } = this.props;
+        const { content, legend, marker = 'disk', className, caption } = this.props;
         if (!content || !content.length || !content[0].length) {
             return null;
         }
-        return (react_1.default.createElement("div", { className: b(null, className) },
+        return (react_1.default.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
             this.renderTable(content, marker, legend),
             legend && this.renderLegend(legend, marker)));
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
-        return (react_1.default.createElement("div", { className: b('table') }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
+        return (react_1.default.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return react_1.default.createElement("div", { className: b('marker', { type, index: String(cell) }) });
+        return (react_1.default.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
     }
     renderLegend(legend, marker) {
         return (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement("div", { key: item, className: b('legend-item') },
             this.renderMarker(marker, String(index)),
-            react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
+            react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');

package/build/cjs/components/YFMWrapper/YFMWrapper.d.ts

@@ -1,9 +1,9 @@
 import { ClassNameProps, Modifiers } from '../../models';
-export interface YFMWrapperProps {
-    className?: string;
+export interface YFMWrapperProps extends ClassNameProps {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
+    id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id }: YFMWrapperProps) => JSX.Element;
 export default YFMWrapper;

package/build/cjs/components/YFMWrapper/YFMWrapper.js

@@ -8,5 +8,5 @@ const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
 const components_1 = require("../../components");
 const yfm = (0, bem_cn_lite_1.default)('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, id }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, id: id }, content));
 exports.default = YFMWrapper;

package/build/cjs/grid/Col/Col.d.ts

@@ -1,10 +1,8 @@
 import React, { CSSProperties } from 'react';
-import { QAProps, Refable } from '../../models/common';
-import { WithChildren } from '../../models/react';
+import { QAProps, Refable, Roleable, WithChildren } from '../../models';
 import { GridColumnClassParams } from '../types';
-export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps {
+export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps, Roleable {
     style?: CSSProperties;
     children?: React.ReactNode;
-    role?: React.AriaRole;
 }
 export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -189,6 +189,10 @@ export interface TableProps {
     legend?: string[];
     justify?: Justify[];
     marker?: LegendTableMarkerType;
+    /**
+     * Only as accessible name, not displayed explicitly
+     */
+    caption?: string;
 }
 export interface TableBlockProps {
     title: string;

package/build/cjs/models/constructor-items/common.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
@@ -64,6 +64,9 @@ export interface Animatable {
 export interface Tabbable {
     tabIndex?: number;
 }
+export interface Roleable {
+    role?: React.AriaRole;
+}
 export interface Background {
     image?: string;
     color?: string;

package/build/esm/components/HTML/HTML.d.ts

@@ -5,12 +5,14 @@ export interface HTMLProps {
     block?: boolean;
     className?: string;
     itemProp?: string;
+    id?: string;
 }
-declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp, id }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
         __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
     itemProp: string | undefined;
+    id: string | undefined;
 }, HTMLElement> | null;
 export default HTML;

package/build/esm/components/HTML/HTML.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { hasBlockTag } from '../../utils';
-const HTML = ({ children, block = false, className, itemProp }) => {
+const HTML = ({ children, block = false, className, itemProp, id }) => {
     if (!children) {
         return null;
     }
@@ -8,6 +8,7 @@ const HTML = ({ children, block = false, className, itemProp }) => {
         dangerouslySetInnerHTML: { __html: children },
         className,
         itemProp,
+        id,
     });
 };
 export default HTML;

package/build/esm/components/Table/Table.js

@@ -2,28 +2,34 @@ import React from 'react';
 import { HTML, YFMWrapper } from '../';
 import { block } from '../../utils';
 import './Table.css';
+function getMarkerId(index) {
+    if (isNaN(index)) {
+        return undefined;
+    }
+    return `marker-${index}`;
+}
 const b = block('table');
 export default class Table extends React.Component {
     render() {
-        const { content, legend, marker = 'disk', className } = this.props;
+        const { content, legend, marker = 'disk', className, caption } = this.props;
         if (!content || !content.length || !content[0].length) {
             return null;
         }
-        return (React.createElement("div", { className: b(null, className) },
+        return (React.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
             this.renderTable(content, marker, legend),
             legend && this.renderLegend(legend, marker)));
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
-        return (React.createElement("div", { className: b('table') }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
+        return (React.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return React.createElement("div", { className: b('marker', { type, index: String(cell) }) });
+        return (React.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
     }
     renderLegend(legend, marker) {
         return (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement("div", { key: item, className: b('legend-item') },
             this.renderMarker(marker, String(index)),
-            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
+            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');

package/build/esm/components/YFMWrapper/YFMWrapper.d.ts

@@ -1,9 +1,9 @@
 import { ClassNameProps, Modifiers } from '../../models';
-export interface YFMWrapperProps {
-    className?: string;
+export interface YFMWrapperProps extends ClassNameProps {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
+    id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id }: YFMWrapperProps) => JSX.Element;
 export default YFMWrapper;

package/build/esm/components/YFMWrapper/YFMWrapper.js

@@ -5,5 +5,5 @@ import block from 'bem-cn-lite';
 import toSnakeCase from 'snakecase-keys';
 import { HTML } from '../../components';
 const yfm = block('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, id }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id }, content));
 export default YFMWrapper;

package/build/esm/grid/Col/Col.d.ts

@@ -1,10 +1,8 @@
 import React, { CSSProperties } from 'react';
-import { QAProps, Refable } from '../../models/common';
-import { WithChildren } from '../../models/react';
+import { QAProps, Refable, Roleable, WithChildren } from '../../models';
 import { GridColumnClassParams } from '../types';
-export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps {
+export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps, Roleable {
     style?: CSSProperties;
     children?: React.ReactNode;
-    role?: React.AriaRole;
 }
 export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/models/constructor-items/blocks.d.ts

@@ -189,6 +189,10 @@ export interface TableProps {
     legend?: string[];
     justify?: Justify[];
     marker?: LegendTableMarkerType;
+    /**
+     * Only as accessible name, not displayed explicitly
+     */
+    caption?: string;
 }
 export interface TableBlockProps {
     title: string;

package/build/esm/models/constructor-items/common.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
@@ -64,6 +64,9 @@ export interface Animatable {
 export interface Tabbable {
     tabIndex?: number;
 }
+export interface Roleable {
+    role?: React.AriaRole;
+}
 export interface Background {
     image?: string;
     color?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.3.0",
+  "version": "4.4.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/blocks.d.ts

@@ -189,6 +189,10 @@ export interface TableProps {
     legend?: string[];
     justify?: Justify[];
     marker?: LegendTableMarkerType;
+    /**
+     * Only as accessible name, not displayed explicitly
+     */
+    caption?: string;
 }
 export interface TableBlockProps {
     title: string;

package/server/models/constructor-items/common.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
@@ -64,6 +64,9 @@ export interface Animatable {
 export interface Tabbable {
     tabIndex?: number;
 }
+export interface Roleable {
+    role?: React.AriaRole;
+}
 export interface Background {
     image?: string;
     color?: string;