From e5378e9c50371365838a656eea437a0dec70cecd Mon Sep 17 00:00:00 2001 From: Pavel Kovirshin <45898580+PahaN47@users.noreply.github.com> Date: Fri, 15 Nov 2024 16:53:34 +0300 Subject: [PATCH] fix: eslint a11y rules (#1079) * fix: eslint a11y rules * fix: tests --- .../QuestionBlockItem/QuestionBlockItem.scss | 4 +++ .../QuestionBlockItem/QuestionBlockItem.tsx | 8 ++--- src/components/ImageBase/ImageBase.tsx | 7 ++--- src/components/OutsideClick/OutsideClick.tsx | 18 +++++++---- src/components/ReactPlayer/ReactPlayer.tsx | 21 +++++++++---- src/components/Title/TitleItem.scss | 1 + src/components/Title/TitleItem.tsx | 8 ++--- src/components/VideoBlock/VideoBlock.tsx | 22 +++++++++----- src/editor/components/AddBlock/AddBlock.scss | 2 ++ src/editor/components/AddBlock/AddBlock.tsx | 8 ++--- .../components/EditBlock/EditBlock.scss | 1 + src/editor/components/EditBlock/EditBlock.tsx | 30 +++++++++++++------ .../CustomComponent/CustomComponent.tsx | 17 +++++++---- 13 files changed, 93 insertions(+), 54 deletions(-) diff --git a/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss b/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss index b2aebc83c..b04158efa 100644 --- a/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss +++ b/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss @@ -12,11 +12,15 @@ $block: '.#{$ns}QuestionsBlockItem'; } &__title { + @include reset-button-style(); @include heading4(); @include focusable(); position: relative; + display: block; + width: 100%; padding-right: 24px; + text-align: start; cursor: pointer; border-radius: var(--g-focus-border-radius); diff --git a/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.tsx b/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.tsx index 94154b282..24f92cdad 100644 --- a/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.tsx +++ b/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.tsx @@ -30,14 +30,10 @@ export const QuestionBlockItem = ({ itemType={FaqMicrodataValues.QuestionType} role={'listitem'} > -

{itemTitle} @@ -48,7 +44,7 @@ export const QuestionBlockItem = ({ iconType="navigation" className={b('arrow')} /> -

+
{ onError?: () => void; } -export const ImageBase = ({fetchPriority, ...props}: ImageBaseProps) => { +export const ImageBase = ({fetchPriority, alt, ...props}: ImageBaseProps) => { const {Image} = React.useContext(ImageContext); return Image ? ( - + {alt} ) : ( // There is an issue with fetchpriority attr in img in React. // It is still not supported. However it's nice to have ability to manage // this prop is good to have to improve Core Web Vitals. // So, here is a workaround to assign the attr. - // eslint-disable-next-line jsx-a11y/alt-text - + {alt} ); }; diff --git a/src/components/OutsideClick/OutsideClick.tsx b/src/components/OutsideClick/OutsideClick.tsx index bd35061d4..3f03a67b2 100644 --- a/src/components/OutsideClick/OutsideClick.tsx +++ b/src/components/OutsideClick/OutsideClick.tsx @@ -1,10 +1,8 @@ -/* 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'; +import noop from 'lodash/noop'; + export interface OutsideClickProps { onOutsideClick: () => void; className?: string; @@ -23,9 +21,17 @@ export default class OutsideClick extends React.Component +
{children}
); diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 2cdd4cfb0..3db92afd4 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -1,7 +1,3 @@ -/* 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, @@ -110,6 +106,7 @@ export const ReactPlayerBlock = React.forwardRef(null); + const buttonRef = useRef(null); const [playerRef, setPlayerRef] = useState(); const [isPlaying, setIsPlaying] = useState(autoPlay); @@ -247,6 +244,7 @@ export const ReactPlayerBlock = React.forwardRef {playButtonContent} @@ -365,6 +363,8 @@ export const ReactPlayerBlock = React.forwardRef { + buttonRef.current?.click(); + if (controls === MediaVideoControlsType.Custom) { if (customControlsType === CustomControlsType.WithMuteButton) { changeMute(muted); @@ -372,7 +372,15 @@ export const ReactPlayerBlock = React.forwardRef { + const key = e.key.toLowerCase(); + + if (key === 'enter') { + buttonRef.current?.click(); + } + }, []); const onFocusIn = useCallback(() => setHovered(true), []); const onFocusOut = useCallback(() => setHovered(false), []); @@ -394,6 +402,9 @@ export const ReactPlayerBlock = React.forwardRef {isMounted ? ( diff --git a/src/components/Title/TitleItem.scss b/src/components/Title/TitleItem.scss index e2307a9f7..014af0916 100644 --- a/src/components/Title/TitleItem.scss +++ b/src/components/Title/TitleItem.scss @@ -39,6 +39,7 @@ $block: '.#{$ns}title-item'; } &__link { + @include reset-button-style(); @include reset-link-style(); @include reset-link-hover(); @include focusable(); diff --git a/src/components/Title/TitleItem.tsx b/src/components/Title/TitleItem.tsx index c9ad122ce..6213b65fe 100644 --- a/src/components/Title/TitleItem.tsx +++ b/src/components/Title/TitleItem.tsx @@ -1,7 +1,3 @@ -/* 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 '../'; @@ -97,9 +93,9 @@ const TitleItem = (props: TitleItemFullProps) => { ); } else if (onClick) { content = ( - + ); } diff --git a/src/components/VideoBlock/VideoBlock.tsx b/src/components/VideoBlock/VideoBlock.tsx index 358ceef2f..5c0e1561b 100644 --- a/src/components/VideoBlock/VideoBlock.tsx +++ b/src/components/VideoBlock/VideoBlock.tsx @@ -1,11 +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, useMemo, useRef, useState} from 'react'; import {PlayFill} from '@gravity-ui/icons'; -import {Icon} from '@gravity-ui/uikit'; +import {Icon, useActionHandlers, useUniqId} from '@gravity-ui/uikit'; import debounce from 'lodash/debounce'; import {v4 as uuidv4} from 'uuid'; @@ -65,6 +61,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase { className?: string; previewImg?: string; playButton?: React.ReactNode; + playButtonId?: string; height?: number; fullscreen?: boolean; autoplay?: boolean; @@ -81,6 +78,7 @@ const VideoBlock = (props: VideoBlockProps) => { id, previewImg, playButton, + playButtonId, height, fullscreen, analyticsEvents, @@ -94,6 +92,7 @@ const VideoBlock = (props: VideoBlockProps) => { const [hidePreview, setHidePreview] = useState(false); const [currentHeight, setCurrentHeight] = useState(height || undefined); const fullId = useMemo(() => id || uuidv4(), [id]); + const buttonId = useUniqId(); const [isPlaying, setIsPlaying] = useState(!previewImg); @@ -113,6 +112,8 @@ const VideoBlock = (props: VideoBlockProps) => { setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY); }, [handleAnalytics, analyticsEvents]); + const {onKeyDown: onPreviewKeyDown} = useActionHandlers(onPreviewClick); + useEffect(() => { const updateSize = debounce(() => { setCurrentHeight( @@ -155,7 +156,14 @@ const VideoBlock = (props: VideoBlockProps) => {
{iframeContent} {previewImg && !hidePreview && !fullscreen && ( -
+
{ onLoad={onImageLoad} /> {playButton || ( - )} diff --git a/src/editor/components/AddBlock/AddBlock.scss b/src/editor/components/AddBlock/AddBlock.scss index ceaf78958..3c4a7fa65 100644 --- a/src/editor/components/AddBlock/AddBlock.scss +++ b/src/editor/components/AddBlock/AddBlock.scss @@ -57,10 +57,12 @@ $block: '.#{$ns}add-block'; } #{$block}__block { + @include reset-button-style(); @include control(); margin-top: $indentS; justify-content: flex-start; + text-align: start; cursor: pointer; &:first-child { diff --git a/src/editor/components/AddBlock/AddBlock.tsx b/src/editor/components/AddBlock/AddBlock.tsx index 7d82a940d..ba62ad86d 100644 --- a/src/editor/components/AddBlock/AddBlock.tsx +++ b/src/editor/components/AddBlock/AddBlock.tsx @@ -1,7 +1,3 @@ -/* 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, useEffect, useMemo, useRef, useState} from 'react'; import {Plus} from '@gravity-ui/icons'; @@ -91,7 +87,7 @@ const AddBlock = ({onAdd, className}: PropsWithChildren) => { blockData.preview; return ( -
{ @@ -110,7 +106,7 @@ const AddBlock = ({onAdd, className}: PropsWithChildren) => {

)}
-
+ ); })}
diff --git a/src/editor/components/EditBlock/EditBlock.scss b/src/editor/components/EditBlock/EditBlock.scss index fa68531ec..ab8185dd6 100644 --- a/src/editor/components/EditBlock/EditBlock.scss +++ b/src/editor/components/EditBlock/EditBlock.scss @@ -55,6 +55,7 @@ $block: '.#{$ns}edit-block'; } &__control { + @include reset-button-style(); @include control($hoverScale: 1.1); width: $controlIconWidth; diff --git a/src/editor/components/EditBlock/EditBlock.tsx b/src/editor/components/EditBlock/EditBlock.tsx index 82623e25a..45ae0d96e 100644 --- a/src/editor/components/EditBlock/EditBlock.tsx +++ b/src/editor/components/EditBlock/EditBlock.tsx @@ -1,10 +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 React, {useEffect, useMemo, useRef} from 'react'; import {ChevronDown, ChevronUp, Copy as CopyIcon, TrashBin} from '@gravity-ui/icons'; +import {useActionHandlers} from '@gravity-ui/uikit'; import {block} from '../../../utils'; import {EditBlockProps} from '../../types'; @@ -48,6 +45,13 @@ const EditBlock = ({ }: EditBlockProps) => { const ref = useRef(null); + const stopPropagationProps = useMemo( + () => ({onClick: (e: React.MouseEvent) => e.stopPropagation()}), + [], + ); + + const {onKeyDown} = useActionHandlers(onSelect); + useEffect(() => { if (isActive && ref.current) { //TODO: add behavior 'smooth' after addiiton of dynamic form layout open/close managing support @@ -56,7 +60,15 @@ const EditBlock = ({ }, [isActive]); return ( -
+
{isActive && ( -
e.stopPropagation()}> +
{actionsOrder.map((action) => { const Icon = editBlockControlsIcons[action]; return actions[action] ? ( -
-
+ ) : null; })}
diff --git a/src/navigation/__stories__/CustomComponent/CustomComponent.tsx b/src/navigation/__stories__/CustomComponent/CustomComponent.tsx index 60f493f6e..c236f2c42 100644 --- a/src/navigation/__stories__/CustomComponent/CustomComponent.tsx +++ b/src/navigation/__stories__/CustomComponent/CustomComponent.tsx @@ -1,9 +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 {useActionHandlers} from '@gravity-ui/uikit'; + import {cn} from '../../../utils'; import {NavigationItemProps} from '../../models'; @@ -18,8 +16,17 @@ type DCDropdownNavigationItemProps = Pick< export const CustomComponent: React.FC = (props) => { const {onClick, isActive, menuLayout} = props; + + const {onKeyDown} = useActionHandlers(onClick); + return ( -
+
{`Custom Item (${menuLayout}${isActive ? ' - active' : ''})`}
);