Skip to content

Commit 1fd532c

Browse files
VitaliiDC8VitaliiDC8
authored
fix: semantic markup (#416)
* fix: semantic markup * fix: lint error * fix: review comments * fix: change overtitle h4 to p tag * fix: removed title check in companies block * fix: styles for dots in slider
1 parent 84fe0de commit 1fd532c

File tree

10 files changed

+69
-17
lines changed

10 files changed

+69
-17
lines changed

‎src/blocks/Header/Header.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ $backgroundWidth: 1440px;
7777
&__description {
7878
margin-top: $indentXS;
7979
font-weight: normal;
80+
@include text-size(caption-2);
81+
margin-block-end: var(--yc-text-body-1-line-height);
8082

8183
.yfm,
8284
.yfm * {
@@ -187,6 +189,7 @@ $backgroundWidth: 1440px;
187189

188190
&__overtitle {
189191
@include text-size(body-3);
192+
margin-block-start: var(--yc-text-body-3-line-height);
190193

191194
margin-bottom: $indentXXXS;
192195
font-weight: 400;

‎src/blocks/Header/Header.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,21 +121,21 @@ export const HeaderBlock = (props: WithChildren<HeaderBlockFullProps>) => {
121121
>
122122
<Col sizes={titleSizes} className={b('content-inner')}>
123123
{overtitle && (
124-
<h4 className={b('overtitle')}>
124+
<p className={b('overtitle')}>
125125
<HTML>{overtitle}</HTML>
126-
</h4>
126+
</p>
127127
)}
128128
<h1 className={b('title')}>
129129
{status}
130130
<HTML>{title}</HTML>
131131
</h1>
132132
{description && (
133-
<h5 className={b('description')}>
133+
<p className={b('description')}>
134134
<YFMWrapper
135135
content={description}
136136
modifiers={{constructor: true}}
137137
/>
138-
</h5>
138+
</p>
139139
)}
140140
{buttons && (
141141
<div className={b('buttons')} data-qa="header-buttons">

‎src/blocks/Slider/Arrow/Arrow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ export interface ArrowProps {
1919
const Arrow = ({type, handleClick, className, size = 16}: ArrowProps & ClassNameProps) => (
2020
<div className={b({type}, className)}>
2121
<button className={b('button')} onClick={() => handleClick && handleClick(type)}>
22-
<div className={b('icon-wrapper')}>
22+
<span className={b('icon-wrapper')}>
2323
<ToggleArrow
2424
size={size}
2525
type={'horizontal'}
2626
iconType="navigation"
2727
className={b('icon')}
2828
/>
29-
</div>
29+
</span>
3030
</button>
3131
</div>
3232
);

‎src/blocks/Slider/Slider.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ $block: '.#{$ns}SliderBlock';
9090
display: inline-flex;
9191
justify-content: center;
9292

93-
div#{$root}__bar,
94-
div#{$root}__dot {
93+
li#{$root}__bar,
94+
li#{$root}__dot {
9595
margin: calc(#{$indentXXS} / 2) $indentXXXS;
9696
top: 0;
9797
}

‎src/blocks/Slider/Slider.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,24 +224,24 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
224224

225225
return (
226226
slidesCountByBreakpoint > 1 && (
227-
<div
227+
<li
228228
className={b('bar')}
229229
style={{
230230
left: barPosition,
231231
width: barWidth,
232232
}}
233-
/>
233+
></li>
234234
)
235235
);
236236
};
237237

238238
const renderDot = (index: number) => {
239239
return (
240-
<div
240+
<li
241241
key={index}
242242
className={b('dot', {active: index === currentIndex})}
243243
onClick={() => handleDotClick(index)}
244-
/>
244+
></li>
245245
);
246246
};
247247

‎src/components/Media/Image/Image.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const Image = (props: ImageAllProps) => {
8484
const imageBackground = (oneImage: ImageProps) => {
8585
const imageData = getMediaImage(oneImage);
8686
return (
87-
<animated.div style={{transform: parallaxInterpolate}}>
87+
<animated.div style={{transform: parallaxInterpolate || 'none'}}>
8888
<BackgroundImage {...imageData} className={imageClass} style={{height}} />
8989
</animated.div>
9090
);

‎src/components/MetaInfo/MetaInfo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ export interface MetaInfpoProps extends ClassNameProps {
1515
const MetaInfo = ({items, className}: MetaInfpoProps) => (
1616
<h4 className={b(null, className)}>
1717
{items.map((metaInfoItem) => (
18-
<div key={metaInfoItem} className={b('item')}>
18+
<span key={metaInfoItem} className={b('item')}>
1919
{metaInfoItem}
20-
</div>
20+
</span>
2121
))}
2222
</h4>
2323
);

‎src/components/YFMWrapper/YFMWrapper.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import toSnakeCase from 'snakecase-keys';
77

88
import {HTML} from '../../components';
99
import {ClassNameProps, Modifiers} from '../../models';
10+
import {hasBlockTag} from '../../utils/blocks';
1011

1112
const yfm = block('yfm');
1213

@@ -23,7 +24,11 @@ const YFMWrapper = ({
2324
className,
2425
itemProp,
2526
}: YFMWrapperProps & ClassNameProps) => (
26-
<HTML className={yfm(modifiers ? toSnakeCase(modifiers) : {}, className)} itemProp={itemProp}>
27+
<HTML
28+
className={yfm(modifiers ? toSnakeCase(modifiers) : {}, className)}
29+
itemProp={itemProp}
30+
block={hasBlockTag(content)}
31+
>
2732
{content}
2833
</HTML>
2934
);

‎src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const TOGGLE_ARROW_SIZE = 12;
1616
type NavigationDropdownProps = NavigationItemProps & DropdownItemData;
1717

1818
export const NavigationDropdown = React.forwardRef<HTMLElement, NavigationDropdownProps>(
19-
({text, icon, isOpened, className, iconSize, ...props}, ref) => {
19+
({text, icon, isOpened, className, iconSize, type: _, ...props}, ref) => {
2020
const iconData = icon && getMediaImage(icon);
2121

2222
return (

‎src/utils/blocks.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,43 @@
11
import {Block, CustomConfig, PCShareSocialNetwork, TextSize} from '../models';
22
import {ConstructorBlock} from '../models/constructor';
33

4+
const BLOCK_ELEMENTS = [
5+
'div',
6+
'p',
7+
'h[1-6]',
8+
'address',
9+
'article',
10+
'aside',
11+
'blockquote',
12+
'canvas',
13+
'dd',
14+
'dl',
15+
'dt',
16+
'fieldset',
17+
'figcaption',
18+
'footer',
19+
'header',
20+
'hr',
21+
'main',
22+
'nav',
23+
'section',
24+
'video',
25+
'pre',
26+
'figure',
27+
'form',
28+
'pre',
29+
'ol',
30+
'ul',
31+
'li',
32+
'table',
33+
'thead',
34+
'tbody',
35+
'tfoot',
36+
'tr',
37+
'th',
38+
'td',
39+
];
40+
441
export function getHeaderTag(size: TextSize) {
542
switch (size) {
643
case 'l':
@@ -15,6 +52,13 @@ export function getHeaderTag(size: TextSize) {
1552
}
1653
}
1754

55+
export function hasBlockTag(content: string): boolean {
56+
const blockElementRegex = `/<(${BLOCK_ELEMENTS.join('|')})\b[^>]*>/gi`;
57+
const blockTags = content.match(blockElementRegex);
58+
59+
return Boolean(blockTags);
60+
}
61+
1862
export function getBlockKey(block: ConstructorBlock, index: number) {
1963
return `${block.type}-${index}`;
2064
}

0 commit comments

Comments
 (0)