review: use button to wrap group title

Author: artemmufazalov

src/containers/Storage/TableGroup/TableGroup.scss

@@ -4,11 +4,19 @@
 
     width: 100%;
     margin-bottom: 20px;
-    padding: 8px 0;
 
     border: 1px solid var(--g-color-line-generic);
     border-radius: var(--g-spacing-2);
 
+    &__button {
+        padding: 8px 0;
+
+        cursor: pointer;
+
+        border: unset;
+        background: unset;
+    }
+
     &__title-wrapper {
         position: sticky;
         left: 0;
@@ -21,8 +29,6 @@
 
         width: max-content;
         padding-left: 20px;
-
-        cursor: pointer;
     }
 
     &__title {
@@ -38,6 +44,6 @@
     }
 
     &__content {
-        padding: 20px 0 20px 20px;
+        padding: 12px 0 20px 20px;
     }
 }

src/containers/Storage/TableGroup/TableGroup.tsx

@@ -32,15 +32,17 @@ export function TableGroup({
 
     const renderTitle = () => {
         return (
-            <div onClick={toggleCollapsed} className={b('title-wrapper')} tabIndex={0}>
-                <ArrowToggle direction={expanded ? 'top' : 'bottom'} />
-                <div className={b('title')}>
-                    <Text variant="subheader-2">{title}</Text>
-                    <Text variant="body-2" color="secondary" className={b('count')}>
-                        {entityName}: <Label theme="normal">{count}</Label>
-                    </Text>
+            <button onClick={toggleCollapsed} className={b('button')}>
+                <div className={b('title-wrapper')}>
+                    <ArrowToggle direction={expanded ? 'top' : 'bottom'} />
+                    <div className={b('title')}>
+                        <Text variant="subheader-2">{title}</Text>
+                        <Text variant="body-2" color="secondary" className={b('count')}>
+                            {entityName}: <Label theme="normal">{count}</Label>
+                        </Text>
+                    </div>
                 </div>
-            </div>
+            </button>
         );
     };