feat: improve handling aria props

gravity-ui · Nov 21, 2024 · 52f7c2f · 52f7c2f
1 parent 11dd537
commit 52f7c2f
Show file tree

Hide file tree

Showing 35 changed files with 219 additions and 129 deletions.
diff --git a/src/components/ActionTooltip/ActionTooltip.tsx b/src/components/ActionTooltip/ActionTooltip.tsx
@@ -9,13 +9,18 @@ import {Hotkey} from '../Hotkey';
 import type {HotkeyProps} from '../Hotkey';
 import {Popup} from '../Popup';
 import type {PopupPlacement} from '../Popup';
-import type {DOMProps, QAProps} from '../types';
+import type {AriaLabelingProps, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
+import {filterDOMProps} from '../utils/filterDOMProps';
 import {getElementRef} from '../utils/getElementRef';
 
 import './ActionTooltip.scss';
 
-export interface ActionTooltipProps extends QAProps, DOMProps, TooltipDelayProps {
+export interface ActionTooltipProps
+    extends AriaLabelingProps,
+        QAProps,
+        DOMProps,
+        TooltipDelayProps {
     id?: string;
     disablePortal?: boolean;
     contentClassName?: string;
@@ -44,15 +49,18 @@ export function ActionTooltip(props: ActionTooltipProps) {
         qa,
         id,
         disablePortal,
-        ...delayProps
+        openDelay,
+        closeDelay,
+        ...otherProps
     } = props;
 
     const [anchorElement, setAnchorElement] = React.useState<HTMLElement | null>(null);
-    const tooltipVisible = useTooltipVisible(anchorElement, delayProps);
+    const tooltipVisible = useTooltipVisible(anchorElement, {openDelay, closeDelay});
 
     const renderPopup = () => {
         return (
             <Popup
+                {...filterDOMProps(otherProps, {labelable: true})}
                 id={id}
                 disablePortal={disablePortal}
                 role="tooltip"

diff --git a/src/components/ActionsPanel/ActionsPanel.tsx b/src/components/ActionsPanel/ActionsPanel.tsx
@@ -8,6 +8,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {block} from '../utils/cn';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {CollapseActions} from './components/CollapseActions';
 import i18n from './i18n';
@@ -25,9 +26,14 @@ export const ActionsPanel = ({
     noteClassName,
     qa,
     maxRowActions,
+    ...otherProps
 }: ActionsPanelProps) => {
     return (
-        <div className={b(null, className)} data-qa={qa}>
+        <div
+            {...filterDOMProps(otherProps, {labelable: true})}
+            className={b(null, className)}
+            data-qa={qa}
+        >
             {typeof renderNote === 'function' && (
                 <Text
                     className={b('note-wrapper', noteClassName)}

diff --git a/src/components/ActionsPanel/types.ts b/src/components/ActionsPanel/types.ts
@@ -1,6 +1,6 @@
 import type {ButtonProps} from '../Button';
 import type {DropdownMenuItem} from '../DropdownMenu';
-import type {QAProps} from '../types';
+import type {AriaLabelingProps, QAProps} from '../types';
 
 export interface ActionsPanelItem {
     /** Uniq action id */
@@ -18,7 +18,7 @@ export interface ActionsPanelItem {
     };
 }
 
-export interface ActionsPanelProps extends QAProps {
+export interface ActionsPanelProps extends AriaLabelingProps, QAProps {
     /** Array of actions ActionsPanelItem[] */
     actions: ActionsPanelItem[];
     /** ClassName of element */

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -7,6 +7,7 @@ import {Card} from '../Card';
 import {Icon} from '../Icon';
 import {colorText} from '../Text';
 import {Flex, spacing} from '../layout';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {AlertAction} from './AlertAction';
 import {AlertActions} from './AlertActions';
@@ -29,11 +30,13 @@ export const Alert = (props: AlertProps) => {
         onClose,
         align,
         qa,
+        ...otherProps
     } = props;
 
     return (
         <AlertContextProvider layout={layout} view={view}>
             <Card
+                {...filterDOMProps(otherProps, {labelable: true})}
                 style={style}
                 className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
                 theme={theme}

diff --git a/src/components/Alert/types.ts b/src/components/Alert/types.ts
@@ -1,7 +1,7 @@
 import type React from 'react';
 
 import type {ButtonProps} from '../Button';
-import type {QAProps} from '../types';
+import type {AriaLabelingProps, QAProps} from '../types';
 
 export type AlertTheme = 'normal' | 'info' | 'success' | 'warning' | 'danger' | 'utility';
 export type AlertView = 'filled' | 'outlined';
@@ -22,7 +22,7 @@ export type AlertContextType = {
 
 export type AlertContextProviderProps = React.PropsWithChildren<AlertContextType>;
 
-export interface AlertProps extends QAProps, Partial<AlertContextType> {
+export interface AlertProps extends AriaLabelingProps, QAProps, Partial<AlertContextType> {
     title?: React.ReactNode;
     message?: React.ReactNode;
     theme?: AlertTheme;

diff --git a/src/components/ArrowToggle/ArrowToggle.tsx b/src/components/ArrowToggle/ArrowToggle.tsx
@@ -3,22 +3,30 @@ import React from 'react';
 import {ChevronDown} from '@gravity-ui/icons';
 
 import {Icon} from '../Icon';
-import type {QAProps} from '../types';
+import type {AriaLabelingProps, QAProps} from '../types';
 import {block} from '../utils/cn';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import './ArrowToggle.scss';
 
-export interface ArrowToggleProps extends QAProps {
+export interface ArrowToggleProps extends AriaLabelingProps, QAProps {
     size?: number;
     direction?: 'top' | 'left' | 'bottom' | 'right';
     className?: string;
 }
 
 const b = block('arrow-toggle');
 
-export function ArrowToggle({size = 16, direction = 'bottom', className, qa}: ArrowToggleProps) {
+export function ArrowToggle({
+    size = 16,
+    direction = 'bottom',
+    className,
+    qa,
+    ...otherProps
+}: ArrowToggleProps) {
     return (
         <span
+            {...filterDOMProps(otherProps, {labelable: true})}
             style={{width: size, height: size}}
             className={b({direction}, className)}
             data-qa={qa}

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {block} from '../utils/cn';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {AvatarIcon} from './AvatarIcon';
 import {AvatarImage} from './AvatarImage';
@@ -20,11 +21,10 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref)
         backgroundColor,
         borderColor,
         title,
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledby,
         className,
         style: styleProp,
         qa,
+        ...otherProps
     } = props;
 
     const style = {backgroundColor, color: borderColor, ...styleProp};
@@ -72,11 +72,10 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref)
 
     return (
         <div
+            {...filterDOMProps(otherProps, {labelable: true})}
             className={b({size, theme, view, 'with-border': Boolean(borderColor)}, className)}
             title={title}
             role="img"
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledby}
             style={style}
             data-qa={qa}
             ref={ref}

diff --git a/src/components/Avatar/types/main.ts b/src/components/Avatar/types/main.ts
@@ -1,5 +1,5 @@
 import type {DistributiveOmit} from '../../../types/utils';
-import type {DOMProps, QAProps} from '../../types';
+import type {AriaLabelingProps, DOMProps, QAProps} from '../../types';
 import type {AvatarIconProps} from '../AvatarIcon';
 import type {AvatarImageProps} from '../AvatarImage';
 import type {AvatarTextProps} from '../AvatarText';
@@ -9,12 +9,7 @@ import type {AvatarCommonProps, AvatarSize} from './common';
 export type AvatarTheme = 'normal' | 'brand';
 export type AvatarView = 'filled' | 'outlined';
 
-interface AvatarAriaProps {
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-}
-
-interface AvatarBaseProps extends DOMProps, QAProps, AvatarAriaProps {
+interface AvatarBaseProps extends DOMProps, QAProps, AriaLabelingProps {
     size?: AvatarSize;
     theme?: AvatarTheme;
     view?: AvatarView;
@@ -25,6 +20,6 @@ interface AvatarBaseProps extends DOMProps, QAProps, AvatarAriaProps {
 
 export type AvatarProps = AvatarBaseProps &
     DistributiveOmit<
-        AvatarImageProps | AvatarIconProps | AvatarTextProps | AvatarAriaProps,
+        AvatarImageProps | AvatarIconProps | AvatarTextProps | AriaLabelingProps,
         keyof AvatarCommonProps
     >;
diff --git a/src/components/AvatarStack/AvatarStackMore.tsx b/src/components/AvatarStack/AvatarStackMore.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {DEFAULT_AVATAR_SIZE} from '../Avatar';
 import {block} from '../utils/cn';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import i18n from './i18n';
 import type {AvatarStackMoreProps} from './types';
@@ -16,13 +17,15 @@ export const AvatarStackMore = React.forwardRef<HTMLDivElement, AvatarStackMoreP
         {
             className,
             count,
-            'aria-label': ariaLabel,
             borderColor = 'var(--g-color-line-generic-solid)',
             size = DEFAULT_AVATAR_SIZE,
+            'aria-label': ariaLabel,
+            ...otherProps
         },
         ref,
     ) => (
         <div
+            {...filterDOMProps(otherProps, {labelable: true})}
             ref={ref}
             className={b('more', {size, 'has-border': Boolean(borderColor)}, className)}
             aria-label={ariaLabel || i18n('more', {count})}

diff --git a/src/components/AvatarStack/AvatarStackMoreButton.tsx b/src/components/AvatarStack/AvatarStackMoreButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {DEFAULT_AVATAR_SIZE} from '../Avatar';
 import {block} from '../utils/cn';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {AvatarStackMore} from './AvatarStackMore';
 import type {AvatarStackMoreButtonProps} from './types';
@@ -19,13 +20,14 @@ export const AvatarStackMoreButton = React.forwardRef<
             size = DEFAULT_AVATAR_SIZE,
             onClick,
             count,
-            'aria-label': ariaLabel,
             borderColor,
+            ...otherProps
         },
         ref,
     ) => {
         return (
             <button
+                {...filterDOMProps(otherProps, {labelable: true})}
                 ref={ref}
                 type="button"
                 className={b('more-button', {size}, className)}
@@ -35,7 +37,6 @@ export const AvatarStackMoreButton = React.forwardRef<
                     className={badgeClassName}
                     size={size}
                     count={count}
-                    aria-label={ariaLabel}
                     borderColor={borderColor}
                 />
             </button>

diff --git a/src/components/AvatarStack/types.ts b/src/components/AvatarStack/types.ts
@@ -1,6 +1,7 @@
 import type React from 'react';
 
 import type {AvatarSize} from '../Avatar';
+import type {AriaLabelingProps} from '../types';
 
 export type AvatarStackOverlapSize = 's' | 'm' | 'l';
 
@@ -42,14 +43,12 @@ export interface AvatarStackProps {
     renderMore?: (options: {count: number}) => React.ReactElement;
 }
 
-export type AvatarStackMoreProps = Pick<
-    React.HTMLProps<HTMLDivElement>,
-    'className' | 'aria-label'
-> & {
-    count: number;
-    size?: AvatarSize;
-    borderColor?: string;
-};
+export type AvatarStackMoreProps = Pick<React.HTMLProps<HTMLDivElement>, 'className'> &
+    AriaLabelingProps & {
+        count: number;
+        size?: AvatarSize;
+        borderColor?: string;
+    };
 
 export type AvatarStackMoreButtonProps = Pick<React.HTMLProps<HTMLButtonElement>, 'onClick'> &
     AvatarStackMoreProps & {

diff --git a/src/components/DefinitionList/DefinitionList.tsx b/src/components/DefinitionList/DefinitionList.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {filterDOMProps} from '../utils/filterDOMProps';
 import {isOfType} from '../utils/isOfType';
 import {warnOnce} from '../utils/warn';
 
@@ -18,6 +19,7 @@ export function DefinitionList({
     className,
     children,
     qa,
+    ...otherProps
 }: DefinitionListProps) {
     const normalizedChildren = prepareChildren(children);
     return (
@@ -27,6 +29,7 @@ export function DefinitionList({
             contentMaxWidth={contentMaxWidth}
         >
             <dl
+                {...filterDOMProps(otherProps, {labelable: true})}
                 className={b({responsive, vertical: direction === 'vertical'}, className)}
                 data-qa={qa}
             >

diff --git a/src/components/DefinitionList/types.ts b/src/components/DefinitionList/types.ts
@@ -1,7 +1,7 @@
 import type React from 'react';
 
 import type {HelpMarkProps} from '../HelpMark';
-import type {QAProps} from '../types';
+import type {AriaLabelingProps, QAProps} from '../types';
 export type DefinitionListItemNote = string | HelpMarkProps;
 
 export interface DefinitionListItemProps {
@@ -13,7 +13,7 @@ export interface DefinitionListItemProps {
 
 export type DefinitionListDirection = 'vertical' | 'horizontal';
 
-export interface DefinitionListProps extends QAProps {
+export interface DefinitionListProps extends AriaLabelingProps, QAProps {
     responsive?: boolean;
     direction?: DefinitionListDirection;
     nameMaxWidth?: number;