feat: focus styles (#130)

* feat: use button tag for select control, add focus styles

Author: Kyzyl-ool

package-lock.json

@@ -78,8 +78,8 @@
   },
   "peerDependencies": {
     "@doc-tools/transform": "^3.3.2",
-    "@gravity-ui/page-constructor": "^4.0.0",
-    "@gravity-ui/uikit": "^5.1.0",
+    "@gravity-ui/page-constructor": "^4.26.0",
+    "@gravity-ui/uikit": "^5.12.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -89,11 +89,11 @@
     "@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": "^4.26.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.11.0",
+    "@gravity-ui/uikit": "^5.12.0",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/cli": "^7.0.27",
     "@storybook/preset-scss": "^1.0.3",

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,10 @@ $block: '.#{$namespace}feed-custom-switcher';
         border-radius: var(--g-border-radius-xl);
         width: 100%;
         line-height: 42px;
+        text-align: initial;
+        font-family: inherit;
+        padding: 0;
+        margin: 0;
 
         // 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>
     );
 };

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

@@ -98,10 +98,17 @@
 
     a {
         color: var(--g-color-text-link);
+        border-radius: var(--g-focus-border-radius);
 
         &:hover {
             color: var(--g-color-text-link-hover);
         }
+
+        @include focusable(0, 'box-shadow');
+
+        &:focus {
+            outline: 0;
+        }
     }
 
     .yfm-tab {