diff --git a/site/package.json b/site/package.json index 74fdb65da..09f434b4d 100644 --- a/site/package.json +++ b/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", diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx index a5b95c54b..04e0d8e64 100644 --- a/site/source/design-system/popover/Popover.tsx +++ b/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; `} > - - + + {props.isDismissable && ( {/* TODO : replace with Link when in design system */} @@ -127,7 +128,7 @@ export default function Popover( )} {/* tabIndex -1 is for text selection in popover, see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668 */} - + {title && (

{title} @@ -135,8 +136,8 @@ export default function Popover( )} {children} - - + + diff --git a/yarn.lock b/yarn.lock index 3f20488b5..d5579d74b 100644 --- a/yarn.lock +++ b/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"