fix: add tags and fix Label component

gravity-ui · Oct 10, 2023 · 501d905 · 501d905
1 parent d4de1b5
commit 501d905
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 30 deletions.
diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -137,7 +137,7 @@ const DropdownMenu = <T,>({
 
     return (
         <DropdownMenuContext.Provider value={contextValue}>
-            {/* It is used to handle clicks on the switcher control */}
+            {/* FIXME change to renderProp or provide component's context */}
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div
                 ref={anchorRef}

diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -14,6 +14,20 @@ $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)
@@ -146,6 +160,7 @@ $transitionTimingFunction: ease-in-out;
 
     &_is-interactive {
         cursor: pointer;
+        outline: none;
     }
 
     &_theme {

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -8,6 +8,7 @@ import {ClipboardIcon} from '../ClipboardIcon';
 import {CopyToClipboard, CopyToClipboardStatus} from '../CopyToClipboard';
 import {Icon} from '../Icon';
 import {block} from '../utils/cn';
+import {useActionHandlers} from '../utils/useActionHandlers';
 
 import './Label.scss';
 
@@ -86,6 +87,8 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         onClick,
     } = props;
 
+    const actionButtonRef = React.useRef<HTMLButtonElement>(null);
+
     const hasContent = Boolean(children !== '' && React.Children.count(children) > 0);
 
     const typeClose = type === 'close' && hasContent;
@@ -122,12 +125,25 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         }
     };
 
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        /**
+         * Triggered only if the handler was triggered on the element itself, and not on the actionButton
+         * It is necessary that keyboard navigation works correctly
+         */
+        if (!actionButtonRef.current?.contains(event.target as Node)) {
+            onClick?.(event);
+        }
+    };
+
+    const {onKeyDown} = useActionHandlers(handleClick);
+
     const renderLabel = (status?: CopyToClipboardStatus) => {
         let actionButton: React.ReactNode;
 
         if (typeCopy) {
             actionButton = (
                 <Button
+                    ref={actionButtonRef}
                     size={buttonSize}
                     extraProps={{'aria-label': copyButtonLabel || undefined}}
                     {...commonActionButtonProps}
@@ -143,6 +159,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         } else if (typeClose) {
             actionButton = (
                 <Button
+                    ref={actionButtonRef}
                     onClick={onClose ? handleCloseClick : undefined}
                     size={buttonSize}
                     extraProps={{'aria-label': closeButtonLabel || undefined}}
@@ -154,10 +171,12 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         }
 
         return (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div
                 ref={ref}
-                onClick={hasOnClick ? onClick : undefined}
+                role={hasOnClick ? 'role' : undefined}
+                tabIndex={hasOnClick ? 0 : undefined}
+                onClick={hasOnClick ? handleClick : undefined}
+                onKeyDown={hasOnClick ? onKeyDown : undefined}
                 className={b(
                     {
                         theme,

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -92,7 +92,8 @@ export const Link = React.forwardRef<HTMLElement, LinkProps>(function Link(
                 {...(extraProps as React.HTMLAttributes<HTMLSpanElement>)}
                 {...commonProps}
                 ref={ref as React.Ref<HTMLSpanElement>}
-                role="link"
+                // FIXME Href always should be string
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                 tabIndex={0}
             />
         );

diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -201,7 +201,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     return (
         <div className={b(null, className)}>
-            {/* It is used to handle clicks on the switcher control */}
+            {/* FIXME change to renderProp or provide component's context */}
             {/* 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}>
                 {switcher || (

diff --git a/src/components/UserAvatar/UserAvatar.scss b/src/components/UserAvatar/UserAvatar.scss
@@ -14,16 +14,6 @@ $block: '.#{variables.$ns}user-avatar';
     background-position: center;
     background-size: cover;
 
-    outline: none;
-
-    &:focus {
-        box-shadow: 0 0 0 2px var(--g-color-line-focus);
-    }
-
-    &:focus:not(:focus-visible) {
-        box-shadow: none;
-    }
-
     &_size {
         &_xs {
             width: 24px;

diff --git a/src/components/UserAvatar/UserAvatar.tsx b/src/components/UserAvatar/UserAvatar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {block} from '../utils/cn';
-import {useActionHandlers} from '../utils/useActionHandlers';
 
 import {SIZES} from './constants';
 import type {UserAvatarSize} from './types';
@@ -35,18 +34,10 @@ export const UserAvatar = React.forwardRef<HTMLDivElement, UserAvatarProps>(
             setIsErrored(false);
         }, [imgUrl]);
 
-        const {onKeyDown} = useActionHandlers(onClick);
-
         return (
-            <div
-                role="button"
-                tabIndex={0}
-                onKeyDown={onKeyDown}
-                className={b({size}, className)}
-                title={title}
-                onClick={onClick}
-                ref={ref}
-            >
+            // OnClick deprecated, will be deleted
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+            <div className={b({size}, className)} title={title} onClick={onClick} ref={ref}>
                 <img
                     className={b('figure')}
                     width={SIZES[size]}

diff --git a/src/hooks/useOutsideClick/__tests__/Demo.tsx b/src/hooks/useOutsideClick/__tests__/Demo.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 
 import {useOutsideClick} from '../useOutsideClick';
@@ -23,9 +22,9 @@ export const Demo = () => {
     return (
         <div>
             <h1>{status}</h1>
-            <div ref={observerRef} onClick={handleClick}>
+            <button ref={observerRef} onClick={handleClick}>
                 {'Target'}
-            </div>
+            </button>
             <div>{'Outside'}</div>
         </div>
     );