Rebeka DekanyandCopybot
b4bfff1b67
* Replace placeholders with labels * Add 'Close dialog' label to modal close button to distinguish from footer Close button * Add and translate heading on the not found page * Update textarea to have id matching label's for attribute Simplify test for template description textarea * Label PDF zoom level dropdown button * Improve test selectors to use semantic roles and accessible names GitOrigin-RevId: d215ddca30ddf844cfffbcf0e528a601b134d772
83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
import FocusTrap from '../focus-trap'
|
|
import {
|
|
Modal,
|
|
ModalProps,
|
|
ModalHeaderProps,
|
|
ModalTitleProps,
|
|
ModalFooterProps,
|
|
} from 'react-bootstrap'
|
|
import { ModalBodyProps } from 'react-bootstrap/ModalBody'
|
|
import type { Options as FocusTrapOptions } from 'focus-trap'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
type OLModalProps = ModalProps & {
|
|
size?: 'sm' | 'lg'
|
|
onHide: () => void
|
|
show?: boolean
|
|
} & Pick<
|
|
FocusTrapOptions,
|
|
'escapeDeactivates' | 'clickOutsideDeactivates' | 'returnFocusOnDeactivate'
|
|
>
|
|
|
|
type OLModalHeaderProps = ModalHeaderProps & {
|
|
closeButton?: boolean
|
|
}
|
|
|
|
export function OLModal({
|
|
children,
|
|
show = false,
|
|
onHide,
|
|
returnFocusOnDeactivate = true, // Return focus to trigger element when modal closes
|
|
escapeDeactivates = false, // Let React-Bootstrap Modal handle Escape key to avoid double Escape key handling
|
|
clickOutsideDeactivates = true, // Allow focus trap to deactivate on outside click and let React-Bootstrap Modal handle it
|
|
...props
|
|
}: OLModalProps) {
|
|
return (
|
|
<Modal show={show} onHide={onHide} {...props}>
|
|
<FocusTrap
|
|
active={show}
|
|
focusTrapOptions={{
|
|
escapeDeactivates,
|
|
clickOutsideDeactivates,
|
|
returnFocusOnDeactivate,
|
|
}}
|
|
>
|
|
{children}
|
|
</FocusTrap>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export function OLModalHeader({
|
|
children,
|
|
closeButton = true,
|
|
...props
|
|
}: OLModalHeaderProps) {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<Modal.Header
|
|
closeButton={closeButton}
|
|
closeLabel={t('close_dialog')}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Modal.Header>
|
|
)
|
|
}
|
|
|
|
export function OLModalTitle({ children, ...props }: ModalTitleProps) {
|
|
return (
|
|
<Modal.Title as="h2" {...props}>
|
|
{children}
|
|
</Modal.Title>
|
|
)
|
|
}
|
|
|
|
export function OLModalBody({ children, ...props }: ModalBodyProps) {
|
|
return <Modal.Body {...props}>{children}</Modal.Body>
|
|
}
|
|
|
|
export function OLModalFooter({ children, ...props }: ModalFooterProps) {
|
|
return <Modal.Footer {...props}>{children}</Modal.Footer>
|
|
}
|