react-chrono
Version:
A Modern Timeline component for React
84 lines • 2.7 kB
TypeScript
/**
* Configuration options for accessible dialog
*/
export interface UseAccessibleDialogOptions {
/** Whether the dialog is currently open */
isOpen: boolean;
/** Callback when dialog should close */
onClose: () => void;
/** Element to focus when dialog opens (default: first focusable element) */
initialFocus?: 'first' | 'last' | React.RefObject<HTMLElement>;
/** Whether to restore focus to trigger element when closing (default: true) */
returnFocus?: boolean;
/** Whether to close dialog on Escape key (default: true) */
closeOnEscape?: boolean;
/** Whether to close dialog on outside click (default: true) */
closeOnOutsideClick?: boolean;
/** Whether to close dialog on backdrop click (default: true) */
closeOnBackdropClick?: boolean;
/** ARIA label for the dialog */
ariaLabel?: string;
/** ID of element that describes the dialog */
ariaDescribedBy?: string;
/** ID of element that labels the dialog */
ariaLabelledBy?: string;
}
/**
* Return value from useAccessibleDialog
*/
export interface UseAccessibleDialogReturn {
/** Props to spread on the dialog container element */
dialogProps: {
ref: React.Ref<HTMLDivElement>;
role: 'dialog';
'aria-modal': boolean;
'aria-label'?: string;
'aria-describedby'?: string;
'aria-labelledby'?: string;
tabIndex: -1;
};
/** Props to spread on the backdrop element (if any) */
backdropProps: {
onClick: () => void;
role: 'presentation';
'aria-hidden': boolean;
};
/** Current open state */
isOpen: boolean;
}
/**
* useAccessibleDialog - Complete accessible dialog pattern
*
* Combines focus trap, keyboard handling, and outside click detection
* into a single, easy-to-use hook for implementing WCAG-compliant dialogs.
*
* WCAG References:
* - 2.1.2 No Keyboard Trap (Level A)
* - 2.4.3 Focus Order (Level A)
* - 4.1.2 Name, Role, Value (Level A)
* - ARIA APG Dialog Pattern
*
* @example
* ```typescript
* const { dialogProps, backdropProps } = useAccessibleDialog({
* isOpen: isModalOpen,
* onClose: closeModal,
* closeOnEscape: true,
* closeOnOutsideClick: true,
* ariaLabel: 'Settings dialog',
* });
*
* return isModalOpen ? (
* <Portal>
* <div {...backdropProps}>
* <div {...dialogProps}>
* <h2>Settings</h2>
* <button onClick={closeModal}>Close</button>
* </div>
* </div>
* </Portal>
* ) : null;
* ```
*/
export declare const useAccessibleDialog: (options: UseAccessibleDialogOptions) => UseAccessibleDialogReturn;
//# sourceMappingURL=useAccessibleDialog.d.ts.map