Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding constrainTabbing prop to useDialog hook #57962

Merged
merged 12 commits into from
Jan 30, 2024
Merged

Adding constrainTabbing prop to useDialog hook #57962

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
15b7abc
Adding `constrainTabbing` prop to `useDialog` hook
Jan 18, 2024
ace7bff
Adding tests for constrained tabbing (skipping some which don't work …
Jan 24, 2024
9ee78c8
Doc blocks for `useDialog` hook
Jan 24, 2024
f89c009
Merge branch 'trunk' into 57877/constrained-tabbing-behaviour-in-useD…
Jan 24, 2024
b2fac36
Updating CHANGELOG.md
Jan 24, 2024
e7f4d59
Restoring `offsetHeight` mock
Jan 24, 2024
74d6f27
Replacing `keyCode` with `key` in `useConstrainedTabbing` hook
Jan 26, 2024
855953e
Switching `getByTestId` to `getAllByRole`
Jan 26, 2024
7564226
Adding expectations for shift tabbing in unconstrained focus tests
Jan 26, 2024
ee70cd5
Using `.skip` in favour of a block comment for failing tests
Jan 26, 2024
a376dfd
Clarifying `getOffsetHeight` mock, by making it global, and adding co…
Jan 30, 2024
09e5d0f
Fixing comment typo
Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/components/src/popover/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ const UnconnectedPopover = (
const {
animate = true,
headerTitle,
constrainTabbing,
onClose,
children,
className,
Expand Down Expand Up @@ -264,6 +265,7 @@ const UnconnectedPopover = (
}

const [ dialogRef, dialogProps ] = useDialog( {
constrainTabbing,
focusOnMount,
__unstableOnClose: onDialogClose,
// @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/popover/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,15 @@ export type PopoverProps = {
* @default true
*/
flip?: boolean;
/**
* Determines whether tabbing is constrained to within the popover,
* preventing keyboard focus from leaving the popover content without
* explicit focus elswhere, or whether the popover remains part of the wider
* tab order. If no value is passed, it will be derived from `focusOnMount`.
*
* @default `focusOnMount` !== false
*/
constrainTabbing?: boolean;
/**
* By default, the _first tabbable element_ in the popover will receive focus
* when it mounts. This is the same as setting this prop to `"firstElement"`.
Expand Down
4 changes: 3 additions & 1 deletion packages/compose/src/hooks/use-dialog/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import useMergeRefs from '../use-merge-refs';

type DialogOptions = {
focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
constrainTabbing?: boolean;
andrewhayward marked this conversation as resolved.
Show resolved Hide resolved
onClose?: () => void;
/**
* Use the `onClose` prop instead.
Expand Down Expand Up @@ -48,6 +49,7 @@ type useDialogReturn = [
*/
function useDialog( options: DialogOptions ): useDialogReturn {
const currentOptions = useRef< DialogOptions | undefined >();
const { constrainTabbing = options.focusOnMount !== false } = options;
useEffect( () => {
currentOptions.current = options;
}, Object.values( options ) );
Expand Down Expand Up @@ -83,7 +85,7 @@ function useDialog( options: DialogOptions ): useDialogReturn {

return [
useMergeRefs( [
options.focusOnMount !== false ? constrainedTabbingRef : null,
constrainTabbing ? constrainedTabbingRef : null,
options.focusOnMount !== false ? focusReturnRef : null,
options.focusOnMount !== false ? focusOnMountRef : null,
closeOnEscapeRef,
Expand Down
Loading