fix: fix a11y, mock router in stories

src/blocks/Feed/Feed.tsx

@@ -101,7 +101,7 @@ export const Feed = ({image}: FeedProps) => {
                       ...value,
                   };
 
-            router?.updateQueryCallback?.(result);
+            router.updateQueryCallback(result);
         },
         [router],
     );

src/blocks/Feed/__stories__/Feed.stories.tsx

@@ -21,6 +21,8 @@ import {Feed} from '../Feed';
 import mockedPosts from '../../../../.mocks/posts.json';
 import mockedServices from '../../../../.mocks/services.json';
 import mockedTags from '../../../../.mocks/tags.json';
+import {RouterContext} from '../../../contexts/RouterContext';
+import {routerData} from '../../../demo/mocks';
 
 export default {
     title: 'Blocks/Feed',
@@ -76,7 +78,12 @@ const contextData = {
 
 const DefaultTemplate: StoryFn<FeedModel> = (args) => (
     <FeedContext.Provider value={contextData as unknown as FeedContextProps}>
-        <PageConstructor content={{blocks: [args] as unknown as Block[]}} custom={customBlocks} />
+        <RouterContext.Provider value={routerData}>
+            <PageConstructor
+                content={{blocks: [args] as unknown as Block[]}}
+                custom={customBlocks}
+            />
+        </RouterContext.Provider>
     </FeedContext.Provider>
 );
 

src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss

@@ -84,6 +84,9 @@ $clearIconSize: 11px;
             position: absolute;
             inset: 0;
             border-radius: var(--g-border-radius-xl);
+            background: transparent;
+            border: none;
+            cursor: pointer;
         }
     }
 

src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx

@@ -43,13 +43,13 @@ export const CustomSwitcher = ({
     const hasCounter = itemsNames.length > 1;
 
     return (
-        <button
+        <div
             className={b('custom-switcher')}
-            ref={controlRef as LegacyRef<HTMLButtonElement>}
+            ref={controlRef as LegacyRef<HTMLDivElement>}
             onKeyDown={onKeyDown}
             aria-expanded={open}
         >
-            <div onClick={onClick} className={b('custom-switcher-element', {overlay: true})} />
+            <button onClick={onClick} className={b('custom-switcher-element', {overlay: true})} />
             <div className={b('custom-switcher-element', {content: true})}>
                 {itemsNames?.join(', ')}
             </div>
@@ -67,6 +67,6 @@ export const CustomSwitcher = ({
             <div className={b('custom-switcher-element', {arrow: true})}>
                 <Icon data={DropdownArrow} size={ICON_SIZE} className={b('switcher-arrow')} />
             </div>
-        </button>
+        </div>
     );
 };

src/containers/BlogPage/__stories__/BlogPage.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {Meta, StoryContext, StoryFn} from '@storybook/react';
 
 import {BlogConstructorProvider} from '../../../constructor/BlogConstructorProvider';
-import {GetPostsRequest, Query} from '../../../models/common';
+import {GetPostsRequest} from '../../../models/common';
 import {BlogPage, BlogPageProps} from '../BlogPage';
 
 import page from '../../../../.mocks/blogPage.json';
@@ -12,17 +12,9 @@ import posts from '../../../../.mocks/posts.json';
 import services from '../../../../.mocks/services.json';
 import tags from '../../../../.mocks/tags.json';
 import {Lang} from '../../../models/locale';
+import {routerData} from '../../../demo/mocks';
 
 const mockMetaComponent = <title>Blog page</title>;
-const routerData = {
-    as: '/',
-    pathname: '/',
-    hostname: 'host',
-    query: {},
-    updateQueryCallback: (params: Query) => {
-        console.log('params', params);
-    },
-};
 
 export default {
     title: 'Containers/BlogPage',

src/demo/mocks.ts

@@ -0,0 +1,11 @@
+import {Query} from '../models/common';
+
+export const routerData = {
+    as: '/',
+    pathname: '/',
+    hostname: 'host',
+    query: {},
+    updateQueryCallback: (params: Query) => {
+        console.log('params', params);
+    },
+};