feat(FilePreview): fix issues

gravity-ui · Oct 30, 2023 · 5b4bd69 · 5b4bd69
1 parent 29f9909
commit 5b4bd69
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 49 deletions.
diff --git 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
@@ -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<HTMLElement>;
     onClick: React.MouseEventHandler<HTMLElement>;
 };
 
@@ -145,6 +147,8 @@ const DropdownMenu = <T,>({
         togglePopup();
     };
 
+    const {onKeyDown: handleSwitcherKeyDown} = useActionHandlers(handleSwitcherClick);
+
     return (
         <DropdownMenuContext.Provider value={contextValue}>
             {/* FIXME remove switcher prop and this wrapper */}
@@ -154,18 +158,22 @@ const DropdownMenu = <T,>({
                 className={cnDropdownMenu('switcher-wrapper', switcherWrapperClassName)}
                 onClick={handleSwitcherClick}
             >
-                {renderSwitcher?.({onClick: handleSwitcherClick}) || switcher || (
-                    <Button
-                        view="flat"
-                        size={size}
-                        onClick={handleSwitcherClick}
-                        {...defaultSwitcherProps}
-                        className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
-                        disabled={disabled}
-                    >
-                        {icon}
-                    </Button>
-                )}
+                {renderSwitcher?.({
+                    onClick: handleSwitcherClick,
+                    onKeyDown: handleSwitcherKeyDown,
+                }) ||
+                    switcher || (
+                        <Button
+                            view="flat"
+                            size={size}
+                            onClick={handleSwitcherClick}
+                            {...defaultSwitcherProps}
+                            className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
+                            disabled={disabled}
+                        >
+                            {icon}
+                        </Button>
+                    )}
             </div>
             <DropdownMenuNavigationContextProvider anchorRef={anchorRef} disabled={!isPopupShown}>
                 <DropdownMenuPopup

diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -14,30 +14,14 @@ $transitionTimingFunction: ease-in-out;
         border: var(--border-size) solid #{$borderColor};
     }
 
-    // focus on interactive label (excluding focus on addon)
-    &:not(#{$disabled})#{$block}_is-interactive:focus:not(
-            :has(#{$block}__addon_interactive:focus)
-        ) {
-        box-shadow: 0 0 0 2px var(--g-color-line-focus);
-    }
-
-    //fallback for old browsers
-    &:not(#{$disabled})#{$block}_is-interactive:focus:not(
-            :has(#{$block}__addon_interactive:focus)
-        ):not(:focus-visible) {
-        box-shadow: none;
-    }
-
     // hover on interactive label (excluding hover on addon)
-    &:not(#{$disabled})#{$block}_is-interactive:hover:not(
-            :has(#{$block}__addon_interactive:hover)
-        ) {
+    #{$block}_is-interactive:hover:not(:has(#{$block}__addon_interactive:hover)) {
         background-color: #{$bgHoverColor};
     }
 
     //fallback for old browsers
     @supports not selector(:has(*)) {
-        &:not(#{$disabled})#{$block}_is-interactive:hover {
+        #{$block}_is-interactive:hover {
             background-color: #{$bgHoverColor};
         }
     }
@@ -163,6 +147,16 @@ $transitionTimingFunction: ease-in-out;
         outline: none;
     }
 
+    // focus on interactive label (excluding focus on addon)
+    &_is-interactive:focus:not(:has(#{$block}__addon_interactive:focus)) {
+        outline: 2px solid var(--g-color-line-focus);
+    }
+
+    //fallback for old browsers
+    &_is-interactive:focus:not(:has(#{$block}__addon_interactive:focus)):not(:focus-visible) {
+        box-shadow: none;
+    }
+
     &_theme {
         &_normal {
             @include themeState(

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -96,7 +96,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(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<HTMLDivElement, LabelProps>(function Label
         return (
             <div
                 ref={ref}
-                role={hasOnClick ? 'role' : undefined}
+                role={hasOnClick ? 'button' : undefined}
                 tabIndex={hasOnClick ? 0 : undefined}
                 onClick={hasOnClick ? handleClick : undefined}
                 onKeyDown={hasOnClick ? onKeyDown : undefined}
@@ -197,7 +197,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         );
     };
 
-    if (hasCopy && copyText) {
+    if (hasCopy && copyText && !hasOnClick) {
         return (
             <CopyToClipboard text={copyText} onCopy={onCopy} timeout={1000}>
                 {(status) => renderLabel(status)}

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -293,7 +293,6 @@ 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/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -132,7 +132,6 @@ export function Modal({
                         <div className={b('cell')}>
                             <FocusTrap
                                 enabled={!disableFocusTrap && focusTrap && open && !inTransition}
-                                // eslint-disable-next-line jsx-a11y/no-autofocus
                                 autoFocus={!disableAutoFocus && autoFocus}
                             >
                                 <div

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -126,7 +126,6 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
             qa={qa ? `${qa}-tooltip` : ''}
             disablePortal={disablePortal}
             focusTrap={focusTrap}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={autoFocus}
             restoreFocus={true}
             restoreFocusRef={restoreFocusRef || controlRef}

diff --git a/src/components/Popover/__stories__/Popover.stories.tsx b/src/components/Popover/__stories__/Popover.stories.tsx
@@ -243,7 +243,6 @@ const AccessibleTemplate: StoryFn<PopoverProps> = () => {
                 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
@@ -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<HTMLElement>;
     onClick: React.MouseEventHandler<HTMLElement>;
 }
 
@@ -208,18 +210,21 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
         );
     };
 
+    const {onKeyDown: handleControlKeyDown} = useActionHandlers(handleControlClick);
+
     return (
         <div className={b(null, className)}>
             {/* FIXME remove switcher prop and this wrapper */}
             {/* 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}>
-                {renderSwitcher?.({onClick: handleControlClick}) || switcher || (
-                    <Button disabled={disabled}>
-                        <Icon data={Gear} />
-                        {i18n('button_switcher')}
-                        {renderStatus()}
-                    </Button>
-                )}
+                {renderSwitcher?.({onClick: handleControlClick, onKeyDown: handleControlKeyDown}) ||
+                    switcher || (
+                        <Button disabled={disabled}>
+                            <Icon data={Gear} />
+                            {i18n('button_switcher')}
+                            {renderStatus()}
+                        </Button>
+                    )}
             </div>
             <Popup
                 anchorRef={refControl}

diff --git a/src/components/controls/TextArea/TextAreaControl.tsx b/src/components/controls/TextArea/TextAreaControl.tsx
@@ -100,8 +100,6 @@ export function TextAreaControl(props: Props) {
             value={value}
             defaultValue={defaultValue}
             rows={textareaRows}
-            // TextArea provides this functionality for its user. False by default
-            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={autoFocus}
             autoComplete={autoComplete}
             onChange={onChange}

diff --git a/src/components/controls/TextInput/TextInputControl.tsx b/src/components/controls/TextInput/TextInputControl.tsx
@@ -44,8 +44,6 @@ export function TextInputControl(props: Props) {
             placeholder={placeholder}
             value={value}
             defaultValue={defaultValue}
-            // TextInput provides this functionality for its user. False by default
-            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={autoFocus}
             autoComplete={autoComplete}
             onChange={onChange}