diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46b2e9804..9ddabfee6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - **[FIX]** Add a maximum width on `QrCard`
 - **[FIX]** Fix the `font-size` and `line-height` of `TextBody`, `TextSubHeader` and `TextTitle` components.
+- **[NEW]** Add `FocusVisibleProvider` and `useFocusVisible` utils to polyfill :focus-visible css pseudo class.
 - [...]
 
 # v29.0.0 (20/04/2020)
diff --git a/src/_utils/focusVisible/index.tsx b/src/_utils/focusVisible/index.tsx
index a7782fba7..b4108395f 100644
--- a/src/_utils/focusVisible/index.tsx
+++ b/src/_utils/focusVisible/index.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useState, ReactNode } from 'react'
+import React, { PropsWithChildren, createContext, useEffect, useState } from 'react'
 
 import {
   KEYS_TRIGGERING_KEYBOARD_NAVIGATION,
@@ -7,10 +7,6 @@ import {
 
 // A React hook based on: https://github.com/WICG/focus-visible
 
-interface FocusVisibleProviderProps {
-  children: ReactNode
-}
-
 const pointerMoveEventList = [
   'mousedown',
   'mouseup',
@@ -26,7 +22,7 @@ const pointerDownEventList = ['mousedown', 'pointerdown', 'touchstart']
 
 export const FocusVisibleContext = createContext(false)
 
-export const FocusVisibleProvider = ({ children }: FocusVisibleProviderProps) => {
+export const FocusVisibleProvider = (props: PropsWithChildren<{}>) => {
   /* When the provider first loads, assume the user is in pointer modality. */
   const [hadKeyboardEvent, setHadKeyboardEvent] = useState(false)
 
@@ -102,7 +98,9 @@ export const FocusVisibleProvider = ({ children }: FocusVisibleProviderProps) =>
   }, [])
 
   return (
-    <FocusVisibleContext.Provider value={hadKeyboardEvent}>{children}</FocusVisibleContext.Provider>
+    <FocusVisibleContext.Provider value={hadKeyboardEvent}>
+      {props.children}
+    </FocusVisibleContext.Provider>
   )
 }