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 '../';