feat: update foldable-list

niktverd · aeksandla · commit c5dfd56ada7e · 2025-05-26T13:40:01.000+03:00
diff --git a/src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.scss b/src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.scss
@@ -12,14 +12,25 @@ $block: '.#{$ns}FoldableListBlockItem';
     }
 
     &__title {
-        @include reset-button-style();
-        @include heading4();
-        @include focusable();
+        @include add-specificity(&) {
+            @include heading4();
+            @include focusable();
 
+            cursor: pointer;
+            border-radius: var(--g-focus-border-radius);
+
+            a {
+                @include link();
+            }
+        }
+    }
+
+    &__title-container {
+        margin: 0;
         position: relative;
         display: block;
         width: 100%;
-        padding-right: 24px;
+        padding-right: $indentSM;
         text-align: start;
         cursor: pointer;
         border-radius: var(--g-focus-border-radius);
@@ -57,4 +68,10 @@ $block: '.#{$ns}FoldableListBlockItem';
 
         margin-top: $indentXXS;
     }
+
+    &__button {
+        @include reset-button-style();
+
+        width: 100%;
+    }
 }
diff --git a/src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.tsx b/src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.tsx
@@ -1,6 +1,6 @@
 import {useActionHandlers} from '@gravity-ui/uikit';
 
-import {Foldable, HTML, ToggleArrow, YFMWrapper} from '../../../components';
+import {Foldable, ToggleArrow, YFMWrapper} from '../../../components';
 import Link from '../../../components/Link/Link';
 import {FoldableListBlockItemProps} from '../../../models';
 import {block} from '../../../utils';
@@ -22,19 +22,30 @@ export const FoldableListBlockItem = ({
     return (
         <div className={b()} itemScope role={'listitem'}>
             <button
-                className={b('title')}
+                className={b('button')}
                 onClick={onClick}
                 aria-expanded={isOpened}
                 onKeyDown={onKeyDown}
             >
-                <HTML>{itemTitle}</HTML>
-                <ToggleArrow
-                    open={isOpened}
-                    size={16}
-                    type={'vertical'}
-                    iconType="navigation"
-                    className={b('arrow')}
-                />
+                <YFMWrapper
+                    tagName="h3"
+                    className={b('title-container')}
+                    contentClassName={b('title')}
+                    content={itemTitle}
+                    modifiers={{
+                        constructor: true,
+                    }}
+                    onClick={onClick}
+                    tabIndex={0}
+                >
+                    <ToggleArrow
+                        open={isOpened}
+                        size={16}
+                        type={'vertical'}
+                        iconType="navigation"
+                        className={b('arrow')}
+                    />
+                </YFMWrapper>
             </button>
             <Foldable isOpened={isOpened}>
                 <div className={b('text')} aria-hidden={!isOpened}>
