chore: add eslint a11y rules (#700)

gravity-ui · Jun 1, 2023 · 717e720 · 717e720
1 parent 0782734
commit 717e720
Show file tree

Hide file tree

Showing 24 changed files with 36 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>