diff --git a/src/Drawer.tsx b/src/Drawer.tsx index a75b67e..4816b96 100644 --- a/src/Drawer.tsx +++ b/src/Drawer.tsx @@ -3,7 +3,10 @@ import Portal from '@rc-component/portal'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; import { RefContext } from './context'; -import type { DrawerPanelEvents } from './DrawerPanel'; +import type { + DrawerPanelAccessibility, + DrawerPanelEvents, +} from './DrawerPanel'; import type { DrawerPopupProps } from './DrawerPopup'; import DrawerPopup from './DrawerPopup'; import { warnCheck } from './util'; @@ -13,7 +16,8 @@ export type Placement = 'left' | 'top' | 'right' | 'bottom'; export interface DrawerProps extends Omit, - DrawerPanelEvents { + DrawerPanelEvents, + DrawerPanelAccessibility { prefixCls?: string; open?: boolean; onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void; diff --git a/src/DrawerPanel.tsx b/src/DrawerPanel.tsx index 2e19d76..8b30260 100644 --- a/src/DrawerPanel.tsx +++ b/src/DrawerPanel.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames'; import { useComposeRef } from 'rc-util'; import * as React from 'react'; import { RefContext } from './context'; +import pickAttrs from 'rc-util/lib/pickAttrs'; export interface DrawerPanelRef { focus: VoidFunction; @@ -16,7 +17,14 @@ export interface DrawerPanelEvents { onKeyUp?: React.KeyboardEventHandler; } -export interface DrawerPanelProps extends DrawerPanelEvents { +export type DrawerPanelAccessibility = Pick< + React.DialogHTMLAttributes, + keyof React.AriaAttributes +>; + +export interface DrawerPanelProps + extends DrawerPanelEvents, + DrawerPanelAccessibility { prefixCls: string; className?: string; id?: string; @@ -63,9 +71,10 @@ const DrawerPanel = (props: DrawerPanelProps) => { style={{ ...style, }} - aria-modal="true" role="dialog" ref={mergedRef} + {...pickAttrs(props, { aria: true })} + aria-modal="true" {...eventHandlers} > {children} diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx index deb681b..d8db75c 100644 --- a/src/DrawerPopup.tsx +++ b/src/DrawerPopup.tsx @@ -6,7 +6,10 @@ import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; import type { DrawerContextProps } from './context'; import DrawerContext from './context'; -import type { DrawerPanelEvents } from './DrawerPanel'; +import type { + DrawerPanelAccessibility, + DrawerPanelEvents, +} from './DrawerPanel'; import DrawerPanel from './DrawerPanel'; import { parseWidthHeight } from './util'; import type { DrawerClassNames, DrawerStyles } from './inter'; @@ -25,7 +28,9 @@ export interface PushConfig { distance?: number | string; } -export interface DrawerPopupProps extends DrawerPanelEvents { +export interface DrawerPopupProps + extends DrawerPanelEvents, + DrawerPanelAccessibility { prefixCls: string; open?: boolean; inline?: boolean; @@ -315,6 +320,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref) { ...style, ...styles?.content, }} + {...pickAttrs(props, { aria: true })} {...eventHandlers} > {children} diff --git a/src/util.ts b/src/util.ts index b28f88c..8c359c4 100644 --- a/src/util.ts +++ b/src/util.ts @@ -24,4 +24,4 @@ export function warnCheck(props: DrawerProps) { canUseDom() || !props.open, `Drawer with 'open' in SSR is not work since no place to createPortal. Please move to 'useEffect' instead.`, ); -} +} \ No newline at end of file diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 9510f77..19a25fd 100755 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -396,6 +396,27 @@ describe('rc-drawer-menu', () => { unmount(); }); + it('passes aria-describedby to the Panel', () => { + const description = 'some meaningful description'; + const { unmount, getByRole } = render(); + expect(getByRole('dialog')).toHaveAttribute('aria-describedby', description); + unmount(); + }); + + it('passes aria-labelledby to the Panel', () => { + const titleId = 'some-id'; + const { unmount, getByRole } = render( + +

Some Title

+
+ ); + expect(getByRole('dialog')).toHaveAttribute('aria-labelledby', titleId); + expect(getByRole('dialog', { + name: 'Some Title' + })).toBeVisible(); + unmount(); + }); + it('should support classNames', () => { const { unmount } = render(