fix: improve a11y on some components

.eslintrc

@@ -18,7 +18,8 @@
                 "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",
                 "message": "Don't use React.FC"
             }
-        ]
+        ],
+        "jsx-a11y/no-autofocus": 0
     },
     "overrides": [
         {

src/components/DropdownMenu/DropdownMenu.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Ellipsis} from '@gravity-ui/icons';
 
+import {useActionHandlers} from '../../hooks/useActionHandlers';
 import {Button} from '../Button';
 import type {ButtonProps} from '../Button';
 import {Icon} from '../Icon';
@@ -27,6 +28,11 @@ import {toItemList} from './utils/toItemList';
 
 import './DropdownMenu.scss';
 
+type SwitcherProps = {
+    onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    onClick: React.MouseEventHandler<HTMLElement>;
+};
+
 export type DropdownMenuProps<T> = {
     /**
      * Array of items.
@@ -56,8 +62,13 @@ export type DropdownMenuProps<T> = {
     disabled?: boolean;
     /**
      * Menu toggle control.
+     * @deprecated Use renderSwitcher instead
      */
     switcher?: React.ReactNode;
+    /**
+     * Menu toggle control.
+     */
+    renderSwitcher?: (props: SwitcherProps) => React.ReactNode;
     switcherWrapperClassName?: string;
     /**
      * Overrides the default switcher button props.
@@ -94,6 +105,7 @@ const DropdownMenu = <T,>({
     data,
     disabled,
     switcher,
+    renderSwitcher,
     switcherWrapperClassName,
     defaultSwitcherProps,
     defaultSwitcherClassName,
@@ -126,7 +138,7 @@ const DropdownMenu = <T,>({
         [items],
     );
 
-    const handleSwitcherClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
+    const handleSwitcherClick: React.MouseEventHandler<HTMLElement> = (event) => {
         if (disabled) {
             return;
         }
@@ -135,26 +147,34 @@ const DropdownMenu = <T,>({
         togglePopup();
     };
 
+    const {onKeyDown: handleSwitcherKeyDown} = useActionHandlers(handleSwitcherClick);
+
     return (
         <DropdownMenuContext.Provider value={contextValue}>
-            {/*as this div has Button component as child, clicking on it one fires onClick of this div on bubbling*/}
+            {/* FIXME remove switcher prop and this wrapper */}
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div
                 ref={anchorRef}
                 className={cnDropdownMenu('switcher-wrapper', switcherWrapperClassName)}
                 onClick={handleSwitcherClick}
             >
-                {switcher || (
-                    <Button
-                        view="flat"
-                        size={size}
-                        {...defaultSwitcherProps}
-                        className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
-                        disabled={disabled}
-                    >
-                        {icon}
-                    </Button>
-                )}
+                {renderSwitcher?.({
+                    onClick: handleSwitcherClick,
+                    onKeyDown: handleSwitcherKeyDown,
+                }) ||
+                    switcher || (
+                        <Button
+                            view="flat"
+                            size={size}
+                            // FIXME remove switcher prop and uncomment onClick handler
+                            // onClick={handleSwitcherClick}
+                            {...defaultSwitcherProps}
+                            className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
+                            disabled={disabled}
+                        >
+                            {icon}
+                        </Button>
+                    )}
             </div>
             <DropdownMenuNavigationContextProvider anchorRef={anchorRef} disabled={!isPopupShown}>
                 <DropdownMenuPopup

src/components/Label/Label.scss

@@ -4,48 +4,14 @@ $block: '.#{variables.$ns}label';
 $disabled: #{$block}_disabled;
 $transitionDuration: 0.15s;
 $transitionTimingFunction: ease-in-out;
-
-@mixin themeState($bgColor, $bgHoverColor, $textColor, $borderColor: none) {
-    color: #{$textColor};
-    background-color: #{$bgColor};
-
-    @if $borderColor != none {
-        --border-size: 1px;
-        border: var(--border-size) solid #{$borderColor};
-    }
-
-    // hover on interactive label (excluding hover on addon)
-    &:not(#{$disabled})#{$block}_is-interactive:hover:not(
-            :has(#{$block}__addon_interactive:hover)
-        ) {
-        background-color: #{$bgHoverColor};
-    }
-
-    //fallback for old browsers
-    @supports not selector(:has(*)) {
-        &:not(#{$disabled})#{$block}_is-interactive:hover {
-            background-color: #{$bgHoverColor};
-        }
-    }
-
-    // hover on action button
-    &:not(#{$disabled}) #{$block}__addon_interactive {
-        --yc-button-background-color-hover: #{$bgHoverColor};
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: #{$textColor};
-        }
-    }
-}
+$hover-opacity: 0.7;
 
 @mixin sizeState($margin, $mainSize, $rAddon, $lAddon, $borderRadius) {
-    height: #{$mainSize};
-    border-radius: #{$borderRadius};
+    height: $mainSize;
+    border-radius: $borderRadius;
     & #{$block}__text {
-        line-height: #{$mainSize};
-        margin: 0 #{$margin};
+        line-height: $mainSize;
+        margin: 0 $margin;
     }
 
     & #{$block}__addon {
@@ -55,11 +21,11 @@ $transitionTimingFunction: ease-in-out;
     }
 
     &#{$block}_has-right-addon #{$block}__text {
-        margin-right: #{$rAddon};
+        margin-right: $rAddon;
     }
 
     &#{$block}_has-left-addon #{$block}__text {
-        margin-left: #{$lAddon};
+        margin-left: $lAddon;
     }
 }
 
@@ -87,7 +53,7 @@ $transitionTimingFunction: ease-in-out;
 
     &__value {
         display: flex;
-        opacity: 0.7;
+        opacity: $hover-opacity;
     }
 
     &__separator {
@@ -140,70 +106,86 @@ $transitionTimingFunction: ease-in-out;
     }
 
     &_disabled {
-        opacity: 0.7;
+        opacity: $hover-opacity;
         pointer-events: none;
     }
 
     &_is-interactive {
         cursor: pointer;
+        outline: none;
+    }
+
+    &_is-interactive:focus-visible {
+        outline: 2px solid var(--g-color-line-focus);
     }
 
+    --_-bg-color: none;
+    --_-bg-hover-color: none;
+    --_-text-color: none;
+
     &_theme {
         &_normal {
-            @include themeState(
-                var(--g-color-base-misc-light),
-                var(--g-color-base-misc-light-hover),
-                var(--g-color-text-misc-heavy)
-            );
+            --_-bg-color: var(--g-color-base-misc-light);
+            --_-bg-hover-color: var(--g-color-base-misc-light-hover);
+            --_-text-color: var(--g-color-text-misc-heavy);
         }
 
         &_success {
-            @include themeState(
-                var(--g-color-base-positive-light),
-                var(--g-color-base-positive-light-hover),
-                var(--g-color-text-positive-heavy)
-            );
+            --_-bg-color: var(--g-color-base-positive-light);
+            --_-bg-hover-color: var(--g-color-base-positive-light-hover);
+            --_-text-color: var(--g-color-text-positive-heavy);
         }
 
         &_info {
-            @include themeState(
-                var(--g-color-base-info-light),
-                var(--g-color-base-info-light-hover),
-                var(--g-color-text-info-heavy)
-            );
+            --_-bg-color: var(--g-color-base-info-light);
+            --_-bg-hover-color: var(--g-color-base-info-light-hover);
+            --_-text-color: var(--g-color-text-info-heavy);
         }
 
         &_warning {
-            @include themeState(
-                var(--g-color-base-warning-light),
-                var(--g-color-base-warning-light-hover),
-                var(--g-color-text-warning-heavy)
-            );
+            --_-bg-color: var(--g-color-base-warning-light);
+            --_-bg-hover-color: var(--g-color-base-warning-light-hover);
+            --_-text-color: var(--g-color-text-warning-heavy);
         }
 
         &_danger {
-            @include themeState(
-                var(--g-color-base-danger-light),
-                var(--g-color-base-danger-light-hover),
-                var(--g-color-text-danger-heavy)
-            );
+            --_-bg-color: var(--g-color-base-danger-light);
+            --_-bg-hover-color: var(--g-color-base-danger-light-hover);
+            --_-text-color: var(--g-color-text-danger-heavy);
         }
 
         &_unknown {
-            @include themeState(
-                var(--g-color-base-neutral-light),
-                var(--g-color-base-neutral-light-hover),
-                var(--g-color-text-complementary)
-            );
+            --_-bg-color: var(--g-color-base-neutral-light);
+            --_-bg-hover-color: var(--g-color-base-neutral-light-hover);
+            --_-text-color: var(--g-color-text-complementary);
         }
 
         &_clear {
-            @include themeState(
-                transparent,
-                var(--g-color-base-simple-hover-solid),
-                var(--g-color-text-complementary),
-                var(--g-color-line-generic)
-            );
+            --_-bg-color: transparent;
+            --_-bg-hover-color: var(--g-color-base-simple-hover-solid);
+            --_-text-color: var(--g-color-text-complementary);
+
+            --border-size: 1px;
+            border: var(--border-size) solid var(--g-color-line-generic);
+        }
+    }
+
+    color: var(--_-text-color);
+    background-color: var(--_-bg-color);
+
+    // hover on interactive label (excluding hover on addon)
+    &_is-interactive:hover:not(:has(#{$block}__addon_interactive:hover)) {
+        background-color: var(--_-bg-hover-color);
+    }
+
+    // hover on action button
+    &:not(#{$disabled}) #{$block}__addon_interactive {
+        --yc-button-background-color-hover: var(--_-bg-hover-color);
+
+        &:hover,
+        &:focus,
+        &:active {
+            color: var(--_-text-color);
         }
     }
 }

src/components/Label/Label.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
 
+import {useActionHandlers} from '../../hooks';
 import {Button} from '../Button';
 import type {ButtonProps, ButtonSize} from '../Button';
 import {ClipboardIcon} from '../ClipboardIcon';
@@ -86,14 +87,16 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         onClick,
     } = props;
 
+    const actionButtonRef = React.useRef<HTMLButtonElement>(null);
+
     const hasContent = Boolean(children !== '' && React.Children.count(children) > 0);
 
     const typeClose = type === 'close' && hasContent;
     const typeCopy = type === 'copy' && hasContent;
 
     const hasOnClick = Boolean(onClick);
     const hasCopy = Boolean(typeCopy && copyText);
-    const isInteractive = hasOnClick || hasCopy || interactive;
+    const isInteractive = (hasOnClick || hasCopy || interactive) && !disabled;
     const {copyIconSize, closeIconSize, buttonSize} = sizeMap[size];
 
     const leftIcon = icon && (
@@ -122,12 +125,25 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         }
     };
 
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        /**
+         * Triggered only if the handler was triggered on the element itself, and not on the actionButton
+         * It is necessary that keyboard navigation works correctly
+         */
+        if (!actionButtonRef.current?.contains(event.target as Node)) {
+            onClick?.(event);
+        }
+    };
+
+    const {onKeyDown} = useActionHandlers(handleClick);
+
     const renderLabel = (status?: CopyToClipboardStatus) => {
         let actionButton: React.ReactNode;
 
         if (typeCopy) {
             actionButton = (
                 <Button
+                    ref={actionButtonRef}
                     size={buttonSize}
                     extraProps={{'aria-label': copyButtonLabel || undefined}}
                     {...commonActionButtonProps}
@@ -143,6 +159,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         } else if (typeClose) {
             actionButton = (
                 <Button
+                    ref={actionButtonRef}
                     onClick={onClose ? handleCloseClick : undefined}
                     size={buttonSize}
                     extraProps={{'aria-label': closeButtonLabel || undefined}}
@@ -154,10 +171,12 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         }
 
         return (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div
                 ref={ref}
-                onClick={hasOnClick ? onClick : undefined}
+                role={hasOnClick ? 'button' : undefined}
+                tabIndex={hasOnClick ? 0 : undefined}
+                onClick={hasOnClick ? handleClick : undefined}
+                onKeyDown={hasOnClick ? onKeyDown : undefined}
                 className={b(
                     {
                         theme,
@@ -178,7 +197,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         );
     };
 
-    if (hasCopy && copyText) {
+    if (hasCopy && copyText && !hasOnClick) {
         return (
             <CopyToClipboard text={copyText} onCopy={onCopy} timeout={1000}>
                 {(status) => renderLabel(status)}