feat(blog): fix

gravity-ui · Dec 10, 2023 · 53c2913 · 53c2913
1 parent f698c62
commit 53c2913
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/src/components/OnboardingGuide/Guide/Guide.tsx b/src/components/OnboardingGuide/Guide/Guide.tsx
@@ -39,7 +39,7 @@ export const Guide = ({
     return (
         <div className={cnGuide({expanded: expand})}>
             <div className={cnGuide('content', {expanded: expand})}>
-                <div
+                <header
                     className={cnGuide('header', {state: expand && 'expanded'})}
                     onClick={onHeaderClick}
                     onKeyDown={onHeaderClick}
@@ -59,7 +59,7 @@ export const Guide = ({
                     <div className={cnGuide('progressBar', {state: !expand && 'closed'})}>
                         <Progress size="xs" theme="success" value={progressBarCurrentValue} />
                     </div>
-                </div>
+                </header>
 
                 {expand && (
                     <React.Fragment>

diff --git a/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.tsx b/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.tsx
@@ -1,6 +1,4 @@
-import {useMemo, useState} from 'react';
-import * as React from 'react';
-import type {ReactNode} from 'react';
+import React from 'react';
 
 import {Clock} from '@gravity-ui/icons';
 import {Checkbox, Disclosure, Icon} from '@gravity-ui/uikit';
@@ -12,8 +10,8 @@ import './GuideMenuItem.scss';
 export type GuideMenuItemProps = {
     title: string;
     status?: 'finished' | 'inProgress';
-    children?: ReactNode;
-    buttons?: ReactNode[];
+    children?: React.ReactNode;
+    buttons?: React.ReactNode[];
     showDivider?: boolean;
     hasArrow?: boolean;
 
@@ -32,13 +30,14 @@ export const GuideMenuItem = ({
     onClick = noopFunc,
     hasArrow = true,
 }: GuideMenuItemProps) => {
-    const [isExpand, setIsExpand] = useState(false);
+    const [isExpand, setIsExpand] = React.useState(false);
 
-    const header = useMemo(
+    const header = React.useMemo(
         () => (
-            <div
+            <header
                 className={cnGuideMenuItem('collapse-header', {isExpand, hasArrow})}
                 onClick={() => setIsExpand((isExpand) => !isExpand)}
+                onKeyDown={() => setIsExpand((isExpand) => !isExpand)}
             >
                 <div className={cnGuideMenuItem('icon')}>
                     {status === 'inProgress' ? (
@@ -56,13 +55,13 @@ export const GuideMenuItem = ({
                 </div>
                 <Disclosure arrowPosition="right" size="l" summary={title}>
                     {hasArrow && (
-                        <>
+                        <React.Fragment>
                             <div className={cnGuideMenuItem('node')}>{children}</div>
                             <div className={cnGuideMenuItem('buttons')}>{buttons}</div>
-                        </>
+                        </React.Fragment>
                     )}
                 </Disclosure>
-            </div>
+            </header>
         ),
         [status, onClick, title, isExpand],
     );