feat: Support aria pass to input

Author: zombieJ

src/Picker.tsx

@@ -22,7 +22,7 @@ import PickerPanel, {
 } from './PickerPanel';
 import PickerTrigger from './PickerTrigger';
 import { isEqual } from './utils/dateUtil';
-import { toArray } from './utils/miscUtil';
+import getDataOrAriaProps, { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
 import { PickerMode } from './interface';
 import {
@@ -31,7 +31,7 @@ import {
   addGlobalMouseDownEvent,
 } from './utils/uiUtil';
 
-export interface PickerSharedProps<DateType> {
+export interface PickerSharedProps<DateType> extends React.AriaAttributes {
   dropdownClassName?: string;
   dropdownAlign?: AlignType;
   popupStyle?: React.CSSProperties;
@@ -65,6 +65,9 @@ export interface PickerSharedProps<DateType> {
   // Internal
   /** @private Internal usage, do not use in production mode!!! */
   inputRef?: React.Ref<HTMLInputElement>;
+
+  // WAI-ARIA
+  role?: string;
 }
 
 export interface PickerBaseProps<DateType>
@@ -481,6 +484,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
               placeholder={placeholder}
               ref={inputRef}
               size={getInputSize(picker, formatList[0])}
+              {...getDataOrAriaProps(props)}
             />
             {suffixNode}
             {clearNode}

src/RangePicker.tsx

@@ -1,3 +1,9 @@
+/**
+ * TODO:
+ *  - Highlight range when hover the ranges value
+ *  - Click ranges value will go to the related panel
+ */
+
 import * as React from 'react';
 import classNames from 'classnames';
 import Picker, {

src/utils/miscUtil.ts

@@ -19,3 +19,20 @@ export function toArray<T>(val: T | T[]): T[] {
 
   return Array.isArray(val) ? val : [val];
 }
+
+export default function getDataOrAriaProps(props: any) {
+  const retProps: any = {};
+
+  Object.keys(props).forEach(key => {
+    if (
+      (key.substr(0, 5) === 'data-' ||
+        key.substr(0, 5) === 'aria-' ||
+        key === 'role') &&
+      key.substr(0, 7) !== 'data-__'
+    ) {
+      retProps[key] = props[key];
+    }
+  });
+
+  return retProps;
+}

tests/__snapshots__/picker.spec.tsx.snap

@@ -25,3 +25,22 @@ exports[`Basic icon 1`] = `
   </span>
 </div>
 `;
+
+exports[`Basic pass data- & aria- & role 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      aria-label="3334"
+      data-test="233"
+      readonly=""
+      role="search"
+      size="12"
+      value=""
+    />
+  </div>
+</div>
+`;

tests/picker.spec.tsx

@@ -494,4 +494,12 @@ describe('Basic', () => {
       isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:00', 'second'),
     ).toBeTruthy();
   });
+
+  it('pass data- & aria- & role', () => {
+    const wrapper = mount(
+      <MomentPicker data-test="233" aria-label="3334" role="search" />,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });