betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Focus trap for PdE iframe

pull/2573/head
Jérémy Rialland 2023-04-19 15:45:52 +02:00 committed by Jérémy Rialland
parent 64e7bbe0b9
commit 608328105e
3 changed files with 48 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
site/source/components/PlaceDesEntreprises.tsx
View File

@ -62,36 +62,50 @@ export const PlaceDesEntreprisesButton = ({
)}
contentRef={contentRef}
>
<Body>
<Trans>
Décrivez votre projet ou votre problème en donnant quelques éléments
de contexte. Nous identifions, parmi l’ensemble des partenaires
publics et parapublics, le conseiller compétent pour votre demande.
Celui-ci vous contacte par téléphone sous 5 jours et vous accompagne
en fonction de votre situation.
</Trans>
</Body>
{(close) => (
<>
<Body>
<Trans>
Décrivez votre projet ou votre problème en donnant quelques
éléments de contexte. Nous identifions, parmi l’ensemble des
partenaires publics et parapublics, le conseiller compétent pour
votre demande. Celui-ci vous contacte par téléphone sous 5 jours
et vous accompagne en fonction de votre situation.
</Trans>
</Body>
<Suspense
fallback={
<Container
css={`
height: 300px;
align-items: center;
`}
<Suspense
fallback={
<Container
css={`
height: 300px;
align-items: center;
`}
>
<Loader />
</Container>
}
>
<Loader />
</Container>
}
>
<LazyIframe
src={url.href}
onLoad={function () {
document.getElementById('pdeIframe')?.focus()
scrollTo(0, 0)
}}
/>
</Suspense>
<LazyIframe
src={url.href}
onLoad={function () {
console.log('iframe loaded')
document.getElementById('pdeIframe')?.focus()
scrollTo(0, 0)
console.log('done!')
}}
/>
</Suspense>
<Body style={{ textAlign: 'right' }}>
<Button aria-label={t('Fermer')} size="XS" onPress={close}>
{t('Fermer')}
</Button>
</Body>
</>
)}
</PopoverWithTrigger>
</Container>
)

1
site/source/components/PlaceDesEntreprisesIframe.tsx
View File

@ -31,6 +31,7 @@ export const PlaceDesEntreprisesIframe = ({
src={src}
id="pdeIframe"
onLoad={onLoad}
tabIndex={0}
/>
</IframeContainer>
)

5
site/source/design-system/popover/Popover.tsx
View File

@ -107,6 +107,11 @@ export default function Popover(
min-width: 0;
`}
>
{/*
If you use an iframe in the children, be careful because you need a
focusable element before and after the iframe for the FocusTrap to work.
The CloseButton counts as the before element, so you just need a focusable element after the iframe.
*/}
<FocusTrap>
<PopoverContainer
{...dialogProps}