fix: correct usage of heading levels

gravity-ui · Aug 21, 2023 · 42448fa · 42448fa
1 parent fdb185f
commit 42448fa
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 14 deletions.
diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
@@ -27,6 +27,7 @@ export const ExtendedFeaturesBlock = ({
     animated,
 }: ExtendedFeaturesProps) => {
     const theme = useTheme();
+    const itemTitleHeadingTag = title ? 'h3' : 'h2';
 
     return (
         <AnimateBlock className={b()} animate={animated}>
@@ -57,14 +58,21 @@ export const ExtendedFeaturesBlock = ({
                                 <Col className={b('item')} key={text || itemTitle} sizes={colSizes}>
                                     {iconData && <Image {...iconData} className={b('icon')} />}
                                     <div className={b('container')}>
-                                        {itemTitle && (
-                                            <h5 className={b('item-title')}>
-                                                <HTML>{itemTitle}</HTML>
-                                                {label && (
-                                                    <span className={b('item-label')}>{label}</span>
-                                                )}
-                                            </h5>
-                                        )}
+                                        {itemTitle &&
+                                            React.createElement(
+                                                itemTitleHeadingTag,
+                                                {
+                                                    className: b('item-title'),
+                                                },
+                                                <React.Fragment>
+                                                    <HTML>{itemTitle}</HTML>
+                                                    {label && (
+                                                        <span className={b('item-label')}>
+                                                            {label}
+                                                        </span>
+                                                    )}
+                                                </React.Fragment>,
+                                            )}
                                         <Content
                                             text={text}
                                             links={itemLinks}

diff --git a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx
@@ -46,7 +46,7 @@ const PromoFeaturesBlock = (props: PromoFeaturesProps) => {
                             })}
                         >
                             <div className={b('card-info')}>
-                                <h4 className={b('card-title')}>{cardTitle}</h4>
+                                <h3 className={b('card-title')}>{cardTitle}</h3>
                                 <div className={b('card-text')}>
                                     <YFMWrapper content={text} modifiers={{constructor: true}} />
                                 </div>

diff --git a/src/blocks/Questions/Questions.tsx b/src/blocks/Questions/Questions.tsx
@@ -66,7 +66,7 @@ const QuestionsBlock = (props: QuestionsProps) => {
                                     itemProp={FaqMicrodataValues.QuestionProp}
                                     itemType={FaqMicrodataValues.QuestionType}
                                 >
-                                    <h4
+                                    <h3
                                         className={b('item-title')}
                                         onClick={() => toggleItem(index)}
                                     >
@@ -80,7 +80,7 @@ const QuestionsBlock = (props: QuestionsProps) => {
                                             iconType="navigation"
                                             className={b('arrow')}
                                         />
-                                    </h4>
+                                    </h3>
                                     <Foldable isOpened={isOpened}>
                                         <div
                                             className={b('text')}

diff --git a/src/sub-blocks/Content/ContentList/ContentList.tsx b/src/sub-blocks/Content/ContentList/ContentList.tsx
@@ -13,6 +13,16 @@ import './ContentList.scss';
 
 const b = block('content-list');
 
+function getHeadingLevel(size: ContentSize) {
+    switch (size) {
+        case 's':
+            return 'h4';
+        case 'l':
+        default:
+            return 'h3';
+    }
+}
+
 interface ContentListProps {
     list: ContentItemProps[];
     size: ContentSize;
@@ -32,7 +42,12 @@ const ContentList = ({list, size}: ContentListProps) => {
                     <div className={b('item')} key={uuidv4()}>
                         <Image {...iconData} className={b('icon')} />
                         <div>
-                            {title && <h4 className={b('title')}>{title}</h4>}
+                            {title &&
+                                React.createElement(
+                                    getHeadingLevel(size),
+                                    {className: b('title')},
+                                    title,
+                                )}
                             {text && (
                                 <YFMWrapper
                                     className={b('text')}

diff --git a/src/utils/blocks.ts b/src/utils/blocks.ts
@@ -44,9 +44,9 @@ export function getHeaderTag(size: TextSize) {
         case 'l':
             return 'h1';
         case 's':
-            return 'h4';
+            return 'h3';
         case 'xs':
-            return 'h5';
+            return 'h4';
         case 'm':
         default:
             return 'h2';