(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 (
-
+
{items.map(({value, content, href, items: childrenItems}) => (
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index f1715a0877..fbf8872547 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -21,13 +21,14 @@ import type {PopupOffset, PopupPlacement} from '../Popup';
import {OVERFLOW_PADDING} from '../Popup/constants';
import {getPlacementOptions} from '../Popup/utils';
import {Portal} from '../Portal';
-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 './Tooltip.scss';
-export interface TooltipProps extends QAProps, DOMProps {
+export interface TooltipProps extends AriaLabelingProps, QAProps, DOMProps {
/** Anchor node */
children:
| ((props: Record, ref: React.Ref) => React.ReactElement)
@@ -78,6 +79,7 @@ export function Tooltip({
className,
style,
qa,
+ ...otherProps
}: TooltipProps) {
const [anchorElement, setAnchorElement] = React.useState(null);
const {placement, middleware: placementMiddleware} = getPlacementOptions(placementProp, false);
@@ -148,6 +150,7 @@ export function Tooltip({
{isOpen && !disabled ? (