fix: prevent aria props from being passed to wrapper div

Author: Pareder

src/BaseSelect/index.tsx

@@ -129,7 +129,11 @@ export interface BaseSelectPrivateProps {
 
 export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
 
-export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
+export interface BaseSelectProps
+  extends
+    BaseSelectPrivateProps,
+    React.AriaAttributes,
+    Pick<React.HTMLAttributes<HTMLElement>, 'role'> {
   // Style
   className?: string;
   style?: React.CSSProperties;

src/SelectInput/index.tsx

@@ -11,6 +11,7 @@ import { clsx } from 'clsx';
 import type { ComponentsConfig } from '../hooks/useComponents';
 import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import { composeRef } from '@rc-component/util/lib/ref';
+import pickAttrs from '@rc-component/util/lib/pickAttrs';
 
 export interface SelectInputRef {
   focus: (options?: FocusOptions) => void;
@@ -207,6 +208,8 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
 
   // ===================== Render =====================
   const domProps = omit(restProps, DEFAULT_OMIT_PROPS as any);
+  const ariaProps = pickAttrs(domProps, { aria: true });
+  const ariaKeys = Object.keys(ariaProps) as (keyof typeof domProps)[];
 
   // Create context value with wrapped callbacks
   const contextValue = {
@@ -228,7 +231,7 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
   return (
     <SelectInputContext.Provider value={contextValue}>
       <div
-        {...domProps}
+        {...omit(domProps, ariaKeys)}
         // Style
         ref={rootRef}
         className={className}

src/hooks/useBaseProps.ts

@@ -10,7 +10,6 @@ export interface BaseSelectContextProps extends BaseSelectProps {
   triggerOpen: boolean;
   multiple: boolean;
   toggleOpen: (open?: boolean) => void;
-  role?: React.AriaRole;
 }
 
 export const BaseSelectContext = React.createContext<BaseSelectContextProps>(null);

tests/Accessibility.test.tsx

@@ -213,6 +213,34 @@ describe('Select.Accessibility', () => {
         }
       });
     });
+
+    it('should pass aria and role attributes to Input component', async () => {
+      const { container } = render(
+        <Select
+          role="group"
+          aria-required="true"
+          options={[
+            {
+              value: '123',
+            },
+            {
+              value: '1234',
+            },
+            {
+              value: '12345',
+            },
+          ]}
+        />,
+      );
+
+      const wrapper = container.querySelector('.rc-select');
+      expect(wrapper).not.toHaveAttribute('role');
+      expect(wrapper).not.toHaveAttribute('aria-required');
+
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('role', 'group');
+      expect(input).toHaveAttribute('aria-required', 'true');
+    });
   });
 
   describe('Select Input attributes', () => {

tests/Select.test.tsx

@@ -136,12 +136,11 @@ describe('Select.Basic', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    // [Legacy] Should not use `role` since it's meaningless
     it('renders role prop correctly', () => {
       const { container } = render(
         genSelect({
           role: 'button',
-        } as any),
+        }),
       );
       expect(container.firstChild).toMatchSnapshot();
     });

tests/__snapshots__/Select.test.tsx.snap

@@ -108,8 +108,6 @@ exports[`Select.Basic filterOption could be true as described in default value 1
 
 exports[`Select.Basic render renders aria-attributes correctly 1`] = `
 <div
-  aria-label="some-label"
-  aria-labelledby="test-id"
   class="antd select-test antd-single antd-allow-clear antd-show-search"
 >
   <div
@@ -249,7 +247,6 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `null`;
 exports[`Select.Basic render renders role prop correctly 1`] = `
 <div
   class="antd select-test antd-single antd-allow-clear antd-show-search"
-  role="button"
 >
   <div
     class="antd-content"