From ad2fca85a18256823ca636ca7847cd0a766942ea Mon Sep 17 00:00:00 2001 From: "Dang, Mai-Linh" Date: Tue, 21 Nov 2023 16:52:14 +0100 Subject: [PATCH 1/4] feat: add role prop --- src/components/Tooltip/Tooltip.tsx | 3 ++- src/components/Tooltip/TooltipTypes.d.ts | 1 + src/components/TooltipController/TooltipController.tsx | 2 ++ src/components/TooltipController/TooltipControllerTypes.d.ts | 1 + 4 files changed, 6 insertions(+), 1 deletion(-) 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, }: 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..8519cd2f 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?: 'tooltip' | 'dialog' } declare module 'react' { From 72f2b577af553a983103181582c7de9cef3ffd6b Mon Sep 17 00:00:00 2001 From: "Dang, Mai-Linh" Date: Tue, 21 Nov 2023 16:52:45 +0100 Subject: [PATCH 2/4] docs: add role prop --- docs/docs/options.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index de25b904..5ac3918c 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` | `'tooltip'` or `'dialog'` | no | `tooltip` | `'tooltip'` `'dialog'` | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements | From c31622aa47aa15dba8390a6cb01696fd7fe38ef2 Mon Sep 17 00:00:00 2001 From: "Dang, Mai-Linh" Date: Tue, 21 Nov 2023 17:01:16 +0100 Subject: [PATCH 3/4] feat: set 'tooltip' as default --- src/components/TooltipController/TooltipController.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 450d4182..903fc01c 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -59,7 +59,7 @@ const TooltipController = React.forwardRef( setIsOpen, afterShow, afterHide, - role, + role = 'tooltip', }: ITooltipController, ref, ) => { From 8e1c552fda47e484544a33fe89ddbbc05ad54847 Mon Sep 17 00:00:00 2001 From: "Dang, Mai-Linh" Date: Tue, 21 Nov 2023 17:32:12 +0100 Subject: [PATCH 4/4] feat: use AriaRole type --- docs/docs/options.mdx | 2 +- src/components/Tooltip/TooltipTypes.d.ts | 2 +- src/components/TooltipController/TooltipControllerTypes.d.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index 5ac3918c..3dd7bc80 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -130,4 +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` | `'tooltip'` or `'dialog'` | no | `tooltip` | `'tooltip'` `'dialog'` | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements | +| `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/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index f7e63dc6..d5158cbb 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/src/components/Tooltip/TooltipTypes.d.ts @@ -153,5 +153,5 @@ export interface ITooltip { border?: CSSProperties['border'] opacity?: CSSProperties['opacity'] arrowColor?: CSSProperties['backgroundColor'] - role?: 'tooltip' | 'dialog' + role?: React.AriaRole } diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index 8519cd2f..b97e9c07 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -93,7 +93,7 @@ export interface ITooltipController { setIsOpen?: (value: boolean) => void afterShow?: () => void afterHide?: () => void - role?: 'tooltip' | 'dialog' + role?: React.AriaRole } declare module 'react' {