feat: support aria-labelledby and aria-describedby for dialog in Panel (#425)

* feat: support aria-labelledby and aria-describedby for dialog

The DrawerPanel has a dialog role which should support aria-labelledby and aria-describedby attributes.

* Allowing all aria-* props

* Removing custom method to pick aria props

Author: kapiljaveri

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<DrawerPopupProps, 'prefixCls' | 'inline' | 'scrollLocker'>,
-    DrawerPanelEvents {
+    DrawerPanelEvents,
+    DrawerPanelAccessibility {
   prefixCls?: string;
   open?: boolean;
   onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;

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<HTMLDivElement>;
 }
 
-export interface DrawerPanelProps extends DrawerPanelEvents {
+export type DrawerPanelAccessibility = Pick<
+  React.DialogHTMLAttributes<HTMLDivElement>,
+  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}

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<HTMLDivElement>) {
                 ...style,
                 ...styles?.content,
               }}
+              {...pickAttrs(props, { aria: true })}
               {...eventHandlers}
             >
               {children}

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.`,
   );
-}
+}

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(<Drawer open aria-describedby={description} />);
+    expect(getByRole('dialog')).toHaveAttribute('aria-describedby', description);
+    unmount();
+  });
+
+  it('passes aria-labelledby to the Panel', () => {
+    const titleId = 'some-id';
+    const { unmount, getByRole } = render(
+      <Drawer open aria-labelledby={titleId}>
+        <h1 id={titleId}>Some Title</h1>
+      </Drawer>
+    );
+    expect(getByRole('dialog')).toHaveAttribute('aria-labelledby', titleId);
+    expect(getByRole('dialog', {
+      name: 'Some Title'
+    })).toBeVisible();
+    unmount();
+  });
+
   it('should support classNames', () => {
     const { unmount } = render(
       <Drawer classNames={{