fix: enable a11y eslint rules (#968)

* fix: enable a11y eslint rules

* fix: comments fixies

Author: NikitaCG

.eslintrc

@@ -1,5 +1,9 @@
 {
-    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/prettier"],
+    "extends": [
+        "@gravity-ui/eslint-config",
+        "@gravity-ui/eslint-config/prettier",
+        "@gravity-ui/eslint-config/a11y"
+    ],
     "root": true,
     "env": {
         "node": true,

package-lock.json

@@ -124,7 +124,7 @@
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@diplodoc/transform": "^4.10.8",
-    "@gravity-ui/eslint-config": "^2.0.0",
+    "@gravity-ui/eslint-config": "^2.2.0",
     "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",

package.json

@@ -34,6 +34,8 @@ export const QuestionBlockItem = ({
                 className={b('title')}
                 onClick={onClick}
                 aria-expanded={isOpened}
+                // TODO fix in https://github.com/gravity-ui/page-constructor/issues/966
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
                 role={'button'}
                 tabIndex={0}
                 onKeyDown={onKeyDown}

src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+// TODO fix in https://github.com/gravity-ui/page-constructor/issues/967
 import React, {Fragment, useCallback, useImperativeHandle, useRef, useState} from 'react';
 
 import {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';

src/components/DefaultVideo/DefaultVideo.tsx

@@ -14,6 +14,7 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
 export const ImageBase = (props: ImageBaseProps) => {
     const {Image} = React.useContext(ImageContext);
 
+    // eslint-disable-next-line jsx-a11y/alt-text
     return Image ? <Image {...props} /> : <img {...props} />;
 };
 

src/components/ImageBase/ImageBase.tsx

@@ -11,6 +11,8 @@ interface ApiKeyInputProps {
     id: string;
 }
 
+const inputID = 'apikey-input';
+
 export const ApiKeyInput = (props: ApiKeyInputProps) => {
     const {id} = props;
     const [apiKey, setApiKey] = useState<string>(localStorage?.getItem(id) || '');
@@ -31,9 +33,12 @@ export const ApiKeyInput = (props: ApiKeyInputProps) => {
 
     return (
         <div>
-            <label style={{display: 'block'}}>Api key for google maps</label>
+            <label style={{display: 'block'}} htmlFor={inputID}>
+                Api key for google maps
+            </label>
             <div style={{display: 'flex'}}>
                 <TextInput
+                    id={inputID}
                     type="text"
                     className="apikey-input"
                     value={apiKey}

src/components/Map/__stories__/ApiKeyInput.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
+
 //TODO move into cloud components?
 import React, {PropsWithChildren, createRef} from 'react';
 

src/components/OutsideClick/OutsideClick.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
+
 import React, {
     Fragment,
     useCallback,

src/components/ReactPlayer/ReactPlayer.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
+
 import React, {Fragment, ReactNode, useContext} from 'react';
 
 import {HTML, ToggleArrow} from '../';

src/components/Title/TitleItem.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
+
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 import {PlayFill} from '@gravity-ui/icons';

src/components/VideoBlock/VideoBlock.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
+
 import React, {PropsWithChildren, useMemo, useRef, useState} from 'react';
 
 import {Plus} from '@gravity-ui/icons';

src/editor/components/AddBlock/AddBlock.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
+
 import React, {useEffect, useRef} from 'react';
 
 import {ChevronDown, ChevronUp, Copy as CopyIcon, TrashBin} from '@gravity-ui/icons';

src/editor/components/EditBlock/EditBlock.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
+
 import React from 'react';
 
 import {cn} from '../../../utils';

src/navigation/__stories__/CustomComponent/CustomComponent.tsx

@@ -20,7 +20,7 @@ const List = (props: ListProps) => {
         <Fragment>
             {items.map((item, id) => (
                 <div key={id} className={b('list-item')}>
-                    <img className={b('img')} />
+                    <img className={b('img')} alt="" />
                     <div className={b('text', {size: titleSize})}>
                         <YFMWrapper content={item.text} modifiers={{constructor: true}} />
                     </div>