diff --git a/src/components/DefinitionList/DefinitionList.tsx b/src/components/DefinitionList/DefinitionList.tsx index b4dca1c23e..6c02688dc2 100644 --- a/src/components/DefinitionList/DefinitionList.tsx +++ b/src/components/DefinitionList/DefinitionList.tsx @@ -1,5 +1,6 @@ import * as 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} >
diff --git a/src/components/DefinitionList/types.ts b/src/components/DefinitionList/types.ts index 075ff28c6e..3260be483b 100644 --- a/src/components/DefinitionList/types.ts +++ b/src/components/DefinitionList/types.ts @@ -1,7 +1,7 @@ import type * as 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; diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index d21597e2ac..064d836920 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -4,8 +4,9 @@ import * as React from 'react'; import {Modal} from '../Modal'; import type {ModalCloseReason, ModalProps} from '../Modal'; -import type {QAProps} from '../types'; +import type {AriaLabelingProps, QAProps} from '../types'; import {block} from '../utils/cn'; +import {filterDOMProps} from '../utils/filterDOMProps'; import {ButtonClose} from './ButtonClose/ButtonClose'; import {DialogBody} from './DialogBody/DialogBody'; @@ -19,7 +20,7 @@ import './Dialog.scss'; const b = block('dialog'); -export interface DialogProps extends QAProps { +export interface DialogProps extends AriaLabelingProps, QAProps { open: boolean; children: React.ReactNode; onOpenChange?: ModalProps['onOpenChange']; @@ -37,8 +38,6 @@ export interface DialogProps extends QAProps { className?: string; modalClassName?: string; size?: 's' | 'm' | 'l'; - 'aria-label'?: string; - 'aria-labelledby'?: string; container?: HTMLElement; // TODO: Remove from readme disableFocusTrap disableAutoFocus initialFocus?: ModalProps['initialFocus'] | 'cancel' | 'apply'; @@ -75,9 +74,8 @@ export function Dialog({ onTransitionInComplete, onTransitionOut, onTransitionOutComplete, - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledBy, qa, + ...otherProps }: DialogProps) { const handleCloseButtonClick = React.useCallback( (event: React.MouseEvent) => { @@ -114,6 +112,7 @@ export function Dialog({ return ( diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 217387d2fd..316199a5c2 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -1,14 +1,15 @@ import * as React from 'react'; -import type {DOMProps, QAProps} from '../types'; +import type {AriaLabelingProps, DOMProps, QAProps} from '../types'; import {block} from '../utils/cn'; +import {filterDOMProps} from '../utils/filterDOMProps'; import './Divider.scss'; export type DividerOrientation = 'vertical' | 'horizontal'; export type DividerAlign = 'start' | 'center' | 'end'; -export interface DividerProps extends DOMProps, QAProps { +export interface DividerProps extends AriaLabelingProps, DOMProps, QAProps { orientation?: DividerOrientation; align?: DividerAlign; children?: React.ReactNode; @@ -17,10 +18,19 @@ export interface DividerProps extends DOMProps, QAProps { const b = block('divider'); export const Divider = React.forwardRef(function Divider(props, ref) { - const {orientation = 'horizontal', className, style, qa, children, align = 'start'} = props; + const { + orientation = 'horizontal', + className, + style, + qa, + children, + align = 'start', + ...otherProps + } = props; return (
(function Hotkey(props, ref) { - const {value, platform, view = 'light', qa, style, className} = props; + const {value, platform, view = 'light', qa, style, className, ...otherProps} = props; const groups = parseHotkeys(value, {platform}); const content: React.ReactNode[] = []; @@ -64,7 +65,13 @@ export const Hotkey = React.forwardRef(function Hotkey if (content.length === 0) return null; return ( - + {content} ); diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index bafa80c67a..61f48f7238 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; -import type {DOMProps, QAProps} from '../types'; +import type {AriaLabelingProps, DOMProps, QAProps} from '../types'; import {block} from '../utils/cn'; +import {filterDOMProps} from '../utils/filterDOMProps'; import {MenuGroup} from './MenuGroup'; import type {MenuGroupProps} from './MenuGroup'; @@ -16,7 +17,7 @@ const b = block('menu'); export type MenuSize = 's' | 'm' | 'l' | 'xl'; -export interface MenuProps extends DOMProps, QAProps { +export interface MenuProps extends AriaLabelingProps, DOMProps, QAProps { size?: MenuSize; children?: React.ReactNode; } @@ -31,11 +32,12 @@ interface MenuComponent // TODO: keyboard navigation, Up/Down arrows and Enter export const Menu = React.forwardRef(function Menu( - {size = 'm', children, style, className, qa}, + {size = 'm', children, style, className, qa, ...otherProps}, ref, ) { return (
    void; @@ -50,7 +51,6 @@ export interface ModalProps extends DOMProps, QAProps { disableFocusVisuallyHiddenDismiss?: boolean; children?: React.ReactNode; - /** * This callback will be called when Escape key pressed on keyboard, or click outside was made * This behaviour could be disabled with `disableEscapeKeyDown` @@ -84,15 +84,6 @@ export interface ModalProps extends DOMProps, QAProps { disableEscapeKeyDown?: boolean; /** Do not dismiss on outside click */ disableOutsideClick?: boolean; - /** - * Id of visible `` caption element - */ - 'aria-labelledby'?: string; - /** - * A11y text - * Prefer `aria-labelledby` in case caption is visible to user - */ - 'aria-label'?: string; container?: HTMLElement; contentClassName?: string; /** Callback called when `Modal` is opened and "in" transition is started */ @@ -135,11 +126,10 @@ export function Modal({ contentOverflow = 'visible', className, contentClassName, - 'aria-labelledby': ariaLabelledBy, - 'aria-label': ariaLabel, container, qa, floatingRef, + ...otherProps }: ModalProps) { const handleOpenChange = React.useCallback>( (isOpen, event, reason) => { @@ -273,14 +263,13 @@ export function Modal({ restoreFocus={true} >
    extends QAProps { +export interface TableProps extends AriaLabelingProps, QAProps { /** Data */ data: I[]; /** Column parameters */ @@ -456,7 +457,11 @@ export class Table> extends Rea private renderTable() { const {width = 'auto'} = this.props; return ( - +
    {this.renderHead()} {this.renderBody()}
    diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 71b9032966..f17c5e2883 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; -import type {QAProps} from '../types'; +import type {AriaLabelingProps, QAProps} from '../types'; import {block} from '../utils/cn'; +import {filterDOMProps} from '../utils/filterDOMProps'; import {TabsContext} from './TabsContext'; import {TabsItem} from './TabsItem'; @@ -23,7 +24,7 @@ export type TabsSize = 'm' | 'l' | 'xl'; export interface TabsItemProps extends Omit {} -export interface TabsProps extends QAProps { +export interface TabsProps extends AriaLabelingProps, QAProps { /** * Tabs direction * @deprecated Vertical tabs are deprecated @@ -78,6 +79,7 @@ const TabsComponent = React.forwardRef( onSelectTab, wrapTo, qa, + ...otherProps }, ref, ) => { @@ -104,7 +106,13 @@ const TabsComponent = React.forwardRef( }, [items, onSelectTab, wrapTo]); return ( -
    +
    {children || tabs} diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx index b2b929031a..803f7440fb 100644 --- a/src/components/Toc/Toc.tsx +++ b/src/components/Toc/Toc.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import type {QAProps} from '../types'; +import type {AriaLabelingProps, QAProps} from '../types'; import {block} from '../utils/cn'; +import {filterDOMProps} from '../utils/filterDOMProps'; import {TocItem} from './TocItem/TocItem'; import type {TocItem as TocItemType} from './types'; @@ -10,7 +11,7 @@ import './Toc.scss'; const b = block('toc'); -export interface TocProps extends QAProps { +export interface TocProps extends AriaLabelingProps, QAProps { className?: string; items: TocItemType[]; value?: string; @@ -19,10 +20,15 @@ export interface TocProps extends QAProps { } export const Toc = React.forwardRef(function Toc(props, ref) { - const {value: activeValue, items, className, onUpdate, onItemClick, qa} = props; + const {value: activeValue, items, className, onUpdate, onItemClick, qa, ...otherProps} = props; return ( -