fix: improve a11y on some components

src/components/DropdownMenu/DropdownMenu.tsx

@@ -27,6 +27,10 @@ import {toItemList} from './utils/toItemList';
 
 import './DropdownMenu.scss';
 
+type SwitcherProps = {
+    onClick: React.MouseEventHandler<HTMLElement>;
+};
+
 export type DropdownMenuProps<T> = {
     /**
      * Array of items.
@@ -56,8 +60,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 +103,7 @@ const DropdownMenu = <T,>({
     data,
     disabled,
     switcher,
+    renderSwitcher,
     switcherWrapperClassName,
     defaultSwitcherProps,
     defaultSwitcherClassName,
@@ -126,7 +136,7 @@ const DropdownMenu = <T,>({
         [items],
     );
 
-    const handleSwitcherClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
+    const handleSwitcherClick: React.MouseEventHandler<HTMLElement> = (event) => {
         if (disabled) {
             return;
         }
@@ -137,16 +147,18 @@ const DropdownMenu = <T,>({
 
     return (
         <DropdownMenuContext.Provider value={contextValue}>
+            {/* 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 || (
+                {renderSwitcher?.({onClick: handleSwitcherClick}) || switcher || (
                     <Button
                         view="flat"
                         size={size}
+                        onClick={handleSwitcherClick}
                         {...defaultSwitcherProps}
                         className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
                         disabled={disabled}

src/components/Label/Label.scss

@@ -14,6 +14,20 @@ $transitionTimingFunction: ease-in-out;
         border: var(--border-size) solid #{$borderColor};
     }
 
+    // focus on interactive label (excluding focus on addon)
+    &:not(#{$disabled})#{$block}_is-interactive:focus:not(
+            :has(#{$block}__addon_interactive:focus)
+        ) {
+        box-shadow: 0 0 0 2px var(--g-color-line-focus);
+    }
+
+    //fallback for old browsers
+    &:not(#{$disabled})#{$block}_is-interactive:focus:not(
+            :has(#{$block}__addon_interactive:focus)
+        ):not(:focus-visible) {
+        box-shadow: none;
+    }
+
     // hover on interactive label (excluding hover on addon)
     &:not(#{$disabled})#{$block}_is-interactive:hover:not(
             :has(#{$block}__addon_interactive:hover)
@@ -146,6 +160,7 @@ $transitionTimingFunction: ease-in-out;
 
     &_is-interactive {
         cursor: pointer;
+        outline: none;
     }
 
     &_theme {

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,6 +87,8 @@ 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;
@@ -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 ? 'role' : undefined}
+                tabIndex={hasOnClick ? 0 : undefined}
+                onClick={hasOnClick ? handleClick : undefined}
+                onKeyDown={hasOnClick ? onKeyDown : undefined}
                 className={b(
                     {
                         theme,

src/components/Link/Link.tsx

@@ -75,22 +75,24 @@ export const Link = React.forwardRef<HTMLElement, LinkProps>(function Link(
         const relProp = target === '_blank' && !rel ? 'noopener noreferrer' : rel;
 
         return (
-            // eslint-disable-next-line jsx-a11y/anchor-has-content
             <a
                 {...(extraProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
                 {...commonProps}
                 ref={ref as React.Ref<HTMLAnchorElement>}
                 href={href}
                 target={target}
                 rel={relProp}
-            />
+            >
+                {commonProps.children}
+            </a>
         );
     } else {
         return (
             <span
                 {...(extraProps as React.HTMLAttributes<HTMLSpanElement>)}
                 {...commonProps}
                 ref={ref as React.Ref<HTMLSpanElement>}
+                // FIXME Href always should be string
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                 tabIndex={0}
             />

src/components/Popup/Popup.tsx

@@ -141,7 +141,7 @@ export function Popup({
                     role={role}
                 >
                     <FocusTrap enabled={focusTrap && open} disableAutoFocus={!autoFocus}>
-                        {/* The onClick event handler is deprecated and should be removed */}
+                        {/* FIXME The onClick event handler is deprecated and should be removed */}
                         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
                         <div
                             onClick={onClick}

src/components/Popup/__stories__/Popup.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
-import {useVirtualElementRef} from '../../../hooks';
+import {useUniqId, useVirtualElementRef} from '../../../hooks';
 import {Button} from '../../Button';
 import {TextInput} from '../../controls';
 import {Popup} from '../Popup';
@@ -93,12 +93,15 @@ export const Position: StoryFn<PopupProps> = (args) => {
     const [left, setLeft] = React.useState(100);
     const [top, setTop] = React.useState(100);
     const anchorRef = useVirtualElementRef({rect: {top, left}});
+
+    const id = useUniqId();
+
     return (
         <div>
-            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-            <label style={{display: 'flex', alignItems: 'center'}}>
+            <label htmlFor={id + '1'} style={{display: 'flex', alignItems: 'center'}}>
                 x:
                 <TextInput
+                    id={id + '1'}
                     value={String(left)}
                     onUpdate={(value) => {
                         setLeft(Number(value));
@@ -108,10 +111,10 @@ export const Position: StoryFn<PopupProps> = (args) => {
                     style={{width: 100}}
                 />
             </label>
-            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-            <label style={{display: 'flex', alignItems: 'center'}}>
+            <label htmlFor={id + '2'} style={{display: 'flex', alignItems: 'center'}}>
                 y:
                 <TextInput
+                    id={id + '2'}
                     value={String(top)}
                     onUpdate={(value) => {
                         setTop(Number(value));

src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx

@@ -20,10 +20,18 @@ const b = block('table-column-setup');
 
 type Item = TableColumnSetupItem;
 
+interface SwitcherProps {
+    onClick: React.MouseEventHandler<HTMLElement>;
+}
+
 export interface TableColumnSetupProps {
     // for Button
     disabled?: boolean;
+    /**
+     * @deprecated Use renderSwitcher instead
+     */
     switcher?: React.ReactElement | undefined;
+    renderSwitcher?: (props: SwitcherProps) => React.ReactElement | undefined;
 
     // for List
     items: Item[];
@@ -41,6 +49,7 @@ export interface TableColumnSetupProps {
 export const TableColumnSetup = (props: TableColumnSetupProps) => {
     const {
         switcher,
+        renderSwitcher,
         disabled,
         popupWidth,
         popupPlacement,
@@ -201,9 +210,10 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     return (
         <div className={b(null, className)}>
+            {/* 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 className={b('control')} ref={refControl} onClick={handleControlClick}>
-                {switcher || (
+                {renderSwitcher?.({onClick: handleControlClick}) || switcher || (
                     <Button disabled={disabled}>
                         <Icon data={Gear} />
                         {i18n('button_switcher')}

src/components/UserAvatar/UserAvatar.tsx

@@ -35,6 +35,7 @@ export const UserAvatar = React.forwardRef<HTMLDivElement, UserAvatarProps>(
         }, [imgUrl]);
 
         return (
+            // FIXME OnClick deprecated, will be deleted
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div className={b({size}, className)} title={title} onClick={onClick} ref={ref}>
                 <img

src/components/controls/TextInput/AdditionalContent.tsx

@@ -19,6 +19,7 @@ export const AdditionalContent = React.forwardRef<HTMLDivElement, Props>(functio
     }
 
     return (
+        // It is used to focus the control input if non-interaction element is provided.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div ref={ref} className={b('additional-content', {placement})} onClick={onClick}>
             {children}

src/hooks/useOutsideClick/__tests__/Demo.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 
 import {useOutsideClick} from '../useOutsideClick';
@@ -23,9 +22,9 @@ export const Demo = () => {
     return (
         <div>
             <h1>{status}</h1>
-            <div ref={observerRef} onClick={handleClick}>
+            <button ref={observerRef} onClick={handleClick}>
                 {'Target'}
-            </div>
+            </button>
             <div>{'Outside'}</div>
         </div>
     );