@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
54 lines (53 loc) • 2.16 kB
TypeScript
import React from "react";
interface FocusBoundaryProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* FocusBoundary expects a single child element since its a slotted component.
*/
children: React.ReactElement;
/**
* When `true`, tabbing from last item will focus first tabbable
* and shift+tab from first item will focus last tabbable element.
* This does not "trap" focus inside the boundary, it only loops it when
* tabbing. If focus is moved outside the boundary programmatically or by
* pointer, it will not be moved back.
*
* - Links (`<a>` elements), are not considered tabbable for the purpose of looping.
* - Hidden inputs (i.e. `<input type="hidden">`) are not considered tabbable.
* - Elements that are `display: none` or `visibility: hidden` are not considered tabbable.
* - Elements with `tabIndex < 0` are not considered tabbable.
* @defaultValue false
*/
loop?: boolean;
/**
* When `true`, focus cannot escape the focus boundary via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapped?: boolean;
/**
* Will try to focus the given element on mount.
*
* If not provided, FocusBoundary will try to focus the first
* tabbable element inside the boundary.
*
* Set to `false` to not focus anything.
*/
initialFocus?: boolean | React.MutableRefObject<HTMLElement | null> | (() => boolean | HTMLElement | null | undefined);
/**
* Will try to focus the given element on unmount.
*
* If not provided, FocusBoundary will try to focus the element
* that was focused before the FocusBoundary mounted.
*
* Set to `false` to not focus anything.
*/
returnFocus?: boolean | React.MutableRefObject<HTMLElement | null>;
/**
* Hides all outside content from screen readers when true.
* @default false
*/
modal?: boolean;
}
declare const FocusBoundary: React.ForwardRefExoticComponent<FocusBoundaryProps & React.RefAttributes<HTMLDivElement>>;
export { FocusBoundary };
export type { FocusBoundaryProps };