From 717e72030e079e5c5fdec8feeb517de830c94924 Mon Sep 17 00:00:00 2001
From: "Mr.Dr.Professor Patrick" <alaev89@yandex-team.ru>
Date: Thu, 1 Jun 2023 14:27:56 +0200
Subject: [PATCH] chore: add eslint a11y rules (#700)

---
 .eslintrc                                                  | 7 ++++++-
 .../ArrowToggle/__stories__/ArrowToggle.stories.tsx        | 1 +
 src/components/Card/Card.tsx                               | 1 +
 src/components/DropdownMenu/DropdownMenu.tsx               | 1 +
 src/components/Label/Label.tsx                             | 1 +
 src/components/Link/Link.tsx                               | 2 ++
 src/components/List/List.tsx                               | 2 ++
 src/components/List/components/ListItem.tsx                | 1 +
 src/components/PersonaWrap/PersonaWrap.tsx                 | 2 ++
 src/components/Popover/components/Trigger/Trigger.tsx      | 1 +
 src/components/Popup/Popup.tsx                             | 1 +
 src/components/Popup/__stories__/Popup.stories.tsx         | 2 ++
 src/components/Sheet/SheetContent.tsx                      | 1 +
 src/components/StoreBadge/StoreBadge.tsx                   | 1 +
 .../components/StoriesPreview/StoriesPreview.tsx           | 3 +++
 .../TableColumnSetup/TableColumnSetup.tsx                  | 1 +
 .../Table/hoc/withTableSorting/withTableSorting.tsx        | 1 +
 src/components/Tabs/__stories__/Tabs.stories.tsx           | 1 +
 .../TextInput/AdditionalContent/AdditionalContent.tsx      | 1 +
 src/components/TextInput/InputControl/InputControl.tsx     | 1 +
 .../TextInput/TextAreaControl/TextAreaControl.tsx          | 1 +
 src/components/UserAvatar/UserAvatar.tsx                   | 1 +
 src/components/utils/__tests__/xpath.test.tsx              | 2 ++
 src/demo/colors/ColorPanel.tsx                             | 1 +
 24 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index 22a614c5e8..00c5a8ed9d 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,5 +1,10 @@
 {
-    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/client", "@gravity-ui/eslint-config/prettier"],
+    "extends": [
+        "@gravity-ui/eslint-config",
+        "@gravity-ui/eslint-config/client",
+        "@gravity-ui/eslint-config/prettier",
+        "@gravity-ui/eslint-config/a11y"
+    ],
     "root": true,
     "rules": {
         "react/jsx-fragments": ["error", "element"],
diff --git a/src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx b/src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx
index 8075864df4..3512a173d7 100644
--- a/src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx
+++ b/src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx
@@ -47,6 +47,7 @@ export const Interactive: Story<ArrowToggleProps> = (args) => {
     const direction = directions[directionIndex % directions.length];
 
     return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <span onClick={() => setDirectionIndex(directionIndex + 1)} style={{cursor: 'pointer'}}>
             <ArrowToggle {...args} size={32} direction={direction} /> <h3>{direction}</h3>
         </span>
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 9aea522d63..d11011ad44 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -59,6 +59,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(pr
     const defaultView = isTypeContainer || isTypeSelection ? 'outlined' : undefined;
 
     return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div
             ref={ref}
             className={b(
diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
index 6bc72c8900..1ab6588d44 100644
--- a/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -136,6 +136,7 @@ const DropdownMenu = <T,>({
 
     return (
         <DropdownMenuContext.Provider value={contextValue}>
+            {/* 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)}
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index a770829f2e..4ca2ffe68a 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -141,6 +141,7 @@ 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}
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index a3ab27752e..8bae811927 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -70,6 +70,7 @@ 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}
@@ -85,6 +86,7 @@ export const Link = React.forwardRef<HTMLElement, LinkProps>(function Link(
                 {...(extraProps as React.HTMLAttributes<HTMLSpanElement>)}
                 {...commonProps}
                 ref={ref as React.Ref<HTMLSpanElement>}
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                 tabIndex={0}
             />
         );
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 5583af9926..cf2b699e59 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -107,6 +107,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
         return (
             <MobileContext.Consumer>
                 {({mobile}) => (
+                    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                     <div
                         className={b({mobile}, className)}
                         data-qa={qa}
@@ -245,6 +246,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                     value={filter}
                     hasClear={true}
                     onUpdate={this.onFilterUpdate}
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
                     autoFocus={autoFocus}
                 />
             </div>
diff --git a/src/components/List/components/ListItem.tsx b/src/components/List/components/ListItem.tsx
index 6ac2b44321..d6bba3e45a 100644
--- a/src/components/List/components/ListItem.tsx
+++ b/src/components/List/components/ListItem.tsx
@@ -21,6 +21,7 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
             this.props;
 
         return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div
                 role="listitem"
                 data-qa={active ? ListQa.ACTIVE_ITEM : undefined}
diff --git a/src/components/PersonaWrap/PersonaWrap.tsx b/src/components/PersonaWrap/PersonaWrap.tsx
index b45e390819..1144b27d6f 100644
--- a/src/components/PersonaWrap/PersonaWrap.tsx
+++ b/src/components/PersonaWrap/PersonaWrap.tsx
@@ -33,11 +33,13 @@ export function PersonaWrap({
     const closeable = Boolean(onClose);
     return (
         <div className={b({size, theme, clickable, closeable, empty: isEmpty}, className)}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div className={b('main')} onClick={onClick}>
                 {avatar && <div className={b('avatar')}>{avatar}</div>}
                 <div className={b('text')}>{children}</div>
             </div>
             {onClose && (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                 <div className={b('close')} onClick={onClose}>
                     <Icon data={CrossIcon} size={8} />
                 </div>
diff --git a/src/components/Popover/components/Trigger/Trigger.tsx b/src/components/Popover/components/Trigger/Trigger.tsx
index 01ad3e4773..d9e521bd64 100644
--- a/src/components/Popover/components/Trigger/Trigger.tsx
+++ b/src/components/Popover/components/Trigger/Trigger.tsx
@@ -66,5 +66,6 @@ export const Trigger = ({
         toggleTooltip();
     };
 
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     return <span onClick={handleClick}>{children}</span>;
 };
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
index 831ff7cf78..dbb1f101ce 100644
--- a/src/components/Popup/Popup.tsx
+++ b/src/components/Popup/Popup.tsx
@@ -130,6 +130,7 @@ export function Popup({
                     {...containerProps}
                     className={bWrapper({open})}
                 >
+                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
                     <div
                         onClick={onClick}
                         onMouseEnter={onMouseEnter}
diff --git a/src/components/Popup/__stories__/Popup.stories.tsx b/src/components/Popup/__stories__/Popup.stories.tsx
index fcdfa772e7..c4c88f47a9 100644
--- a/src/components/Popup/__stories__/Popup.stories.tsx
+++ b/src/components/Popup/__stories__/Popup.stories.tsx
@@ -95,6 +95,7 @@ export const Position: Story<PopupProps> = (args) => {
     const anchorRef = useVirtualElementRef({rect: {top, left}});
     return (
         <div>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
             <label style={{display: 'flex', alignItems: 'center'}}>
                 x:
                 <TextInput
@@ -107,6 +108,7 @@ export const Position: Story<PopupProps> = (args) => {
                     style={{width: 100}}
                 />
             </label>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
             <label style={{display: 'flex', alignItems: 'center'}}>
                 y:
                 <TextInput
diff --git a/src/components/Sheet/SheetContent.tsx b/src/components/Sheet/SheetContent.tsx
index 37fe5ef54c..c4797c0cc4 100644
--- a/src/components/Sheet/SheetContent.tsx
+++ b/src/components/Sheet/SheetContent.tsx
@@ -139,6 +139,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
 
         return (
             <React.Fragment>
+                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
                 <div
                     ref={this.veilRef}
                     className={sheetBlock('veil', veilTransitionMod)}
diff --git a/src/components/StoreBadge/StoreBadge.tsx b/src/components/StoreBadge/StoreBadge.tsx
index fcf5b3b6cd..292309ef43 100644
--- a/src/components/StoreBadge/StoreBadge.tsx
+++ b/src/components/StoreBadge/StoreBadge.tsx
@@ -28,6 +28,7 @@ export function StoreBadge({
     alt,
 }: StoreBadgeProps) {
     if (!url) {
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         return <img className={b({platform, lang}, className)} onClick={onClick} alt={alt} />;
     }
 
diff --git a/src/components/StoriesGroup/components/StoriesPreview/StoriesPreview.tsx b/src/components/StoriesGroup/components/StoriesPreview/StoriesPreview.tsx
index 9e6f864d67..fd61d07733 100644
--- a/src/components/StoriesGroup/components/StoriesPreview/StoriesPreview.tsx
+++ b/src/components/StoriesGroup/components/StoriesPreview/StoriesPreview.tsx
@@ -38,6 +38,7 @@ const PreviewItem = ({active, disabled, groupIndex, media, onSelectGroup}: Previ
     );
 
     return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div
             className={b('stories-preview-item', {
                 active,
@@ -195,6 +196,7 @@ export const StoriesPreview = ({
 
     if (groups.length < maxSliderItemsCount) {
         return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div className={b()} onClick={handleClose}>
                 <StoriesPreviewList
                     groupIndex={groupIndex}
@@ -206,6 +208,7 @@ export const StoriesPreview = ({
     }
 
     return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div className={b()} onClick={handleClose}>
             <StoriesPreviewListWithSlider
                 maxSliderItemsCount={maxSliderItemsCount}
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
index 1e2d4b6cba..4e83a0640e 100644
--- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
+++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -200,6 +200,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     return (
         <div className={b(null, className)}>
+            {/* 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 || (
                     <Button disabled={disabled}>
diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
index 20fd5dcd3b..8a287bd97f 100644
--- a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
+++ b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
@@ -147,6 +147,7 @@ export function withTableSorting<I extends TableDataItem, E extends {} = {}>(
                             }
 
                             return (
+                                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                                 <div
                                     className={b('sort', {active: Boolean(sortOrder)})}
                                     onClick={this.handleColumnSortClick.bind(this, column)}
diff --git a/src/components/Tabs/__stories__/Tabs.stories.tsx b/src/components/Tabs/__stories__/Tabs.stories.tsx
index 62772ab1b0..d78c3cf9ea 100644
--- a/src/components/Tabs/__stories__/Tabs.stories.tsx
+++ b/src/components/Tabs/__stories__/Tabs.stories.tsx
@@ -67,6 +67,7 @@ export const WithWrapTo = Template.bind({});
 WithWrapTo.args = {
     wrapTo(_item: TabsItemProps, node: React.ReactNode) {
         return (
+            // eslint-disable-next-line jsx-a11y/anchor-is-valid
             <a key={_item.id} href="#">
                 {node}
             </a>
diff --git a/src/components/TextInput/AdditionalContent/AdditionalContent.tsx b/src/components/TextInput/AdditionalContent/AdditionalContent.tsx
index 1700b3084f..e3cb455cf4 100644
--- a/src/components/TextInput/AdditionalContent/AdditionalContent.tsx
+++ b/src/components/TextInput/AdditionalContent/AdditionalContent.tsx
@@ -19,6 +19,7 @@ export const AdditionalContent = React.forwardRef<HTMLDivElement, Props>(functio
     }
 
     return (
+        // 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}
         </div>
diff --git a/src/components/TextInput/InputControl/InputControl.tsx b/src/components/TextInput/InputControl/InputControl.tsx
index 7837f5e8f0..3f2c05e11f 100644
--- a/src/components/TextInput/InputControl/InputControl.tsx
+++ b/src/components/TextInput/InputControl/InputControl.tsx
@@ -43,6 +43,7 @@ export function InputControl(props: InputControlProps) {
             placeholder={placeholder}
             value={value}
             defaultValue={defaultValue}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={autoFocus}
             autoComplete={autoComplete}
             onChange={onChange}
diff --git a/src/components/TextInput/TextAreaControl/TextAreaControl.tsx b/src/components/TextInput/TextAreaControl/TextAreaControl.tsx
index 6560bd4241..0d784eafb1 100644
--- a/src/components/TextInput/TextAreaControl/TextAreaControl.tsx
+++ b/src/components/TextInput/TextAreaControl/TextAreaControl.tsx
@@ -91,6 +91,7 @@ export function TextAreaControl(props: TextAreaControlProps) {
             value={value}
             defaultValue={defaultValue}
             rows={textareaRows}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={autoFocus}
             autoComplete={autoComplete}
             onChange={handleChange}
diff --git a/src/components/UserAvatar/UserAvatar.tsx b/src/components/UserAvatar/UserAvatar.tsx
index 9a48dc078f..8b68e9cc9f 100644
--- a/src/components/UserAvatar/UserAvatar.tsx
+++ b/src/components/UserAvatar/UserAvatar.tsx
@@ -30,6 +30,7 @@ export function UserAvatar({
     onClick,
 }: UserAvatarProps) {
     return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div title={title} className={b({size}, className)} onClick={onClick}>
             <img
                 className={b('figure')}
diff --git a/src/components/utils/__tests__/xpath.test.tsx b/src/components/utils/__tests__/xpath.test.tsx
index c4bf6c8bcd..4eeb386967 100644
--- a/src/components/utils/__tests__/xpath.test.tsx
+++ b/src/components/utils/__tests__/xpath.test.tsx
@@ -1,3 +1,5 @@
+/* eslint jsx-a11y/click-events-have-key-events: 0, jsx-a11y/no-static-element-interactions: 0 */
+
 import React from 'react';
 
 import {render, screen} from '@testing-library/react';
diff --git a/src/demo/colors/ColorPanel.tsx b/src/demo/colors/ColorPanel.tsx
index 356907556e..293cb7cd37 100644
--- a/src/demo/colors/ColorPanel.tsx
+++ b/src/demo/colors/ColorPanel.tsx
@@ -54,6 +54,7 @@ export function ColorPanel(props: ColorPanelProps) {
 
     return (
         <div className={`color-panel color-panel_bg_${BACKGROUND_LIST[currentBackgroundIndex]}`}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div className="color-panel__bg-switcher" onClick={() => rotateBackground()}>
                 BG
             </div>