From dc6aa8352a2e1a09a0574f453bb4bb3b51669eea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 11 Dec 2024 16:50:42 +0100 Subject: [PATCH] Fix regression for `:focus-visible` matcher in unit tests (#2827) --- .changeset/strong-mayflies-kneel.md | 5 +++++ packages/circuit-ui/components/Tooltip/Tooltip.tsx | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/strong-mayflies-kneel.md diff --git a/.changeset/strong-mayflies-kneel.md b/.changeset/strong-mayflies-kneel.md new file mode 100644 index 0000000000..73142d7138 --- /dev/null +++ b/.changeset/strong-mayflies-kneel.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': patch +--- + +Fixed a regression that [breaks Jest and Vitest tests](https://github.com/dperini/nwsapi/issues?q=sort%3Aupdated-desc+is%3Aissue+focus-visible+) when [matching elements](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) using the `:focus-visible` selector. diff --git a/packages/circuit-ui/components/Tooltip/Tooltip.tsx b/packages/circuit-ui/components/Tooltip/Tooltip.tsx index 1a0a03a866..25afac9bab 100644 --- a/packages/circuit-ui/components/Tooltip/Tooltip.tsx +++ b/packages/circuit-ui/components/Tooltip/Tooltip.tsx @@ -137,13 +137,13 @@ export const Tooltip = forwardRef( const handleFocus: FocusEventHandler = useCallback( (event) => { if ( - event.currentTarget.matches(':focus-visible') || // Vitest and Jest use nwsapi to mock the `Element.matches` API. // It has a bug where `:focus-visible` is not matched unless // the element has the `autofocus` property set. // https://github.com/dperini/nwsapi/issues/122 - (process.env.NODE_ENV === 'test' && - event.currentTarget.matches(':focus')) + process.env.NODE_ENV === 'test' + ? event.currentTarget.matches(':focus') + : event.currentTarget.matches(':focus-visible') ) { handleOpen(); }