refactor: tabIndex to tabindex, readOnly to readonly

2020-07-17 17:13:30 +08:00 · 2020-07-17 17:13:30 +08:00 · d67afec16a
parent f35ae0efae
commit d67afec16a
53 changed files with 106 additions and 106 deletions
--- a/components/_util/transButton.jsx
+++ b/components/_util/transButton.jsx
@ -58,7 +58,7 @@ const TransButton = {
    return (
      <div
        role="button"
-        tabIndex={0}
+        tabindex={0}
        ref="div"
        {...this.$attrs}
        onKeydown={this.onKeyDown}
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@ -125,7 +125,7 @@ const Alert = {
    });

    const closeIcon = closable ? (
-      <a type="button" onClick={this.handleClose} class={`${prefixCls}-close-icon`} tabIndex={0}>
+      <a type="button" onClick={this.handleClose} class={`${prefixCls}-close-icon`} tabindex={0}>
        {closeText ? <span class={`${prefixCls}-close-text`}>{closeText}</span> : <CloseOutlined />}
      </a>
    ) : null;
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@ -484,7 +484,7 @@ const Cascader = {
      placeholder: value && value.length > 0 ? undefined : placeholder,
      value: inputValue,
      disabled,
-      readOnly: !showSearch,
+      readonly: !showSearch,
      autoComplete: 'off',
      class: `${prefixCls}-input ${sizeCls}`,
      onFocus: showSearch ? this.handleInputFocus : noop,
--- a/components/color-picker/ColorPicker.jsx
+++ b/components/color-picker/ColorPicker.jsx
@ -185,7 +185,7 @@ export default {
        [`${prefixCls}-disabled`]: this.disabled,
      };
      return (
-        <div class={classString} tabIndex={disabled ? -1 : 0} onClick={this.handleOpenChange}>
+        <div class={classString} tabindex={disabled ? -1 : 0} onClick={this.handleOpenChange}>
          <div class={`${prefixCls}-selection`}>
            <div id={'color-picker-box' + this._uid}>
              <div id={'color-picker' + this._uid}></div>
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@ -386,20 +386,20 @@ export default {
        <span class={props.pickerInputClass}>
          <input
            disabled={props.disabled}
-            readOnly
+            readonly
            value={formatDate(start, props.format)}
            placeholder={startPlaceholder}
            class={`${prefixCls}-range-picker-input`}
-            tabIndex={-1}
+            tabindex={-1}
          />
          <span class={`${prefixCls}-range-picker-separator`}> {separator} </span>
          <input
            disabled={props.disabled}
-            readOnly
+            readonly
            value={formatDate(end, props.format)}
            placeholder={endPlaceholder}
            class={`${prefixCls}-range-picker-input`}
-            tabIndex={-1}
+            tabindex={-1}
          />
          {clearIcon}
          {inputIcon}
@ -431,7 +431,7 @@ export default {
        ref="picker"
        class={props.pickerClass}
        style={pickerStyle}
-        tabIndex={props.disabled ? -1 : 0}
+        tabindex={props.disabled ? -1 : 0}
        onFocus={focus}
        onBlur={blur}
        onMouseenter={this.onMouseEnter}
--- a/components/date-picker/WeekPicker.jsx
+++ b/components/date-picker/WeekPicker.jsx
@ -193,7 +193,7 @@ export default {
          <input
            ref="input"
            disabled={disabled}
-            readOnly
+            readonly
            value={(value && value.format(format)) || ''}
            placeholder={placeholder}
            class={pickerInputClass}
--- a/components/date-picker/createPicker.js
+++ b/components/date-picker/createPicker.js
@ -223,11 +223,11 @@ export default function createPicker(TheCalendar, props) {
            disabled={props.disabled}
            onFocus={focus}
            onBlur={blur}
-            readOnly
+            readonly
            value={formatDate(inputValue, this.format)}
            placeholder={placeholder}
            class={props.pickerInputClass}
-            tabIndex={props.tabIndex}
+            tabindex={props.tabindex}
            name={this.name}
          />
          {clearIcon}
@ -255,7 +255,7 @@ export default function createPicker(TheCalendar, props) {
        <span
          class={props.pickerClass}
          style={pickerStyle}
-          // tabIndex={props.disabled ? -1 : 0}
+          // tabindex={props.disabled ? -1 : 0}
          // onFocus={focus}
          // onBlur={blur}
          onMouseenter={this.onMouseEnter}
--- a/components/date-picker/interface.js
+++ b/components/date-picker/interface.js
@ -27,7 +27,7 @@ export const PickerProps = () => ({
  timePicker: PropTypes.any,
  autoFocus: PropTypes.bool,
  tagPrefixCls: PropTypes.string,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  align: PropTypes.object.def(() => ({})),
  inputReadOnly: PropTypes.bool,
  valueFormat: PropTypes.string,
--- a/components/input-number/index.jsx
+++ b/components/input-number/index.jsx
@ -14,7 +14,7 @@ export const InputNumberProps = {
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  tabIndex: PropTypes.number,
+  tabindex: PropTypes.number,
  disabled: PropTypes.bool,
  size: PropTypes.oneOf(['large', 'small', 'default']),
  formatter: PropTypes.func,
--- a/components/input/ClearableLabeledInput.jsx
+++ b/components/input/ClearableLabeledInput.jsx
@ -32,15 +32,15 @@ const ClearableLabeledInput = {
    prefix: PropTypes.any,
    addonBefore: PropTypes.any,
    addonAfter: PropTypes.any,
-    readOnly: PropTypes.bool,
+    readonly: PropTypes.bool,
  },
  methods: {
    renderClearIcon(prefixCls) {
-      const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.$props;
+      const { allowClear, value, disabled, readonly, inputType, handleReset } = this.$props;
      if (
        !allowClear ||
        disabled ||
-        readOnly ||
+        readonly ||
        value === undefined ||
        value === null ||
        value === ''
--- a/components/input/tests/index.test.js
+++ b/components/input/tests/index.test.js
@ -36,7 +36,7 @@ focusTest(TextArea);
 describe('TextArea', () => {
  it('should auto calculate height according to content length', async () => {
    const wrapper = mount(TextArea, {
-      propsData: { value: '', readOnly: true, autoSize: true },
+      propsData: { value: '', readonly: true, autoSize: true },
      sync: false,
    });

--- a/components/input/inputProps.js
+++ b/components/input/inputProps.js
@ -12,7 +12,7 @@ export default {
  name: String,
  size: PropTypes.oneOf(['small', 'large', 'default']),
  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
+  readonly: PropTypes.bool,
  addonBefore: PropTypes.any,
  addonAfter: PropTypes.any,
  // onPressEnter?: React.FormEventHandler<any>;
--- a/components/mentions/tests/snapshots/demo.test.js.snap
+++ b/components/mentions/tests/snapshots/demo.test.js.snap
@ -41,6 +41,6 @@ exports[`renders ./antdv-demo/docs/mentions/demo/readonly.md correctly 1`] = `
  <div style="margin-bottom: 10px;">
    <div class="ant-mentions ant-mentions-disabled"><textarea disabled="disabled" rows="1" placeholder="this is disabled Mentions"></textarea></div>
  </div>
-  <div class="ant-mentions"><textarea rows="1" placeholder="this is readOnly a-mentions" readonly="readonly"></textarea></div>
+  <div class="ant-mentions"><textarea rows="1" placeholder="this is readonly a-mentions" readonly="readonly"></textarea></div>
 </div>
 `;
--- a/components/select/index.jsx
+++ b/components/select/index.jsx
@ -28,7 +28,7 @@ const AbstractSelectProps = () => ({
  showSearch: PropTypes.bool,
  allowClear: PropTypes.bool,
  disabled: PropTypes.bool,
-  tabIndex: PropTypes.number,
+  tabindex: PropTypes.number,
  placeholder: PropTypes.any,
  defaultActiveFirstOption: PropTypes.bool,
  dropdownClassName: PropTypes.string,
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@ -18,7 +18,7 @@ const Switch = {
    disabled: PropTypes.bool,
    checkedChildren: PropTypes.any,
    unCheckedChildren: PropTypes.any,
-    tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    checked: PropTypes.bool,
    defaultChecked: PropTypes.bool,
    autoFocus: PropTypes.bool,
--- a/components/vc-calendar/src/Calendar.jsx
+++ b/components/vc-calendar/src/Calendar.jsx
@ -320,7 +320,7 @@ const Calendar = {
    children.push(
      <div class={`${prefixCls}-panel`} key="panel">
        {dateInputElement}
-        <div tabIndex={props.focusablePanel ? 0 : undefined} class={`${prefixCls}-date-panel`}>
+        <div tabindex={props.focusablePanel ? 0 : undefined} class={`${prefixCls}-date-panel`}>
          <CalendarHeader
            locale={locale}
            mode={sMode}
--- a/components/vc-calendar/src/RangeCalendar.jsx
+++ b/components/vc-calendar/src/RangeCalendar.jsx
@ -821,7 +821,7 @@ const RangeCalendar = {
    }
    const extraFooter = this.renderFooter(mode);
    return (
-      <div ref="rootInstance" class={className} tabIndex="0" onKeydown={this.onKeyDown}>
+      <div ref="rootInstance" class={className} tabindex="0" onKeydown={this.onKeyDown}>
        {props.renderSidebar()}
        <div class={`${prefixCls}-panel`}>
          {showClear && sSelectedValue[0] && sSelectedValue[1] ? (
--- a/components/vc-calendar/src/date/DateInput.jsx
+++ b/components/vc-calendar/src/date/DateInput.jsx
@ -210,7 +210,7 @@ const DateInput = {
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            inputMode={inputMode}
-            readOnly={inputReadOnly}
+            readonly={inputReadOnly}
          />
        </div>
        {showClear ? (
--- a/components/vc-calendar/src/mixin/CalendarMixin.js
+++ b/components/vc-calendar/src/mixin/CalendarMixin.js
@ -75,7 +75,7 @@ const CalendarMixin = {
        <div
          ref="rootInstance"
          class={className}
-          tabIndex="0"
+          tabindex="0"
          onKeydown={this.onKeyDown || noop}
          onBlur={this.onBlur || noop}
        >
--- a/components/vc-cascader/Cascader.jsx
+++ b/components/vc-cascader/Cascader.jsx
@ -381,7 +381,7 @@ export default {
        {children &&
          cloneElement(children[0], {
            onKeydown: handleKeyDown,
-            tabIndex: disabled ? undefined : 0,
+            tabindex: disabled ? undefined : 0,
          })}
      </Trigger>
    );
--- a/components/vc-checkbox/src/Checkbox.jsx
+++ b/components/vc-checkbox/src/Checkbox.jsx
@ -21,8 +21,8 @@ export default {
      // onBlur: PropTypes.func,
      // onChange: PropTypes.func,
      // onClick: PropTypes.func,
-      tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      readOnly: PropTypes.bool,
+      tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      readonly: PropTypes.bool,
      autoFocus: PropTypes.bool,
      value: PropTypes.any,
    },
@ -100,8 +100,8 @@ export default {
      id,
      type,
      disabled,
-      readOnly,
-      tabIndex,
+      readonly,
+      tabindex,
      autoFocus,
      onFocus,
      onBlur,
@ -125,9 +125,9 @@ export default {
      name,
      id,
      type,
-      readOnly,
+      readonly,
      disabled,
-      tabIndex,
+      tabindex,
      class: `${prefixCls}-input`,
      checked: !!sChecked,
      autoFocus,
--- a/components/vc-collapse/src/Panel.jsx
+++ b/components/vc-collapse/src/Panel.jsx
@ -77,7 +77,7 @@ export default {
          onClick={this.handleItemClick}
          onKeypress={this.handleKeyPress}
          role={accordion ? 'tab' : 'button'}
-          tabIndex={disabled ? -1 : 0}
+          tabindex={disabled ? -1 : 0}
          aria-expanded={isActive}
        >
          {showArrow && icon}
--- a/components/vc-dialog/Dialog.jsx
+++ b/components/vc-dialog/Dialog.jsx
@ -279,7 +279,7 @@ export default {
          forceRender={forceRender}
          onMousedown={this.onDialogMouseDown}
        >
-          <div tabIndex={0} ref="sentinelStart" style={sentinelStyle} aria-hidden="true" />
+          <div tabindex={0} ref="sentinelStart" style={sentinelStyle} aria-hidden="true" />
          <div class={`${prefixCls}-content`}>
            {closer}
            {header}
@ -288,7 +288,7 @@ export default {
            </div>
            {footer}
          </div>
-          <div tabIndex={0} ref="sentinelEnd" style={sentinelStyle} aria-hidden="true" />
+          <div tabindex={0} ref="sentinelEnd" style={sentinelStyle} aria-hidden="true" />
        </LazyRenderBox>
      );
      const dialogTransitionProps = getTransitionProps(transitionName, {
@ -421,7 +421,7 @@ export default {
      <div class={`${prefixCls}-root`}>
        {this.getMaskElement()}
        <div
-          tabIndex={-1}
+          tabindex={-1}
          onKeydown={this.onKeydown}
          class={`${prefixCls}-wrap ${wrapClassName || ''}`}
          ref="wrap"
--- a/components/vc-drawer/src/Drawer.js
+++ b/components/vc-drawer/src/Drawer.js
@ -479,7 +479,7 @@ const Drawer = {
            this.dom = c;
          }}
          {...domContProps}
-          tabIndex={-1}
+          tabindex={-1}
        >
          {showMask && (
            <div
--- a/components/vc-input-number/src/index.js
+++ b/components/vc-input-number/src/index.js
@ -50,12 +50,12 @@ const inputNumberProps = {
  // onKeyDown: PropTypes.func,
  // onKeyUp: PropTypes.func,
  prefixCls: PropTypes.string,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  placeholder: PropTypes.string,
  disabled: PropTypes.bool,
  // onFocus: PropTypes.func,
  // onBlur: PropTypes.func,
-  readOnly: PropTypes.bool,
+  readonly: PropTypes.bool,
  max: PropTypes.number,
  min: PropTypes.number,
  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@ -640,7 +640,7 @@ export default {
    const {
      prefixCls,
      disabled,
-      readOnly,
+      readonly,
      useTouch,
      autoComplete,
      upHandler,
@ -681,7 +681,7 @@ export default {
      }
    }

-    const editable = !this.readOnly && !this.disabled;
+    const editable = !this.readonly && !this.disabled;

    // focus state, show input value
    // unfocus state, show valid value
@ -710,8 +710,8 @@ export default {
        onMouseleave: this.stop,
      };
    }
-    const isUpDisabled = !!upDisabledClass || disabled || readOnly;
-    const isDownDisabled = !!downDisabledClass || disabled || readOnly;
+    const isUpDisabled = !!upDisabledClass || disabled || readonly;
+    const isDownDisabled = !!downDisabledClass || disabled || readonly;

    const upHandlerProps = {
      disabled: isUpDisabled,
@ -777,13 +777,13 @@ export default {
            placeholder={this.placeholder}
            onClick={this.handleInputClick}
            class={`${prefixCls}-input`}
-            tabIndex={this.tabIndex}
+            tabindex={this.tabindex}
            autoComplete={autoComplete}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            onKeydown={editable ? this.onKeyDown : noop}
            onKeyup={editable ? this.onKeyUp : noop}
-            readOnly={this.readOnly}
+            readonly={this.readonly}
            disabled={this.disabled}
            max={this.max}
            min={this.min}
--- a/components/vc-menu/SubPopupMenu.jsx
+++ b/components/vc-menu/SubPopupMenu.jsx
@ -373,7 +373,7 @@ const SubPopupMenu = {
    //   domProps.id = props.id
    // }
    if (props.focusable) {
-      domWrapProps.tabIndex = '0';
+      domWrapProps.tabindex = '0';
      domWrapProps.onKeydown = this.onKeyDown;
    }
    delete domWrapProps.children;
--- a/components/vc-notification/Notice.jsx
+++ b/components/vc-notification/Notice.jsx
@ -78,7 +78,7 @@ export default {
      >
        <div class={`${componentClass}-content`}>{getSlot(this)}</div>
        {closable ? (
-          <a tabIndex="0" onClick={close} class={`${componentClass}-close`}>
+          <a tabindex="0" onClick={close} class={`${componentClass}-close`}>
            {closeIcon || <span class={`${componentClass}-close-x`} />}
          </a>
        ) : null}
--- a/components/vc-pagination/Pager.jsx
+++ b/components/vc-pagination/Pager.jsx
@ -43,7 +43,7 @@ export default {
        onClick={this.handleClick}
        onKeypress={this.handleKeyPress}
        title={this.showTitle ? this.page : null}
-        tabIndex="0"
+        tabindex="0"
        class={cls}
        style={style}
      >
--- a/components/vc-pagination/Pagination.jsx
+++ b/components/vc-pagination/Pagination.jsx
@ -363,7 +363,7 @@ export default {
          <li
            title={this.showTitle ? locale.prev_page : null}
            onClick={this.prev}
-            tabIndex={hasPrev ? 0 : null}
+            tabindex={hasPrev ? 0 : null}
            onKeypress={this.runIfEnterPrev}
            class={`${hasPrev ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
            aria-disabled={!this.hasPrev()}
@ -395,7 +395,7 @@ export default {
          <li
            title={this.showTitle ? locale.next_page : null}
            onClick={this.next}
-            tabIndex={this.hasNext ? 0 : null}
+            tabindex={this.hasNext ? 0 : null}
            onKeypress={this.runIfEnterNext}
            class={`${hasNext ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
            aria-disabled={!this.hasNext()}
@ -437,7 +437,7 @@ export default {
            title={this.showTitle ? prevItemTitle : null}
            key="prev"
            onClick={this.jumpPrev}
-            tabIndex="0"
+            tabindex="0"
            onKeypress={this.runIfEnterJumpPrev}
            class={jumpPrevClassString}
          >
@ -452,7 +452,7 @@ export default {
          <li
            title={this.showTitle ? nextItemTitle : null}
            key="next"
-            tabIndex="0"
+            tabindex="0"
            onClick={this.jumpNext}
            onKeypress={this.runIfEnterJumpNext}
            class={jumpNextClassString}
@ -590,7 +590,7 @@ export default {
        <li
          title={this.showTitle ? locale.prev_page : null}
          onClick={this.prev}
-          tabIndex={prevDisabled ? null : 0}
+          tabindex={prevDisabled ? null : 0}
          onKeypress={this.runIfEnterPrev}
          class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
          aria-disabled={prevDisabled}
@ -601,7 +601,7 @@ export default {
        <li
          title={this.showTitle ? locale.next_page : null}
          onClick={this.next}
-          tabIndex={nextDisabled ? null : 0}
+          tabindex={nextDisabled ? null : 0}
          onKeypress={this.runIfEnterNext}
          class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
          aria-disabled={nextDisabled}
--- a/components/vc-rate/src/Rate.jsx
+++ b/components/vc-rate/src/Rate.jsx
@ -16,7 +16,7 @@ const rateProps = {
  prefixCls: PropTypes.string,
  character: PropTypes.any,
  characterRender: PropTypes.func,
-  tabIndex: PropTypes.number,
+  tabindex: PropTypes.number,
  autoFocus: PropTypes.bool,
 };

@ -32,7 +32,7 @@ export default {
    allowHalf: false,
    allowClear: true,
    prefixCls: 'rc-rate',
-    tabIndex: 0,
+    tabindex: 0,
    character: '★',
  }),
  data() {
@ -164,7 +164,7 @@ export default {
    },
  },
  render() {
-    const { count, allowHalf, prefixCls, disabled, tabIndex } = getOptionProps(this);
+    const { count, allowHalf, prefixCls, disabled, tabindex } = getOptionProps(this);
    const { sValue, hoverValue, focused } = this;
    const { class: className, style } = this.$attrs;
    const stars = [];
@ -194,7 +194,7 @@ export default {
        class={classNames(prefixCls, disabledClass, className)}
        style={style}
        onMouseleave={disabled ? noop : this.onMouseLeave}
-        tabIndex={disabled ? -1 : tabIndex}
+        tabindex={disabled ? -1 : tabindex}
        onFocus={disabled ? noop : this.onFocus}
        onBlur={disabled ? noop : this.onBlur}
        onKeydown={disabled ? noop : this.onKeyDown}
--- a/components/vc-rate/src/Star.jsx
+++ b/components/vc-rate/src/Star.jsx
@ -77,7 +77,7 @@ export default {
          aria-checked={value > index ? 'true' : 'false'}
          aria-posinset={index + 1}
          aria-setsize={count}
-          tabIndex={0}
+          tabindex={0}
        >
          <div class={`${prefixCls}-first`}>{character}</div>
          <div class={`${prefixCls}-second`}>{character}</div>
--- a/components/vc-select/DropdownMenu.jsx
+++ b/components/vc-select/DropdownMenu.jsx
@ -200,7 +200,7 @@ export default {
          transform: 'translateZ(0)',
        }}
        id={this.$props.ariaId}
-        tabIndex="-1"
+        tabindex="-1"
        onFocus={onPopupFocus}
        onMousedown={preventDefaultEvent}
        onScroll={onPopupScroll}
--- a/components/vc-select/PropTypes.js
+++ b/components/vc-select/PropTypes.js
@ -55,7 +55,7 @@ export const SelectPropTypes = {
  dropdownMatchSelectWidth: PropTypes.bool,
  dropdownMenuStyle: PropTypes.object,
  notFoundContent: PropTypes.oneOfType([String, Number]),
-  tabIndex: PropTypes.oneOfType([String, Number]),
+  tabindex: PropTypes.oneOfType([String, Number]),
  __propsSymbol__: PropTypes.any,
  children: PropTypes.array,
 };
--- a/components/vc-select/Select.jsx
+++ b/components/vc-select/Select.jsx
@ -95,7 +95,7 @@ const Select = {
    combobox: PropTypes.bool.def(false),
    tokenSeparators: PropTypes.arrayOf(PropTypes.string).def([]),
    autoClearSearchValue: PropTypes.bool.def(true),
-    tabIndex: PropTypes.any.def(0),
+    tabindex: PropTypes.any.def(0),
    dropdownRender: PropTypes.func.def(menu => menu),
    // onChange: noop,
    // onFocus: noop,
@ -1541,7 +1541,7 @@ const Select = {
    // selectionProps.on.keydown = this.onKeyDown;
    // selectionProps.on.focus = this.selectionRefFocus;
    // selectionProps.on.blur = this.selectionRefBlur;
-    // selectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
+    // selectionProps.attrs.tabindex = props.disabled ? -1 : props.tabindex;
    //}
    const rootCls = {
      [className]: className,
@ -1598,7 +1598,7 @@ const Select = {
          onMousedown={this.markMouseDown}
          onMouseup={this.markMouseLeave}
          onMouseout={this.markMouseLeave}
-          tabIndex={props.disabled ? -1 : props.tabIndex}
+          tabindex={props.disabled ? -1 : props.tabindex}
          onBlur={this.selectionRefBlur}
          onFocus={this.selectionRefFocus}
          onClick={this.selectionRefClick}
--- a/components/vc-slick/src/slider.js
+++ b/components/vc-slick/src/slider.js
@ -163,7 +163,7 @@ export default {
            cloneElement(children[k], {
              key: 100 * i + 10 * j + k,
              attrs: {
-                tabIndex: -1,
+                tabindex: -1,
              },
              style: {
                width: `${100 / settings.slidesPerRow}%`,
--- a/components/vc-slick/src/track.js
+++ b/components/vc-slick/src/track.js
@ -109,7 +109,7 @@ const renderSlides = function(spec, children, createElement) {
        {
          key: 'original' + getKey(child, index),
          attrs: {
-            tabIndex: '-1',
+            tabindex: '-1',
            'data-index': index,
            'aria-hidden': !slideClasses['slick-active'],
          },
@ -142,7 +142,7 @@ const renderSlides = function(spec, children, createElement) {
            key: 'precloned' + getKey(child, key),
            class: classnames(slideClasses, slideClass),
            attrs: {
-              tabIndex: '-1',
+              tabindex: '-1',
              'data-index': key,
              'aria-hidden': !slideClasses['slick-active'],
            },
@ -169,7 +169,7 @@ const renderSlides = function(spec, children, createElement) {
          cloneElement(child, {
            key: 'postcloned' + getKey(child, key),
            attrs: {
-              tabIndex: '-1',
+              tabindex: '-1',
              'data-index': key,
              'aria-hidden': !slideClasses['slick-active'],
            },
--- a/components/vc-slider/src/Handle.jsx
+++ b/components/vc-slider/src/Handle.jsx
@ -15,7 +15,7 @@ export default {
    min: PropTypes.number,
    max: PropTypes.number,
    value: PropTypes.number,
-    tabIndex: PropTypes.number,
+    tabindex: PropTypes.number,
    className: PropTypes.string,
    reverse: PropTypes.bool,
    // handleFocus: PropTypes.func.def(noop),
@ -78,7 +78,7 @@ export default {
      min,
      max,
      value,
-      tabIndex,
+      tabindex,
    } = getOptionProps(this);
    const className = classNames(this.$props.className, {
      [`${prefixCls}-handle-click-focused`]: this.clickFocused,
@ -102,15 +102,15 @@ export default {
      'aria-valuenow': value,
      'aria-disabled': !!disabled,
    };
-    let _tabIndex = tabIndex || 0;
-    if (disabled || tabIndex === null) {
+    let _tabIndex = tabindex || 0;
+    if (disabled || tabindex === null) {
      _tabIndex = null;
    }

    const handleProps = {
      attrs: {
        role: 'slider',
-        tabIndex: _tabIndex,
+        tabindex: _tabIndex,
        ...ariaProps,
      },
      class: className,
--- a/components/vc-slider/src/Range.jsx
+++ b/components/vc-slider/src/Range.jsx
@ -30,7 +30,7 @@ const rangeProps = {
  allowCross: PropTypes.bool,
  disabled: PropTypes.bool,
  reverse: PropTypes.bool,
-  tabIndex: PropTypes.arrayOf(PropTypes.number),
+  tabindex: PropTypes.arrayOf(PropTypes.number),
  prefixCls: PropTypes.string,
  min: PropTypes.number,
  max: PropTypes.number,
@ -44,7 +44,7 @@ const Range = {
    count: 1,
    allowCross: true,
    pushable: false,
-    tabIndex: [],
+    tabindex: [],
  }),
  data() {
    const { count, min, max } = this;
@ -395,15 +395,15 @@ const Range = {
        defaultHandle,
        trackStyle,
        handleStyle,
-        tabIndex,
+        tabindex,
      } = this;
      const handleGenerator = handle || defaultHandle;
      const offsets = bounds.map(v => this.calcOffset(v));

      const handleClassName = `${prefixCls}-handle`;
      const handles = bounds.map((v, i) => {
-        let _tabIndex = tabIndex[i] || 0;
-        if (disabled || tabIndex[i] === null) {
+        let _tabIndex = tabindex[i] || 0;
+        if (disabled || tabindex[i] === null) {
          _tabIndex = null;
        }
        return handleGenerator({
@ -417,7 +417,7 @@ const Range = {
          value: v,
          dragging: sHandle === i,
          index: i,
-          tabIndex: _tabIndex,
+          tabindex: _tabIndex,
          min,
          max,
          reverse,
--- a/components/vc-slider/src/Slider.jsx
+++ b/components/vc-slider/src/Slider.jsx
@ -14,7 +14,7 @@ const Slider = {
    value: PropTypes.number,
    disabled: PropTypes.bool,
    autoFocus: PropTypes.bool,
-    tabIndex: PropTypes.number,
+    tabindex: PropTypes.number,
    reverse: PropTypes.bool,
    min: PropTypes.number,
    max: PropTypes.number,
@ -159,7 +159,7 @@ const Slider = {
        minimumTrackStyle,
        trackStyle,
        handleStyle,
-        tabIndex,
+        tabindex,
        min,
        max,
        reverse,
@ -181,7 +181,7 @@ const Slider = {
        max,
        reverse,
        index: 0,
-        tabIndex,
+        tabindex,
        style: handleStyle[0] || handleStyle,
        directives: [
          {
--- a/components/vc-slider/src/common/createSlider.jsx
+++ b/components/vc-slider/src/common/createSlider.jsx
@ -299,7 +299,7 @@ export default function createSlider(Component) {
      return (
        <div
          ref="sliderRef"
-          tabIndex="-1"
+          tabindex="-1"
          class={sliderClassName}
          onTouchstart={disabled ? noop : this.onTouchStart}
          onMousedown={disabled ? noop : this.onMouseDown}
--- a/components/vc-steps/Step.jsx
+++ b/components/vc-steps/Step.jsx
@ -118,7 +118,7 @@ export default {

    if (onStepClick && !disabled) {
      accessibilityProps.role = 'button';
-      accessibilityProps.tabIndex = 0;
+      accessibilityProps.tabindex = 0;
      accessibilityProps.onClick = this.onItemClick;
    }
    return (
--- a/components/vc-switch/PropTypes.js
+++ b/components/vc-switch/PropTypes.js
@ -8,7 +8,7 @@ export const switchPropTypes = {
  // onChange: PropTypes.func,
  // onMouseUp: PropTypes.func,
  // onClick: PropTypes.func,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  checked: PropTypes.bool,
  defaultChecked: PropTypes.bool.def(false),
  autoFocus: PropTypes.bool.def(false),
--- a/components/vc-table/src/BodyTable.jsx
+++ b/components/vc-table/src/BodyTable.jsx
@ -105,12 +105,12 @@ export default {
        </div>
      );
    }
-    // Should provides `tabIndex` if use scroll to enable keyboard scroll
+    // Should provides `tabindex` if use scroll to enable keyboard scroll
    const useTabIndex = scroll && (scroll.x || scroll.y);

    return (
      <div
-        tabIndex={useTabIndex ? -1 : undefined}
+        tabindex={useTabIndex ? -1 : undefined}
        key="bodyTable"
        class={`${prefixCls}-body`}
        style={bodyStyle}
--- a/components/vc-tabs/src/Sentinel.jsx
+++ b/components/vc-tabs/src/Sentinel.jsx
@ -31,7 +31,7 @@ export default {

    return (
      <div
-        tabIndex={0}
+        tabindex={0}
        ref={setRef}
        style={sentinelStyle}
        onKeydown={this.onKeyDown}
--- a/components/vc-tabs/src/TabBarRootNode.jsx
+++ b/components/vc-tabs/src/TabBarRootNode.jsx
@ -48,7 +48,7 @@ export default {
      <div
        role="tablist"
        class={cls}
-        tabIndex="0"
+        tabindex="0"
        onKeydown={onKeyDown}
        style={style}
        ref={this.saveRef('root')}
--- a/components/vc-time-picker/Header.jsx
+++ b/components/vc-time-picker/Header.jsx
@ -165,7 +165,7 @@ const Header = {
          value={str}
          placeholder={placeholder}
          onInput={this.onInputChange}
-          readOnly={!!inputReadOnly}
+          readonly={!!inputReadOnly}
          {...{
            directives: [
              {
--- a/components/vc-time-picker/Select.jsx
+++ b/components/vc-time-picker/Select.jsx
@ -83,7 +83,7 @@ const Select = {
            class={cls}
            key={index}
            disabled={item.disabled}
-            tabIndex="0"
+            tabindex="0"
            onKeydown={onKeyDown}
          >
            {item.value}
--- a/components/vc-time-picker/TimePicker.jsx
+++ b/components/vc-time-picker/TimePicker.jsx
@ -315,7 +315,7 @@ export default {
          class={`${prefixCls}-clear`}
          title={clearText}
          onClick={this.onClear}
-          tabIndex={0}
+          tabindex={0}
        >
          {clearIcon || <i class={`${prefixCls}-clear-icon`} />}
        </a>
@ -375,7 +375,7 @@ export default {
            onFocus={onFocus}
            onBlur={onBlur}
            autoFocus={autoFocus}
-            readOnly={!!inputReadOnly}
+            readonly={!!inputReadOnly}
            id={id}
          />
          {inputIcon || <span class={`${prefixCls}-icon`} />}
--- a/components/vc-tree-select/src/Base/BasePopup.jsx
+++ b/components/vc-tree-select/src/Base/BasePopup.jsx
@ -282,7 +282,7 @@ const BasePopup = {
    }

    return (
-      <div role="listbox" id={ariaId} onKeydown={onPopupKeyDown} tabIndex={-1}>
+      <div role="listbox" id={ariaId} onKeydown={onPopupKeyDown} tabindex={-1}>
        {renderSearch ? renderSearch() : null}
        {$tree}
      </div>
--- a/components/vc-tree-select/src/Base/BaseSelector.jsx
+++ b/components/vc-tree-select/src/Base/BaseSelector.jsx
@ -44,10 +44,10 @@ export default function(modeName) {
        // Pass by HOC
        renderSelection: PropTypes.func.isRequired,
        renderPlaceholder: PropTypes.func,
-        tabIndex: PropTypes.number,
+        tabindex: PropTypes.number,
      },
      {
-        tabIndex: 0,
+        tabindex: 0,
      },
    ),
    inject: {
@ -130,13 +130,13 @@ export default function(modeName) {
        ariaId,
        renderSelection,
        renderPlaceholder,
-        tabIndex,
+        tabindex,
      } = this.$props;
      const {
        vcTreeSelect: { onSelectorKeyDown },
      } = this;

-      let myTabIndex = tabIndex;
+      let myTabIndex = tabindex;
      if (disabled) {
        myTabIndex = null;
      }
@ -166,7 +166,7 @@ export default function(modeName) {
          aria-controls={open ? ariaId : undefined}
          aria-haspopup="listbox"
          aria-disabled={disabled}
-          tabIndex={myTabIndex}
+          tabindex={myTabIndex}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          onKeydown={onSelectorKeyDown}
--- a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
+++ b/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
@ -193,7 +193,7 @@ const MultipleSelector = {
        {...{
          props: {
            ...this.$props,
-            tabIndex: -1,
+            tabindex: -1,
            showArrow: false,
            renderSelection: this.renderSelection,
            renderPlaceholder: this._renderPlaceholder,
--- a/components/vc-tree/src/Tree.jsx
+++ b/components/vc-tree/src/Tree.jsx
@ -34,7 +34,7 @@ const Tree = {
  props: initDefaultProps(
    {
      prefixCls: PropTypes.string,
-      tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      children: PropTypes.any,
      treeData: PropTypes.array, // Generate treeNode by children
      showLine: PropTypes.bool,
@ -647,7 +647,7 @@ const Tree = {

  render() {
    const { _treeNode: treeNode } = this.$data;
-    const { prefixCls, focusable, showLine, tabIndex = 0 } = this.$props;
+    const { prefixCls, focusable, showLine, tabindex = 0 } = this.$props;
    const domProps = getDataAndAria({ ...this.$props, ...this.$attrs });
    const { class: className, style } = this.$attrs;
    return (
@ -659,7 +659,7 @@ const Tree = {
        style={style}
        role="tree"
        unselectable="on"
-        tabindex={focusable ? tabIndex : null}
+        tabindex={focusable ? tabindex : null}
      >
        {mapChildren(treeNode, (node, index) => this.renderTreeNode(node, index))}
      </ul>
--- a/components/vc-upload/src/AjaxUploader.jsx
+++ b/components/vc-upload/src/AjaxUploader.jsx
@ -233,7 +233,7 @@ const AjaxUploader = {
    const tagProps = {
      ...events,
      role: 'button',
-      tabIndex: disabled ? null : '0',
+      tabindex: disabled ? null : '0',
      class: cls,
      style,
    };