Skip to content

Commit

Permalink
add focus-trap to popover (#5670)
Browse files Browse the repository at this point in the history
* add focus-trap to popover

* code cleanup

* changesets

* boyscouting docs link
  • Loading branch information
gwyneplaine authored May 11, 2021
1 parent 984e406 commit 669f0d8
Show file tree
Hide file tree
Showing 7 changed files with 43 additions and 10 deletions.
5 changes: 5 additions & 0 deletions .changeset/loud-dolphins-poke.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@keystone-ui/popover': minor
---

Added focustrap to the PopoverDialog component, when the PopoverDialog is open, browser focus is now trapped within it till the dialog is closed.
5 changes: 5 additions & 0 deletions .changeset/wise-bugs-brake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@keystone-next/admin-ui': patch
---

Patch update to @keystone-ui/popover.
1 change: 1 addition & 0 deletions design-system/packages/popover/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@babel/runtime": "^7.14.0",
"@keystone-ui/core": "^2.0.1",
"@popperjs/core": "^2.9.2",
"focus-trap": "^6.4.0",
"react-popper": "^2.2.5"
},
"engines": {
Expand Down
27 changes: 24 additions & 3 deletions design-system/packages/popover/src/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ import {
forwardRef,
useEffect,
useState,
useRef,
useCallback,
CSSProperties,
useMemo,
} from 'react';
import * as focusTrapModule from 'focus-trap';
import { Options, Placement } from '@popperjs/core';
import { usePopper } from 'react-popper';
import { jsx, Portal, useTheme } from '@keystone-ui/core';
Expand Down Expand Up @@ -194,6 +196,24 @@ type DialogProps = {
export const PopoverDialog = forwardRef<HTMLDivElement, DialogProps>(
({ isVisible, children, arrow, ...props }, consumerRef) => {
const { elevation, radii, shadow, colors } = useTheme();
const focusTrapRef = useRef<HTMLDivElement | null>(null);
const focusTrap = useRef<focusTrapModule.FocusTrap | null>(null);

useEffect(() => {
if (focusTrapRef?.current) {
focusTrap.current = focusTrapModule.createFocusTrap(focusTrapRef.current);
}
}, [focusTrapRef]);

useEffect(() => {
if (focusTrap?.current) {
if (isVisible) {
focusTrap.current.activate();
} else {
focusTrap.current.deactivate();
}
}
}, [isVisible, focusTrap]);

return (
<Portal>
Expand All @@ -210,9 +230,10 @@ export const PopoverDialog = forwardRef<HTMLDivElement, DialogProps>(
}}
{...props}
>
<div data-popper-arrow ref={arrow.ref} className="tooltipArrow" {...arrow.props} />

{children}
<div ref={focusTrapRef}>
<div data-popper-arrow ref={arrow.ref} className="tooltipArrow" {...arrow.props} />
{children}
</div>
</div>
</Portal>
);
Expand Down
2 changes: 1 addition & 1 deletion packages-next/admin-ui/src/components/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const AuthenticatedItem = ({ item }: { item: { id: string; label: string } }) =>
<PopoverLink target="_blank" href="https://github.com/keystonejs/keystone">
GitHub Repository
</PopoverLink>
<PopoverLink target="_blank" href="https://next.keystonejs.com/documentation">
<PopoverLink target="_blank" href="https://next.keystonejs.com">
Keystone Documentation
</PopoverLink>
<SignoutButton />
Expand Down
1 change: 0 additions & 1 deletion packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,6 @@ function FilterAddPopoverContent({ onClose, listKey }: { onClose: () => void; li
{state.kind === 'selecting-field' && (
<Options
components={fieldSelectComponents}
autoFocus
onChange={newVal => {
const fieldPath: string = (newVal as any).value;
const filterType = Object.keys(filtersByFieldThenType[fieldPath])[0];
Expand Down
12 changes: 7 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4004,11 +4004,6 @@ babel-plugin-polyfill-regenerator@^0.2.0:
dependencies:
"@babel/helper-define-polyfill-provider" "^0.2.0"

babel-plugin-remove-graphql-queries@2.7.2:
version "2.7.2"
resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.7.2.tgz#101c8b26567e35c217e817e892135a9a04a5a805"
integrity sha512-kkIqi2+oZ7YCLbZbrhOGxPA/HuWpfvzRUxbD75SHqwxl9fZVWSLQhOUl72GEpAuEt4MeCEguKpMX100oDN3MQA==

babel-plugin-syntax-jsx@6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
Expand Down Expand Up @@ -6652,6 +6647,13 @@ focus-lock@^0.8.1:
dependencies:
tslib "^1.9.3"

focus-trap@^6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.4.0.tgz#e9951484fddf933d9b9b0e95b499f9420f6a54d6"
integrity sha512-RpH291GjfNhy1ek+Iwe00oCaqJN0sBaB+S/v7BpCIldf39IslPI7657nOZ6HwgoEHpjCmUJoAY+Mfgrm0rohvQ==
dependencies:
tabbable "^5.2.0"

follow-redirects@^1.10.0:
version "1.14.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.0.tgz#f5d260f95c5f8c105894491feee5dc8993b402fe"
Expand Down

1 comment on commit 669f0d8

@vercel
Copy link

@vercel vercel bot commented on 669f0d8 May 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.