diff --git a/.eslintrc b/.eslintrc index 103ffb8fa6..18ebd9749e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -18,7 +18,8 @@ "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']", "message": "Don't use React.FC" } - ] + ], + "jsx-a11y/no-autofocus": 0 }, "overrides": [ { diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx index 4aaaf9190d..1554f99d6e 100644 --- a/src/components/DropdownMenu/DropdownMenu.tsx +++ b/src/components/DropdownMenu/DropdownMenu.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {Ellipsis} from '@gravity-ui/icons'; +import {useActionHandlers} from '../../hooks/useActionHandlers'; import {Button} from '../Button'; import type {ButtonProps} from '../Button'; import {Icon} from '../Icon'; @@ -28,6 +29,7 @@ import {toItemList} from './utils/toItemList'; import './DropdownMenu.scss'; type SwitcherProps = { + onKeyDown: React.KeyboardEventHandler; onClick: React.MouseEventHandler; }; @@ -145,6 +147,8 @@ const DropdownMenu = ({ togglePopup(); }; + const {onKeyDown: handleSwitcherKeyDown} = useActionHandlers(handleSwitcherClick); + return ( {/* FIXME remove switcher prop and this wrapper */} @@ -154,18 +158,22 @@ const DropdownMenu = ({ className={cnDropdownMenu('switcher-wrapper', switcherWrapperClassName)} onClick={handleSwitcherClick} > - {renderSwitcher?.({onClick: handleSwitcherClick}) || switcher || ( - - )} + {renderSwitcher?.({ + onClick: handleSwitcherClick, + onKeyDown: handleSwitcherKeyDown, + }) || + switcher || ( + + )} (function Label const hasOnClick = Boolean(onClick); const hasCopy = Boolean(typeCopy && copyText); - const isInteractive = hasOnClick || hasCopy || interactive; + const isInteractive = (hasOnClick || hasCopy || interactive) && !disabled; const {copyIconSize, closeIconSize, buttonSize} = sizeMap[size]; const leftIcon = icon && ( @@ -173,7 +173,7 @@ export const Label = React.forwardRef(function Label return (
(function Label ); }; - if (hasCopy && copyText) { + if (hasCopy && copyText && !hasOnClick) { return ( {(status) => renderLabel(status)} diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx index 390768d4cc..f688d2fd00 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -293,7 +293,6 @@ export class List extends React.Component, ListState
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index ffd1833a03..9dea57c9d7 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -132,7 +132,6 @@ export function Modal({
= () => { autoclosable={false} openOnHover={false} focusTrap - // eslint-disable-next-line jsx-a11y/no-autofocus autoFocus restoreFocusRef={ref} > diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx index af1d3102df..5efdae28e2 100644 --- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx +++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx @@ -3,6 +3,7 @@ import React from 'react'; import {Gear} from '@gravity-ui/icons'; import type {PopperPlacement} from '../../../../../components/utils/usePopper'; +import {useActionHandlers} from '../../../../../hooks/useActionHandlers'; import {Button} from '../../../../Button'; import {Icon} from '../../../../Icon'; import {List} from '../../../../List'; @@ -21,6 +22,7 @@ const b = block('table-column-setup'); type Item = TableColumnSetupItem; interface SwitcherProps { + onKeyDown: React.KeyboardEventHandler; onClick: React.MouseEventHandler; } @@ -208,18 +210,21 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => { ); }; + const {onKeyDown: handleControlKeyDown} = useActionHandlers(handleControlClick); + return (
{/* FIXME remove switcher prop and this wrapper */} {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
- {renderSwitcher?.({onClick: handleControlClick}) || switcher || ( - - )} + {renderSwitcher?.({onClick: handleControlClick, onKeyDown: handleControlKeyDown}) || + switcher || ( + + )}