@douyinfe/semi-ui 2.4.1 → 2.6.0-beta.0

package/calendar/monthCalendar.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 import React, { ReactInstance } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
@@ -180,16 +181,16 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         const { markWeekend, displayValue } = this.props;
         this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
         return (
-            <div className={`${prefixCls}-header`}>
-                <div role="gridcell" className={`${prefixCls}-grid`}>
-                    <ul className={`${prefixCls}-grid-row`}>
+            <div className={`${prefixCls}-header`} role="presentation">
+                <div role="presentation" className={`${prefixCls}-grid`}>
+                    <ul role="row" className={`${prefixCls}-grid-row`}>
                         {this.monthlyData[0].map(day => {
                             const { weekday } = day;
                             const listCls = cls({
                                 [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend,
                             });
                             return (
-                                <li key={`${weekday}-monthheader`} className={listCls}>
+                                <li role="columnheader" aria-label={weekday} key={`${weekday}-monthheader`} className={listCls}>
                                     <span>{weekday}</span>
                                 </li>
                             );
@@ -268,7 +269,7 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         const pos = showCard && showCard[key] ? showCard[key][1] : 'leftTopOver';
         const text = (
             <LocaleConsumer componentName="Calendar">
-                {(locale: Locale['Calendar']) => (
+                {(locale: Locale['Calendar']) => (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
                     <div
                         className={`${cardCls}-wrapper`}
                         style={{ bottom: 0 }}
@@ -330,8 +331,8 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         const { itemLimit } = this.state;
         const { display, day } = events;
         return (
-            <div role="gridcell" className={`${prefixCls}-weekrow`} ref={this.cellDom} key={`${index}-weekrow`}>
-                <ul className={`${prefixCls}-skeleton`}>
+            <div role="presentation" className={`${prefixCls}-weekrow`} ref={this.cellDom} key={`${index}-weekrow`}>
+                <ul role="row" className={`${prefixCls}-skeleton`}>
                     {weekDay.map(each => {
                         const { date, dayString, isToday, isSameMonth, isWeekend, month, ind } = each;
                         const listCls = cls({
@@ -341,7 +342,7 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
                         });
                         const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
                         const inner = (
-                            <li key={`${date}-weeksk`} className={listCls} onClick={e => this.handleClick(e, [date])}>
+                            <li role="gridcell" aria-label={date.toLocaleDateString()} aria-current={isToday ? "date" : false} key={`${date}-weeksk`} className={listCls} onClick={e => this.handleClick(e, [date])}>
                                 {this.formatDayString(month, dayString)}
                                 {this.renderCusDateGrid(date)}
                             </li>
@@ -362,8 +363,8 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
     renderMonthGrid = () => {
         const { parsedEvents } = this.state;
         return (
-            <div role="gridcell" className={`${prefixCls}-week`}>
-                <ul className={`${prefixCls}-grid-col`}>
+            <div role="presentation" className={`${prefixCls}-week`}>
+                <ul role="presentation" className={`${prefixCls}-grid-col`}>
                     {Object.keys(this.monthlyData).map(weekInd =>
                         this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd])
                     )}
@@ -383,12 +384,12 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         return (
             <LocaleConsumer componentName="Calendar">
                 {(locale: Locale['Calendar'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => (
-                    <div className={monthCls} key={this.state.itemLimit} style={monthStyle}>
-                        <div className={`${prefixCls}-sticky-top`}>
+                    <div role="grid" className={monthCls} key={this.state.itemLimit} style={monthStyle}>
+                        <div role="presentation" className={`${prefixCls}-sticky-top`}>
                             {header}
                             {this.renderHeader(dateFnsLocale)}
                         </div>
-                        <div className={`${prefixCls}-grid-wrapper`}>
+                        <div role="presentation" className={`${prefixCls}-grid-wrapper`}>
                             {this.renderMonthGrid()}
                         </div>
                     </div>

package/cascader/__test__/cascader.test.js

@@ -195,6 +195,30 @@ describe('Cascader', () => {
         // done();
     });
 
+    it('dynamic treeData in multiple and uncontrolled mode', () => {
+        const cascader = render({
+            defaultValue: 'Yazhou',
+            multiple: true,
+        });
+        const opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-selection-multiple .${BASE_CLASS_PREFIX}-tag`);
+        expect(opt.length).toEqual(1);
+        cascader.setProps({ treeData: treeDataWithDisabled });
+        cascader.update();
+        expect(opt.length).toEqual(1);
+    });
+
+    it('dynamic treeData in multiple and controlled mode', () => {
+        const cascader = render({
+            value: 'Yazhou',
+            multiple: true,
+        });
+        const opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-selection-multiple .${BASE_CLASS_PREFIX}-tag`);
+        expect(opt.length).toEqual(1);
+        cascader.setProps({ treeData: treeDataWithDisabled });
+        cascader.update();
+        expect(opt.length).toEqual(1);
+    });
+
     it('getPopupContainer', () => {
         let cascader = render({
             getPopupContainer: getPopupContainer,

package/cascader/_story/cascader.stories.js

@@ -1348,4 +1348,77 @@ export const LeafOnly = () => {
           />
       </div>
   );
+}
+
+export const DynamicTreeData = () => {
+  const [treeDataDemo1,setTreeData1]=useState(treeData2);
+  const [treeDataDemo2,setTreeData2]=useState(treeData2);
+  const [treeDataDemo3,setTreeData3]=useState(treeData2);
+  const [treeDataDemo4,setTreeData4]=useState(treeData2);
+  const [treeDataDemo5,setTreeData5]=useState(treeData2);
+  const [value3,setValue3]=useState();
+  const [value4,setValue4]=useState();
+  return (
+      <div>
+          <div>多选 + 动态更新 tree</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo1}
+            multiple 
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData1(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+          <div>单选 + 动态更新 tree</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo2}
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData2(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+          <div>多选 + 动态更新 tree + 受控</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo3}
+            multiple
+            value={value3}
+            onChange={v=>{
+              console.log(v);
+              setValue3(v);
+            }}
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData3(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+          <div>单选 + 动态更新 tree + 受控</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo4}
+            value={value4}
+            onChange={v=>{
+              console.log(v);
+              setValue4(v);
+            }}
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData4(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+          <div>多选 + 动态更新 tree + defaultValue 为亚洲</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo5}
+            multiple
+            defaultValue='yazhou'
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData5(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+      </div>
+  );
 }

package/cascader/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, ReactNode, CSSProperties, MouseEvent } from 'react';
+import React, { Fragment, ReactNode, CSSProperties, MouseEvent, KeyboardEvent } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -14,7 +14,7 @@ import CascaderFoundation, {
 } from '@douyinfe/semi-foundation/cascader/foundation';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/cascader/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
-import { isEqual, isString, isEmpty, isFunction, isNumber, noop, flatten } from 'lodash';
+import { isSet, isEqual, isString, isEmpty, isFunction, isNumber, noop, flatten } from 'lodash';
 import '@douyinfe/semi-foundation/cascader/cascader.scss';
 import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
 import { findKeysForValues, convertDataToEntities, calcMergeType } from '@douyinfe/semi-foundation/cascader/util';
@@ -54,6 +54,7 @@ export interface CascaderProps extends BasicCascaderProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
     arrowIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
@@ -100,6 +101,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         'aria-errormessage': PropTypes.string,
         'aria-describedby': PropTypes.string,
         'aria-required': PropTypes.bool,
+        'aria-label': PropTypes.string,
         arrowIcon: PropTypes.node,
         changeOnSelect: PropTypes.bool,
         defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
@@ -197,6 +199,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onDropdownVisibleChange: noop,
         onListScroll: noop,
         enableLeafClick: false,
+        'aria-label': 'Cascader'
     };
 
     options: any;
@@ -426,7 +429,10 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     });
                     realKeys = formatKeys;
                 }
-                const calRes = calcCheckedKeys(flatten(realKeys as string[]), keyEntities);
+                if (isSet(realKeys)) {
+                    realKeys = [...realKeys];
+                }
+                const calRes = calcCheckedKeys(flatten(realKeys), keyEntities);
                 const checkedKeys = new Set(calRes.checkedKeys);
                 const halfCheckedKeys = new Set(calRes.halfCheckedKeys);
                 // disableStrictly
@@ -581,7 +587,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         );
     }
 
-    handleItemClick = (e: MouseEvent, item: Entity | Data) => {
+    handleItemClick = (e: MouseEvent | KeyboardEvent, item: Entity | Data) => {
         this.foundation.handleItemClick(e, item);
     };
 
@@ -795,6 +801,14 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         this.foundation.handleClear();
     };
 
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress = (e: KeyboardEvent) => {
+        e && e.stopPropagation();
+        this.foundation.handleClearEnterPress();
+    };
+
     showClearBtn = () => {
         const { showClear, disabled, multiple } = this.props;
         const { selectedKeys, isOpen, isHovering, checkedKeys } = this.state;
@@ -808,7 +822,13 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const allowClear = this.showClearBtn();
         if (allowClear) {
             return (
-                <div className={clearCls} onClick={this.handleClear} role='button' tabIndex={0}>
+                <div 
+                    className={clearCls}
+                    onClick={this.handleClear} 
+                    onKeyPress={this.handleClearEnterPress}
+                    role='button' 
+                    tabIndex={0}
+                >
                     <IconClear />
                 </div>
             );
@@ -888,6 +908,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 style={style}
                 ref={this.triggerRef}
                 onClick={e => this.foundation.handleClick(e)}
+                onKeyPress={e => this.foundation.handleSelectionEnterPress(e)}
                 aria-invalid={this.props['aria-invalid']}
                 aria-errormessage={this.props['aria-errormessage']}
                 aria-label={this.props['aria-label']}

package/cascader/item.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/cascader/constants';
+import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 import { includes } from 'lodash';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -43,7 +44,7 @@ export interface CascaderItemProps {
     selectedKeys: Set<string>;
     loadedKeys: Set<string>;
     loadingKeys: Set<string>;
-    onItemClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onItemClick: (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => void;
     onItemHover: (e: React.MouseEvent, item: Entity) => void;
     showNext: ShowNextType;
     onItemCheckboxClick: (item: Entity | Data) => void;
@@ -84,7 +85,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         empty: false,
     };
 
-    onClick = (e: React.MouseEvent, item: Entity | Data) => {
+    onClick = (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => {
         const { onItemClick } = this.props;
         if (item.data.disabled || ('disabled' in item && item.disabled)) {
             return;
@@ -92,6 +93,15 @@ export default class Item extends PureComponent<CascaderItemProps> {
         onItemClick(e, item);
     };
 
+    /**
+     * A11y: simulate item click
+     */
+    handleItemEnterPress = (keyboardEvent: React.KeyboardEvent, item: Entity | Data) => {
+        if (isEnterPress(keyboardEvent)) {
+            this.onClick(keyboardEvent, item);
+        }
+    }
+
     onHover = (e: React.MouseEvent, item: Entity) => {
         const { showNext, onItemHover } = this.props;
         if (item.data.disabled) {
@@ -136,7 +146,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
             case 'loading':
                 return <Spin wrapperClassName={`${prefixcls}-spin-icon`} />;
             case 'empty':
-                return (<span className={`${prefixcls}-icon ${prefixcls}-icon-empty`} />);
+                return (<span aria-hidden={true} className={`${prefixcls}-icon ${prefixcls}-icon-empty`} />);
             default:
                 return null;
         }
@@ -179,11 +189,13 @@ export default class Item extends PureComponent<CascaderItemProps> {
                     });
                     return (
                         <li
+                            role='menuitem'
                             className={className}
                             key={key}
                             onClick={e => {
                                 this.onClick(e, item);
                             }}
+                            onKeyPress={e => this.handleItemEnterPress(e, item)}
                         >
                             <span className={`${prefixcls}-label`}>
                                 {!multiple && this.renderIcon('empty')}
@@ -211,9 +223,9 @@ export default class Item extends PureComponent<CascaderItemProps> {
         let showChildItem: Entity;
         const ind = content.length;
         content.push(
-            <ul className={`${prefixcls}-list`} key={renderData[0].key} onScroll={e => this.props.onListScroll(e, ind)}>
+            <ul role='menu' className={`${prefixcls}-list`} key={renderData[0].key} onScroll={e => this.props.onListScroll(e, ind)}>
                 {renderData.map(item => {
-                    const { data, key } = item;
+                    const { data, key, parentKey } = item;
                     const { children, label, disabled, isLeaf } = data;
                     const { active, selected, loading } = this.getItemStatus(key);
                     const hasChild = Boolean(children) && children.length;
@@ -226,13 +238,21 @@ export default class Item extends PureComponent<CascaderItemProps> {
                         [`${prefixcls}-select`]: selected && !multiple,
                         [`${prefixcls}-disabled`]: disabled
                     });
+                    const otherAriaProps = parentKey ? { ['aria-owns']: `cascaderItem-${parentKey}` } : {};
                     return (
                         <li
+                            role='menuitem'
+                            id={`cascaderItem-${key}`}
+                            aria-expanded={active}
+                            aria-haspopup={Boolean(showExpand)}
+                            aria-disabled={disabled}
+                            {...otherAriaProps}
                             className={className}
                             key={key}
                             onClick={e => {
                                 this.onClick(e, item);
                             }}
+                            onKeyPress={e => this.handleItemEnterPress(e, item)}
                             onMouseEnter={e => {
                                 this.onHover(e, item);
                             }}

package/datePicker/_story/v2/FixInputRangeFocus.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DatePicker, Button } from '../../../index';
+
+/**
+ * fix gitlab #1375
+ */
+App.storyName = 'fixed input range focus';
+export default function App() {
+    const [visible, setVisible] = React.useState(false);
+    return (
+        <div>
+            {/* <Button onClick={() => { setVisible(false); }}>关闭</Button> */}
+            <DatePicker
+                type="dateTimeRange"
+                bottomSlot={<Button onClick={() => { setVisible(false); }}>关闭</Button>}
+                onFocus={() => {
+                    console.log('focus');
+                    setVisible(true); 
+                }}
+                open={visible}
+                showClear
+            />
+        </div>
+    );
+}

package/datePicker/_story/v2/index.js

@@ -1,2 +1,3 @@
 export { default as YearButton } from './YearButton';
-export { default as PanelOpen  } from './PanelOpen';
+export { default as PanelOpen  } from './PanelOpen';
+export { default as FixInputRangeFocus } from './FixInputRangeFocus';

package/datePicker/dateInput.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/interactive-supports-focus */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable no-unused-vars */
 import React from 'react';
@@ -40,7 +41,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         value: PropTypes.array,
         disabled: PropTypes.bool,
         type: PropTypes.oneOf(strings.TYPE_SET),
-        multiple: PropTypes.bool,
         showClear: PropTypes.bool,
         format: PropTypes.string, // Attributes not used
         inputStyle: PropTypes.object,
@@ -65,7 +65,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onBlur: noop,
         onClear: noop,
         onFocus: noop,
-        multiple: false,
         type: 'date',
         inputStyle: {},
         inputReadOnly: false,
@@ -177,9 +176,12 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         const allowClear = (rangeStart || rangeEnd) && showClear;
         return allowClear && !disabled ? (
             <div
+                role="button"
+                tabIndex={0}
+                aria-label="Clear range input value"
                 className={`${prefixCls}-range-input-clearbtn`}
                 onMouseDown={e => !disabled && this.handleRangeInputClear(e)}>
-                <IconClear />
+                <IconClear aria-hidden />
             </div>
         ) : null;
     }
@@ -293,6 +295,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             validateStatus,
             block,
             prefixCls,
+            multiple, // Whether to allow multiple values for email and file types
             dateFnsLocale, // No need to pass to input
             onBlur,
             onClear,
@@ -310,8 +313,8 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             rangeSeparator,
             ...rest
         } = this.props;
-        const dateIcon = <IconCalendar />;
-        const dateTimeIcon = <IconCalendarClock />;
+        const dateIcon = <IconCalendar aria-hidden />;
+        const dateTimeIcon = <IconCalendarClock aria-hidden />;
         const suffix = type.includes('Time') ? dateTimeIcon : dateIcon;
         let text = '';
 

package/datePicker/datePicker.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
 /* eslint-disable max-len */
 import React from 'react';
 import classnames from 'classnames';
@@ -331,6 +332,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
         if (prevProps.open !== this.props.open) {
             this.foundation.initPanelOpenStatus();
+            if (!this.props.open) {
+                this.foundation.clearRangeInputFocus();
+            }
         }
     }
 
@@ -525,8 +529,12 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         };
 
         return (
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
             <div
+                // tooltip will mount a11y props to children
+                // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+                role="combobox"
+                aria-label={Array.isArray(value) && value.length ? "Change date" : "Choose date"}
+                aria-disabled={disabled}
                 onClick={this.handleTriggerWrapperClick}
                 className={inputCls}>
                 {typeof triggerRender === 'function' ? (

package/datePicker/month.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable max-len */
 import React from 'react';
 import classNames from 'classnames';
@@ -40,7 +41,8 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         startDateOffset: PropTypes.func,
         endDateOffset: PropTypes.func,
         rangeInputFocus: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-        focusRecordsRef: PropTypes.object
+        focusRecordsRef: PropTypes.object,
+        multiple: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -275,9 +277,9 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         // i18n
         const weekdaysText = weekdays.map(key => locale.weeks[key]);
         return (
-            <div className={weekdayCls}>
+            <div role="row" className={weekdayCls}>
                 {weekdaysText.map((E, i) => (
-                    <div key={E + i} className={weekdayItemCls}>
+                    <div role="columnheader" key={E + i} className={weekdayItemCls}>
                         {E}
                     </div>
                 ))}
@@ -305,7 +307,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
     renderWeek(week: MonthDayInfo[], weekIndex: number) {
         const weekCls = cssClasses.WEEK;
         return (
-            <div className={weekCls} key={weekIndex}>
+            <div role="row" className={weekCls} key={weekIndex}>
                 {week.map((day, dayIndex) => this.renderDay(day, dayIndex))}
             </div>
         );
@@ -317,7 +319,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         const { fullDate, dayNumber } = day;
         if (!fullDate) {
             return (
-                <div key={(dayNumber as number) + dayIndex} className={cssClasses.DAY}>
+                <div role="gridcell" tabIndex={-1} key={(dayNumber as number) + dayIndex} className={cssClasses.DAY}>
                     <span />
                 </div>
             );
@@ -356,6 +358,11 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
 
         return (
             <div
+                role="gridcell"
+                tabIndex={dayStatus.isDisabled ? -1 : 0}
+                aria-disabled={dayStatus.isDisabled}
+                aria-selected={dayStatus.isSelected}
+                aria-label={fullDate}
                 className={!customRender ? dayCls : cssClasses.DAY}
                 title={fullDate}
                 key={(dayNumber as number) + dayIndex}
@@ -373,13 +380,13 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
     }
 
     render() {
-        const { forwardRef } = this.props;
+        const { forwardRef, multiple } = this.props;
         const weekday = this.renderDayOfWeek();
         const weeks = this.renderWeeks();
         const monthCls = classNames(cssClasses.MONTH);
         const ref = forwardRef || this.monthRef;
         return (
-            <div ref={ref} className={monthCls}>
+            <div role="grid" aria-multiselectable={multiple} ref={ref} className={monthCls} >
                 {weekday}
                 {weeks}
             </div>

package/datePicker/monthsGrid.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/no-did-update-set-state */
 /* eslint-disable max-len */
 /* eslint-disable no-nested-ternary */
@@ -343,7 +344,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     renderMonth(month: Date, panelType: PanelType) {
         const { selected, rangeStart, rangeEnd, hoverDay, maxWeekNum, offsetRangeStart, offsetRangeEnd } = this.state;
-        const { weekStartsOn, disabledDate, locale, localeCode, renderDate, renderFullDate, startDateOffset, endDateOffset, density, rangeInputFocus, syncSwitchMonth } = this.props;
+        const { weekStartsOn, disabledDate, locale, localeCode, renderDate, renderFullDate, startDateOffset, endDateOffset, density, rangeInputFocus, syncSwitchMonth, multiple } = this.props;
         let monthText = '';
         // i18n monthText
         if (month) {
@@ -409,6 +410,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                     startDateOffset={startDateOffset}
                     endDateOffset={endDateOffset}
                     focusRecordsRef={this.props.focusRecordsRef}
+                    multiple={multiple}
                 />
             </div>
         );
@@ -580,12 +582,22 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
         return (
             <div className={switchCls} ref={current => this.adapter.setCache(`switch-${panelType}`, current)}>
-                <div className={dateCls} onClick={e => this.foundation.showDatePanel(panelType)}>
-                    {showSwithIcon && <IconCalendar />}
+                <div
+                    role="button"
+                    aria-label="Switch to date panel"
+                    className={dateCls}
+                    onClick={e => this.foundation.showDatePanel(panelType)}
+                >
+                    {showSwithIcon && <IconCalendar aria-hidden />}
                     <span className={textCls}>{dateText || monthText}</span>
                 </div>
-                <div className={timeCls} onClick={e => this.foundation.showTimePicker(panelType, true)}>
-                    {showSwithIcon && <IconClock />}
+                <div
+                    role="button"
+                    aria-label="Switch to time panel"
+                    className={timeCls}
+                    onClick={e => this.foundation.showTimePicker(panelType, true)}
+                >
+                    {showSwithIcon && <IconClock aria-hidden />}
                     <span className={textCls}>{timeText}</span>
                 </div>
             </div>

package/datePicker/navigation.tsx

@@ -101,7 +101,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
             <div className={prefixCls} ref={ref}>
                 <IconButton
                     key="double-chevron-left"
-                    icon={<IconDoubleChevronLeft size={iconBtnSize}/>} 
+                    aria-label="Previous year"
+                    icon={<IconDoubleChevronLeft aria-hidden size={iconBtnSize} />}
                     size={buttonSize}
                     theme={btnTheme}
                     noHorizontalPadding={btnNoHorizontalPadding}
@@ -110,7 +111,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
                 />
                 <IconButton
                     key="chevron-left"
-                    icon={<IconChevronLeft size={iconBtnSize} />}
+                    aria-label="Previous month"
+                    icon={<IconChevronLeft aria-hidden size={iconBtnSize} />}
                     size={buttonSize}
                     onClick={onPrevMonth}
                     theme={btnTheme}
@@ -124,7 +126,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
                 </div>
                 <IconButton
                     key="chevron-right"
-                    icon={<IconChevronRight size={iconBtnSize} />}
+                    aria-label="Next month"
+                    icon={<IconChevronRight aria-hidden size={iconBtnSize} />}
                     size={buttonSize}
                     onClick={onNextMonth}
                     theme={btnTheme}
@@ -133,7 +136,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
                 />
                 <IconButton
                     key="double-chevron-right"
-                    icon={<IconDoubleChevronRight size={iconBtnSize}/>} 
+                    aria-label="Next year"
+                    icon={<IconDoubleChevronRight aria-hidden size={iconBtnSize} />}
                     size={buttonSize}
                     theme={btnTheme}
                     noHorizontalPadding={btnNoHorizontalPadding}