diff --git a/src/mantine-core/src/Drawer/Drawer.test.tsx b/src/mantine-core/src/Drawer/Drawer.test.tsx index c2ef751524c..c00998e0605 100644 --- a/src/mantine-core/src/Drawer/Drawer.test.tsx +++ b/src/mantine-core/src/Drawer/Drawer.test.tsx @@ -36,6 +36,12 @@ describe('@mantine/core/Drawer', () => { expect(screen.getByText('test-title')).toBeInTheDocument(); }); + it('uses the provided id prop on the title and body', () => { + const { container } = render(); + expect(container.querySelectorAll('#my-drawer-title')).toHaveLength(1); + expect(container.querySelectorAll('#my-drawer-body')).toHaveLength(1); + }); + it('allows to hide close button with withCloseButton={false} prop', () => { const { container: withCloseButton } = render(); const { container: withoutCloseButton } = render( diff --git a/src/mantine-core/src/Drawer/Drawer.tsx b/src/mantine-core/src/Drawer/Drawer.tsx index 9f0e08c3fc0..648097e321a 100644 --- a/src/mantine-core/src/Drawer/Drawer.tsx +++ b/src/mantine-core/src/Drawer/Drawer.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { useScrollLock, useFocusTrap, useFocusReturn } from '@mantine/hooks'; +import { useScrollLock, useFocusTrap, useFocusReturn, useId } from '@mantine/hooks'; import { DefaultProps, MantineNumberSize, @@ -86,6 +86,9 @@ export interface DrawerProps /** Close button aria-label */ closeButtonLabel?: string; + /** id base, used to generate ids to connect drawer title and body with aria- attributes, defaults to random id */ + id?: string; + /** Target element or selector where drawer portal should be rendered */ target?: HTMLElement | string; @@ -149,6 +152,7 @@ export function Drawer(props: DrawerProps) { children, withOverlay, shadow, + id, padding, title, withCloseButton, @@ -162,6 +166,9 @@ export function Drawer(props: DrawerProps) { withFocusReturn, ...others } = useComponentDefaultProps('Drawer', defaultProps, props); + const baseId = useId(id); + const titleId = `${baseId}-title`; + const bodyId = `${baseId}-body`; const { classes, cx, theme } = useStyles( { size, position, zIndex, withOverlay }, @@ -216,7 +223,14 @@ export function Drawer(props: DrawerProps) { }} > {(transitionStyles) => ( - + className={cx(classes.drawer, className)} ref={focusTrapRef} @@ -235,7 +249,7 @@ export function Drawer(props: DrawerProps) { > {(title || withCloseButton) && (
- + {title} @@ -250,7 +264,8 @@ export function Drawer(props: DrawerProps) { )}
)} - {children} + +
{children}
{withOverlay && (