feat: use button tag for select control, fix arrow navigation

Author: kkmch

package-lock.json

@@ -78,7 +78,7 @@
   },
   "peerDependencies": {
     "@doc-tools/transform": "^3.3.2",
-    "@gravity-ui/page-constructor": "^4.0.0",
+    "@gravity-ui/page-constructor": "file:gravity-ui-page-constructor-4.21.0.tgz",
     "@gravity-ui/uikit": "^5.1.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
@@ -89,7 +89,7 @@
     "@commitlint/config-conventional": "^17.4.3",
     "@doc-tools/transform": "^3.3.2",
     "@gravity-ui/eslint-config": "^2.0.0",
-    "@gravity-ui/page-constructor": "^4.20.2",
+    "@gravity-ui/page-constructor": "file:gravity-ui-page-constructor-4.21.0.tgz",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",

package.json

@@ -27,14 +27,16 @@ type RenderSwitcherType = ({
 export const renderSwitcher: RenderSwitcherType =
     ({initial, list, defaultLabel}) =>
     // eslint-disable-next-line react/display-name
-    ({onClick, ref}) =>
+    ({onClick, ref, onKeyDown, open}) =>
         (
             <CustomSwitcher
                 initial={initial}
                 defaultLabel={defaultLabel}
                 list={list}
                 controlRef={ref}
                 onClick={onClick}
+                onKeyDown={onKeyDown}
+                open={open}
             />
         );
 

src/components/FeedHeader/components/Controls/customRenders.tsx

@@ -8,6 +8,7 @@ $block: '.#{$namespace}feed-custom-switcher';
 
     &__custom-switcher {
         @include text-size(body-2);
+        @include focusable();
         position: relative;
 
         display: flex;
@@ -18,6 +19,7 @@ $block: '.#{$namespace}feed-custom-switcher';
         border-radius: var(--g-border-radius-xl);
         width: 100%;
         line-height: 42px;
+        text-align: initial;
 
         // TODO delete this section after Select can customize the popup list
         & + .yc-popup.yc-popup_open {

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

@@ -27,6 +27,8 @@ export const CustomSwitcher = ({
     list,
     onClick,
     controlRef,
+    onKeyDown,
+    open,
 }: CustomSwitcherProps) => {
     const itemsNames = useMemo(() => {
         const items = list
@@ -38,10 +40,12 @@ export const CustomSwitcher = ({
     const hasCounter = itemsNames.length > 1;
 
     return (
-        <div
+        <button
             className={b('custom-switcher')}
             onClick={onClick}
-            ref={controlRef as LegacyRef<HTMLDivElement>}
+            ref={controlRef as LegacyRef<HTMLButtonElement>}
+            onKeyDown={onKeyDown}
+            aria-expanded={open}
         >
             <div className={b('custom-switcher-element', {content: true})}>
                 {itemsNames?.join(', ')}
@@ -54,6 +58,6 @@ export const CustomSwitcher = ({
             <div className={b('custom-switcher-element', {arrow: true})}>
                 <Icon data={DropdownArrow} size={ICON_SIZE} className={b('switcher-arrow')} />
             </div>
-        </div>
+        </button>
     );
 };