diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index de25b904..3dd7bc80 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -130,3 +130,4 @@ import { Tooltip } from 'react-tooltip'; | `opacity` | CSS opacity | no | `0.9` | a CSS opacity value | Change the opacity of the tooltip | | `arrowColor` | CSS color | no | | a CSS background color | Change color of the tooltip arrow | | `disableStyleInjection` | `boolean` or `'core'` | no | `false` | `true` `false` `'core'` | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details | +| `role` | React.AriaRole | no | `tooltip` | `'tooltip'` `'dialog'` | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements | diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index eda9e2d9..3f3b8641 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -61,6 +61,7 @@ const Tooltip = ({ border, opacity, arrowColor, + role = 'tooltip', }: ITooltip) => { const tooltipRef = useRef(null) const tooltipArrowRef = useRef(null) @@ -788,7 +789,7 @@ const Tooltip = ({ return rendered && !hidden && actualContent ? ( ( setIsOpen, afterShow, afterHide, + role = 'tooltip', }: ITooltipController, ref, ) => { @@ -356,6 +357,7 @@ const TooltipController = React.forwardRef( afterHide, activeAnchor, setActiveAnchor: (anchor: HTMLElement | null) => setActiveAnchor(anchor), + role, } return diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index 101463eb..b97e9c07 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -93,6 +93,7 @@ export interface ITooltipController { setIsOpen?: (value: boolean) => void afterShow?: () => void afterHide?: () => void + role?: React.AriaRole } declare module 'react' {