gravity-ui / page-constructor Goto Github PK

https://github.com/gravity-ui/page-constructor/blob/main/src/models/constructor-items/common.ts#L174

1. Each question element should be accessible via TAB navigation and expandable on Enter
2. Each question element should have aria-expanded attribute set correctly

We need to refactor Button according to the rules https://eslint.org/docs/latest/rules/complexity

hello, I can not find solution for specify hash links with anchor for the same page

ex: https://host.com/#questions make link with target="_blank"

We have many places with paddings or margins equals 4px. I think we need to create indent4XS: 4px css-variable

• one
• two

Description

The block type "promo-features-block" experiences a width-related issue when SSR is utilized with the configuration ssrConfig = {isServer: true}. Specifically, the width of the items within this block remains at 33% across all screen sizes, neglecting responsive behavior.

Expected Behavior

On smaller (mobile) screens, the width of each item within the "promo-features-block" should adjust to 100% to accommodate responsive design principles.

Current Behavior

When SSR is enabled (ssrConfig = {isServer: true}), the width of the items persists at 33%, even on smaller screens, counteracting mobile-responsive functionality. When SSR mode is disabled or not used, the rendering on small screens appears as expected, adhering to the 100% width for item divs.

Steps to Reproduce

Enable SSR with the configuration ssrConfig = {isServer: true}.
Observe the "promo-features-block" on various screen sizes.
Note the persisting width of 33% for item divs on smaller screens, rather than the expected 100%.

Possible Solution

A preliminary assessment does not suggest an immediate solution and requires further investigation into how SSR, or the specific isServer: true configuration, is impacting the responsive CSS or JS logic.

Context (Environment)

Browser: [e.g., Chrome, Safari, etc.]
OS: [e.g., iOS, Windows, etc.]
Screen Sizes: Small (Mobile) screens

Detailed Visuals

Without SSR (Correct Behavior):

With SSR (Incorrect Behavior):

The page-constructor package includes bootstrap css styles which contain global styles that affect every html element. This breaks the existing layout in the application. Can we move these styles inside page constructor block selector?

*,
*::before,
*::after {
    box-sizing: inherit;
}

If scroll to the very bottom of the page https://gravity-ui.com , then reload page, then try to scroll down, you'll see that animation doesn't work and animated blocks are not shown.

Move all story and page editor templates images from s3 bucket to project repo.

1. Move stories images to project repo, add loader to strorybook's webpack

2. For page editor templates convert all assets to base64 or move them to repo as files and handle breaking change

Should mark currently opened tab with aria-current=”true”

Let's use package https://github.com/diplodoc-platform/transform instead of doc-tools/transform in next major

Need to state somehow whether a link leads to external resource or not.

The components where this feature definitely should be:

1. Content sub-block
2. ExtendedFeatures block
3. ShareListItem (components)

Probably, there are other link elements that should be marked as external

1. For buttons “Next/Previous“, add aria-label attribute for Slider component

2. For lower page ("dot" buttons) need to add aria-label attribute for each page. E.g.: “Slide 1 of 3“, “Slide 2 of 3“, “Slide 3 of 3“. For the second one also need to set aria-current=”true”

Need to provide additional description (adding to aria-label or aria-describedby) for links used in the following components:

1. Content sub-block

2. CardBase

3. aria-labelledby for each mark in Table’s cell, related to legend

4. ExtendedFeatures block

We need to throw prop list in all places when we use Content

Filter block render items with CardLayout, and sometimes when we have small count of items CardLayout dont use all width from his parent Filter

One proposes the following changes to image's alt attribute as part of accessibility improvement:

1. Currently all alt attributes are set as "Image alt". By default, they should be empty.
2. Each component / block, using the alt attribute, should have an opportunity to set custom alt value from props
3. Add aria-label="Close" for close button in FullscrrenImage

Content sub-blocks buttons could be wrapped with RouterLink component, as its made in Header block.

There are some elements that should have aria-label attribute for better understanding the wbsite content with screenreaders. At least:

1. The cross icon, appearing after some value entered in the search field, should be labelled with aria-label

2. Add aria-label="Close" for close button in FullscrrenImage

3. Need to set aria-label for Play, Pause and Mute buttons for Media component when controls=”custom”. Not forget that aria-label is different for different languages.

There is an validator for block card which is not related to any block in page-constructor

• one
• two
• three

Remove disableCompress global flag, seems like it is not related to pc logic. Use custom Image component as alternative

• Enable a11y linter rules: https://github.com/gravity-ui/eslint-config?tab=readme-ov-file#a11y and disable linter rule for the problem lines.
• Create appropriate issue for each disabled rule

Need to use semantic tags correctly in the project. Here are the suggested changes:

1. Need to have an opportunity to change the title level here and here

2. Should use h3 tag instead of h4 for pc-title-item__text here

3. Use h3 tag instead of h4 here

4. ExtendedFeaturesBlock: as heading tag in header element is h2, the next used heading tag should be h3 to meet the accessibility requirements. If heading tag of entire block is not used, each item should use h2 tag instead of h3.

• - delete metrikagoals (@niktverd)
• - use i18n instance from uikit #799 (@NikitaCG)
• - use uikit6 #803
• - use diplodoc-platform/transform instead doc-tools/transform #805 (@qradle-yndx)
• deprecated PriceDetailed (@qradle-yndx)
• use gravity-ui/icons

https://github.com/gravity-ui/page-constructor/blob/main/src/models/constructor-items/common.ts#L176

I have not found code where this types/classes are described. May be the types can be deleted?

It is possible to commit with lint issues. Looks like we have to add rule to check if problems exist and if so allow commit with --no-verify only

When trying to run the page-constructor example code, an error was discovered in the import that breaks the build.
In https://gravity-ui.com/libraries/page-constructor#grid description import has extra slash:

import {Grid, Row, Col} from '@gravity-ui/page-constructor/';

It's be nice to have working example:

import {Grid, Row, Col} from '@gravity-ui/page-constructor';

Image should be aligned to left/center/right, because after changing page size we want to able to user focus on specific part of image.

Example

Need to enable this addon: https://storybook.js.org/docs/writing-tests/accessibility-testing
And fix all the issues the addon reports

Сейчас, чтобы использовать Navigation, нужно обязательно прикидывать его в PageConstructor, хотелось бы использовать этот компонент отдельно.