fix: improve a11y on some components

src/components/DropdownMenu/DropdownMenu.tsx

@@ -137,6 +137,7 @@ const DropdownMenu = <T,>({
 
     return (
         <DropdownMenuContext.Provider value={contextValue}>
+            {/* It is used to handle clicks on the switcher control */}
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div
                 ref={anchorRef}

src/components/Link/Link.tsx

@@ -75,23 +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>}
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                role="link"
                 tabIndex={0}
             />
         );

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

@@ -5,6 +5,7 @@ import type {Meta, StoryFn} from '@storybook/react';
 import {useVirtualElementRef} from '../../../hooks';
 import {Button} from '../../Button';
 import {TextInput} from '../../controls';
+import {useUniqId} from '../../utils/useUniqId';
 import {Popup} from '../Popup';
 import type {PopupPlacement, PopupProps} from '../Popup';
 
@@ -93,12 +94,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 +112,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

@@ -201,6 +201,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     return (
         <div className={b(null, className)}>
+            {/* It is used to handle clicks on the switcher control */}
             {/* 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 || (

src/components/UserAvatar/UserAvatar.scss

@@ -14,6 +14,16 @@ $block: '.#{variables.$ns}user-avatar';
     background-position: center;
     background-size: cover;
 
+    outline: none;
+
+    &:focus {
+        box-shadow: 0 0 0 2px var(--g-color-line-focus);
+    }
+
+    &:focus:not(:focus-visible) {
+        box-shadow: none;
+    }
+
     &_size {
         &_xs {
             width: 24px;

src/components/UserAvatar/UserAvatar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {block} from '../utils/cn';
+import {useActionHandlers} from '../utils/useActionHandlers';
 
 import {SIZES} from './constants';
 import type {UserAvatarSize} from './types';
@@ -34,9 +35,18 @@ export const UserAvatar = React.forwardRef<HTMLDivElement, UserAvatarProps>(
             setIsErrored(false);
         }, [imgUrl]);
 
+        const {onKeyDown} = useActionHandlers(onClick);
+
         return (
-            // 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}>
+            <div
+                role="button"
+                tabIndex={0}
+                onKeyDown={onKeyDown}
+                className={b({size}, className)}
+                title={title}
+                onClick={onClick}
+                ref={ref}
+            >
                 <img
                     className={b('figure')}
                     width={SIZES[size]}

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}