Remplacement de la library de focus trap (Popover) (#2428)

feat: Remplace la library de focus trap

site/package.json

@@ -77,6 +77,7 @@
 		"@sentry/tracing": "^7.22.0",
 		"algoliasearch": "^4.14.2",
 		"exoneration-covid": "workspace:^",
+		"focus-trap-react": "^10.0.2",
 		"fuse.js": "^6.6.2",
 		"iframe-resizer": "^4.3.2",
 		"isbot": "^3.6.5",

site/source/design-system/popover/Popover.tsx

@@ -9,6 +9,7 @@ import {
 	usePreventScroll,
 } from '@react-aria/overlays'
 import { AriaDialogProps } from '@react-types/dialog'
+import FocusTrap from 'focus-trap-react'
 import React, { RefObject, useEffect, useRef, useState } from 'react'
 import styled, { ThemeProvider, css, keyframes } from 'styled-components'
 
@@ -92,14 +93,14 @@ export default function Popover(
 									min-width: 0;
 								`}
 							>
-								<PopoverContainer
-									{...dialogProps}
-									{...modalProps}
-									{...overlayProps}
-									$offsetTop={offsetTop}
-									ref={ref}
-								>
-									<FocusScope contain restoreFocus autoFocus>
+								<FocusTrap>
+									<PopoverContainer
+										{...dialogProps}
+										{...modalProps}
+										{...overlayProps}
+										$offsetTop={offsetTop}
+										ref={ref}
+									>
 										{props.isDismissable && (
 											<CloseButtonContainer>
 												{/* TODO : replace with Link when in design system */}
@@ -127,7 +128,7 @@ export default function Popover(
 											</CloseButtonContainer>
 										)}
 										{/* tabIndex -1 is for text selection in popover, see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668 */}
-										<PopoverContent tabIndex={-1} ref={contentRef}>
+										<PopoverContent ref={contentRef}>
 											{title && (
 												<H2 as="h1" {...titleProps}>
 													{title}
@@ -135,8 +136,8 @@ export default function Popover(
 											)}
 											{children}
 										</PopoverContent>
-									</FocusScope>
-								</PopoverContainer>
+									</PopoverContainer>
+								</FocusTrap>
 							</Grid>
 						</Grid>
 					</Container>

yarn.lock

@@ -16099,6 +16099,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"focus-trap-react@npm:^10.0.2":
+  version: 10.0.2
+  resolution: "focus-trap-react@npm:10.0.2"
+  dependencies:
+    focus-trap: ^7.2.0
+    tabbable: ^6.0.1
+  peerDependencies:
+    prop-types: ^15.8.1
+    react: ">=16.3.0"
+    react-dom: ">=16.3.0"
+  checksum: 9bd33883764ef78b6aae3314814ff0eab48477d045acae7eef0246df563c7d0db0b3935cc9bd25d261ec272322b424d8d3e8581ef0bcccdfdd65ee72d8916d0b
+  languageName: node
+  linkType: hard
+
+"focus-trap@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "focus-trap@npm:7.2.0"
+  dependencies:
+    tabbable: ^6.0.1
+  checksum: 181138fab2f82b66e0b8efaf30ef0c4adf691526b85b2171d780c0d3a5918021d305ebbf907343401fafcc369c904a9bf71a25f1f05223ca28217054955fab43
+  languageName: node
+  linkType: hard
+
 "folder-walker@npm:^3.2.0":
   version: 3.2.0
   resolution: "folder-walker@npm:3.2.0"
@@ -25958,6 +25981,7 @@ __metadata:
     cypress-wait-until: ^1.7.2
     dotenv: ^16.0.3
     exoneration-covid: "workspace:^"
+    focus-trap-react: ^10.0.2
     fuse.js: ^6.6.2
     i18next-parser: ^7.0.3
     iframe-resizer: ^4.3.2
@@ -27085,6 +27109,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "tabbable@npm:6.0.1"
+  checksum: 65e378ad69a97416f2fdce34ade11b8ff68b33d9b2d978920a9d285c77e1bb88cb35113a8f00af8c4f0163d788d451a48840a216fa918d6a3f0c554951deb984
+  languageName: node
+  linkType: hard
+
 "tabtab@npm:^3.0.2":
   version: 3.0.2
   resolution: "tabtab@npm:3.0.2"