github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: tabIndex to tabindex, readOnly to readonly

pull/2682/head
tanjinzhou 2020-07-17 17:13:30 +08:00
parent f35ae0efae
commit d67afec16a
53 changed files with 106 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/_util/transButton.jsx
View File

@ -58,7 +58,7 @@ const TransButton = {
return ( return (
<div <div
role="button" role="button"
tabIndex={0} tabindex={0}
ref="div" ref="div"
{...this.$attrs} {...this.$attrs}
onKeydown={this.onKeyDown} onKeydown={this.onKeyDown}

2
components/alert/index.jsx
View File

@ -125,7 +125,7 @@ const Alert = {
}); });
const closeIcon = closable ? ( 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 />} {closeText ? <span class={`${prefixCls}-close-text`}>{closeText}</span> : <CloseOutlined />}
</a> </a>
) : null; ) : null;

2
components/cascader/index.jsx
View File

@ -484,7 +484,7 @@ const Cascader = {
placeholder: value && value.length > 0 ? undefined : placeholder, placeholder: value && value.length > 0 ? undefined : placeholder,
value: inputValue, value: inputValue,
disabled, disabled,
readOnly: !showSearch, readonly: !showSearch,
autoComplete: 'off', autoComplete: 'off',
class: `${prefixCls}-input ${sizeCls}`, class: `${prefixCls}-input ${sizeCls}`,
onFocus: showSearch ? this.handleInputFocus : noop, onFocus: showSearch ? this.handleInputFocus : noop,

2
components/color-picker/ColorPicker.jsx
View File

@ -185,7 +185,7 @@ export default {
[`${prefixCls}-disabled`]: this.disabled, [`${prefixCls}-disabled`]: this.disabled,
}; };
return ( 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 class={`${prefixCls}-selection`}>
<div id={'color-picker-box' + this._uid}> <div id={'color-picker-box' + this._uid}>
<div id={'color-picker' + this._uid}></div> <div id={'color-picker' + this._uid}></div>

10
components/date-picker/RangePicker.jsx
View File

@ -386,20 +386,20 @@ export default {
<span class={props.pickerInputClass}> <span class={props.pickerInputClass}>
<input <input
disabled={props.disabled} disabled={props.disabled}
readOnly readonly
value={formatDate(start, props.format)} value={formatDate(start, props.format)}
placeholder={startPlaceholder} placeholder={startPlaceholder}
class={`${prefixCls}-range-picker-input`} class={`${prefixCls}-range-picker-input`}
tabIndex={-1} tabindex={-1}
/> />
<span class={`${prefixCls}-range-picker-separator`}> {separator} </span> <span class={`${prefixCls}-range-picker-separator`}> {separator} </span>
<input <input
disabled={props.disabled} disabled={props.disabled}
readOnly readonly
value={formatDate(end, props.format)} value={formatDate(end, props.format)}
placeholder={endPlaceholder} placeholder={endPlaceholder}
class={`${prefixCls}-range-picker-input`} class={`${prefixCls}-range-picker-input`}
tabIndex={-1} tabindex={-1}
/> />
{clearIcon} {clearIcon}
{inputIcon} {inputIcon}
@ -431,7 +431,7 @@ export default {
ref="picker" ref="picker"
class={props.pickerClass} class={props.pickerClass}
style={pickerStyle} style={pickerStyle}
tabIndex={props.disabled ? -1 : 0} tabindex={props.disabled ? -1 : 0}
onFocus={focus} onFocus={focus}
onBlur={blur} onBlur={blur}
onMouseenter={this.onMouseEnter} onMouseenter={this.onMouseEnter}

2
components/date-picker/WeekPicker.jsx
View File

@ -193,7 +193,7 @@ export default {
<input <input
ref="input" ref="input"
disabled={disabled} disabled={disabled}
readOnly readonly
value={(value && value.format(format)) || ''} value={(value && value.format(format)) || ''}
placeholder={placeholder} placeholder={placeholder}
class={pickerInputClass} class={pickerInputClass}

6
components/date-picker/createPicker.js
View File

@ -223,11 +223,11 @@ export default function createPicker(TheCalendar, props) {
disabled={props.disabled} disabled={props.disabled}
onFocus={focus} onFocus={focus}
onBlur={blur} onBlur={blur}
readOnly readonly
value={formatDate(inputValue, this.format)} value={formatDate(inputValue, this.format)}
placeholder={placeholder} placeholder={placeholder}
class={props.pickerInputClass} class={props.pickerInputClass}
tabIndex={props.tabIndex} tabindex={props.tabindex}
name={this.name} name={this.name}
/> />
{clearIcon} {clearIcon}
@ -255,7 +255,7 @@ export default function createPicker(TheCalendar, props) {
<span <span
class={props.pickerClass} class={props.pickerClass}
style={pickerStyle} style={pickerStyle}
// tabIndex={props.disabled ? -1 : 0} // tabindex={props.disabled ? -1 : 0}
// onFocus={focus} // onFocus={focus}
// onBlur={blur} // onBlur={blur}
onMouseenter={this.onMouseEnter} onMouseenter={this.onMouseEnter}

2
components/date-picker/interface.js
View File

@ -27,7 +27,7 @@ export const PickerProps = () => ({
timePicker: PropTypes.any, timePicker: PropTypes.any,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
tagPrefixCls: PropTypes.string, tagPrefixCls: PropTypes.string,
tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
align: PropTypes.object.def(() => ({})), align: PropTypes.object.def(() => ({})),
inputReadOnly: PropTypes.bool, inputReadOnly: PropTypes.bool,
valueFormat: PropTypes.string, valueFormat: PropTypes.string,

2
components/input-number/index.jsx
View File

@ -14,7 +14,7 @@ export const InputNumberProps = {
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
tabIndex: PropTypes.number, tabindex: PropTypes.number,
disabled: PropTypes.bool, disabled: PropTypes.bool,
size: PropTypes.oneOf(['large', 'small', 'default']), size: PropTypes.oneOf(['large', 'small', 'default']),
formatter: PropTypes.func, formatter: PropTypes.func,

6
components/input/ClearableLabeledInput.jsx
View File

@ -32,15 +32,15 @@ const ClearableLabeledInput = {
prefix: PropTypes.any, prefix: PropTypes.any,
addonBefore: PropTypes.any, addonBefore: PropTypes.any,
addonAfter: PropTypes.any, addonAfter: PropTypes.any,
readOnly: PropTypes.bool, readonly: PropTypes.bool,
}, },
methods: { methods: {
renderClearIcon(prefixCls) { renderClearIcon(prefixCls) {
const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.$props; const { allowClear, value, disabled, readonly, inputType, handleReset } = this.$props;
if ( if (
!allowClear || !allowClear ||
disabled || disabled ||
readOnly || readonly ||
value === undefined || value === undefined ||
value === null || value === null ||
value === '' value === ''

2
components/input/__tests__/index.test.js
View File

@ -36,7 +36,7 @@ focusTest(TextArea);
describe('TextArea', () => { describe('TextArea', () => {
it('should auto calculate height according to content length', async () => { it('should auto calculate height according to content length', async () => {
const wrapper = mount(TextArea, { const wrapper = mount(TextArea, {
propsData: { value: '', readOnly: true, autoSize: true }, propsData: { value: '', readonly: true, autoSize: true },
sync: false, sync: false,
}); });

2
components/input/inputProps.js
View File

@ -12,7 +12,7 @@ export default {
name: String, name: String,
size: PropTypes.oneOf(['small', 'large', 'default']), size: PropTypes.oneOf(['small', 'large', 'default']),
disabled: PropTypes.bool, disabled: PropTypes.bool,
readOnly: PropTypes.bool, readonly: PropTypes.bool,
addonBefore: PropTypes.any, addonBefore: PropTypes.any,
addonAfter: PropTypes.any, addonAfter: PropTypes.any,
// onPressEnter?: React.FormEventHandler<any>; // onPressEnter?: React.FormEventHandler<any>;

2
components/mentions/__tests__/__snapshots__/demo.test.js.snap
View File

@ -41,6 +41,6 @@ exports[`renders ./antdv-demo/docs/mentions/demo/readonly.md correctly 1`] = `
<div style="margin-bottom: 10px;"> <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 class="ant-mentions ant-mentions-disabled"><textarea disabled="disabled" rows="1" placeholder="this is disabled Mentions"></textarea></div>
</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> </div>
`; `;

2
components/select/index.jsx
View File

@ -28,7 +28,7 @@ const AbstractSelectProps = () => ({
showSearch: PropTypes.bool, showSearch: PropTypes.bool,
allowClear: PropTypes.bool, allowClear: PropTypes.bool,
disabled: PropTypes.bool, disabled: PropTypes.bool,
tabIndex: PropTypes.number, tabindex: PropTypes.number,
placeholder: PropTypes.any, placeholder: PropTypes.any,
defaultActiveFirstOption: PropTypes.bool, defaultActiveFirstOption: PropTypes.bool,
dropdownClassName: PropTypes.string, dropdownClassName: PropTypes.string,

2
components/switch/index.jsx
View File

@ -18,7 +18,7 @@ const Switch = {
disabled: PropTypes.bool, disabled: PropTypes.bool,
checkedChildren: PropTypes.any, checkedChildren: PropTypes.any,
unCheckedChildren: PropTypes.any, unCheckedChildren: PropTypes.any,
tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
checked: PropTypes.bool, checked: PropTypes.bool,
defaultChecked: PropTypes.bool, defaultChecked: PropTypes.bool,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,

2
components/vc-calendar/src/Calendar.jsx
View File

@ -320,7 +320,7 @@ const Calendar = {
children.push( children.push(
<div class={`${prefixCls}-panel`} key="panel"> <div class={`${prefixCls}-panel`} key="panel">
{dateInputElement} {dateInputElement}
<div tabIndex={props.focusablePanel ? 0 : undefined} class={`${prefixCls}-date-panel`}> <div tabindex={props.focusablePanel ? 0 : undefined} class={`${prefixCls}-date-panel`}>
<CalendarHeader <CalendarHeader
locale={locale} locale={locale}
mode={sMode} mode={sMode}

2
components/vc-calendar/src/RangeCalendar.jsx
View File

@ -821,7 +821,7 @@ const RangeCalendar = {
} }
const extraFooter = this.renderFooter(mode); const extraFooter = this.renderFooter(mode);
return ( return (
<div ref="rootInstance" class={className} tabIndex="0" onKeydown={this.onKeyDown}> <div ref="rootInstance" class={className} tabindex="0" onKeydown={this.onKeyDown}>
{props.renderSidebar()} {props.renderSidebar()}
<div class={`${prefixCls}-panel`}> <div class={`${prefixCls}-panel`}>
{showClear && sSelectedValue[0] && sSelectedValue[1] ? ( {showClear && sSelectedValue[0] && sSelectedValue[1] ? (

2
components/vc-calendar/src/date/DateInput.jsx
View File

@ -210,7 +210,7 @@ const DateInput = {
onFocus={this.onFocus} onFocus={this.onFocus}
onBlur={this.onBlur} onBlur={this.onBlur}
inputMode={inputMode} inputMode={inputMode}
readOnly={inputReadOnly} readonly={inputReadOnly}
/> />
</div> </div>
{showClear ? ( {showClear ? (

2
components/vc-calendar/src/mixin/CalendarMixin.js
View File

@ -75,7 +75,7 @@ const CalendarMixin = {
<div <div
ref="rootInstance" ref="rootInstance"
class={className} class={className}
tabIndex="0" tabindex="0"
onKeydown={this.onKeyDown || noop} onKeydown={this.onKeyDown || noop}
onBlur={this.onBlur || noop} onBlur={this.onBlur || noop}
> >

2
components/vc-cascader/Cascader.jsx
View File

@ -381,7 +381,7 @@ export default {
{children && {children &&
cloneElement(children[0], { cloneElement(children[0], {
onKeydown: handleKeyDown, onKeydown: handleKeyDown,
tabIndex: disabled ? undefined : 0, tabindex: disabled ? undefined : 0,
})} })}
</Trigger> </Trigger>
); );

12
components/vc-checkbox/src/Checkbox.jsx
View File

@ -21,8 +21,8 @@ export default {
// onBlur: PropTypes.func, // onBlur: PropTypes.func,
// onChange: PropTypes.func, // onChange: PropTypes.func,
// onClick: PropTypes.func, // onClick: PropTypes.func,
tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
readOnly: PropTypes.bool, readonly: PropTypes.bool,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
value: PropTypes.any, value: PropTypes.any,
}, },
@ -100,8 +100,8 @@ export default {
id, id,
type, type,
disabled, disabled,
readOnly, readonly,
tabIndex, tabindex,
autoFocus, autoFocus,
onFocus, onFocus,
onBlur, onBlur,
@ -125,9 +125,9 @@ export default {
name, name,
id, id,
type, type,
readOnly, readonly,
disabled, disabled,
tabIndex, tabindex,
class: `${prefixCls}-input`, class: `${prefixCls}-input`,
checked: !!sChecked, checked: !!sChecked,
autoFocus, autoFocus,

2
components/vc-collapse/src/Panel.jsx
View File

@ -77,7 +77,7 @@ export default {
onClick={this.handleItemClick} onClick={this.handleItemClick}
onKeypress={this.handleKeyPress} onKeypress={this.handleKeyPress}
role={accordion ? 'tab' : 'button'} role={accordion ? 'tab' : 'button'}
tabIndex={disabled ? -1 : 0} tabindex={disabled ? -1 : 0}
aria-expanded={isActive} aria-expanded={isActive}
> >
{showArrow && icon} {showArrow && icon}

6
components/vc-dialog/Dialog.jsx
View File

@ -279,7 +279,7 @@ export default {
forceRender={forceRender} forceRender={forceRender}
onMousedown={this.onDialogMouseDown} 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`}> <div class={`${prefixCls}-content`}>
{closer} {closer}
{header} {header}
@ -288,7 +288,7 @@ export default {
</div> </div>
{footer} {footer}
</div> </div>
<div tabIndex={0} ref="sentinelEnd" style={sentinelStyle} aria-hidden="true" /> <div tabindex={0} ref="sentinelEnd" style={sentinelStyle} aria-hidden="true" />
</LazyRenderBox> </LazyRenderBox>
); );
const dialogTransitionProps = getTransitionProps(transitionName, { const dialogTransitionProps = getTransitionProps(transitionName, {
@ -421,7 +421,7 @@ export default {
<div class={`${prefixCls}-root`}> <div class={`${prefixCls}-root`}>
{this.getMaskElement()} {this.getMaskElement()}
<div <div
tabIndex={-1} tabindex={-1}
onKeydown={this.onKeydown} onKeydown={this.onKeydown}
class={`${prefixCls}-wrap ${wrapClassName || ''}`} class={`${prefixCls}-wrap ${wrapClassName || ''}`}
ref="wrap" ref="wrap"

2
components/vc-drawer/src/Drawer.js
View File

@ -479,7 +479,7 @@ const Drawer = {
this.dom = c; this.dom = c;
}} }}
{...domContProps} {...domContProps}
tabIndex={-1} tabindex={-1}
> >
{showMask && ( {showMask && (
<div <div

16
components/vc-input-number/src/index.js
View File

@ -50,12 +50,12 @@ const inputNumberProps = {
// onKeyDown: PropTypes.func, // onKeyDown: PropTypes.func,
// onKeyUp: PropTypes.func, // onKeyUp: PropTypes.func,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
placeholder: PropTypes.string, placeholder: PropTypes.string,
disabled: PropTypes.bool, disabled: PropTypes.bool,
// onFocus: PropTypes.func, // onFocus: PropTypes.func,
// onBlur: PropTypes.func, // onBlur: PropTypes.func,
readOnly: PropTypes.bool, readonly: PropTypes.bool,
max: PropTypes.number, max: PropTypes.number,
min: PropTypes.number, min: PropTypes.number,
step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@ -640,7 +640,7 @@ export default {
const { const {
prefixCls, prefixCls,
disabled, disabled,
readOnly, readonly,
useTouch, useTouch,
autoComplete, autoComplete,
upHandler, upHandler,
@ -681,7 +681,7 @@ export default {
} }
} }
const editable = !this.readOnly && !this.disabled; const editable = !this.readonly && !this.disabled;
// focus state, show input value // focus state, show input value
// unfocus state, show valid value // unfocus state, show valid value
@ -710,8 +710,8 @@ export default {
onMouseleave: this.stop, onMouseleave: this.stop,
}; };
} }
const isUpDisabled = !!upDisabledClass || disabled || readOnly; const isUpDisabled = !!upDisabledClass || disabled || readonly;
const isDownDisabled = !!downDisabledClass || disabled || readOnly; const isDownDisabled = !!downDisabledClass || disabled || readonly;
const upHandlerProps = { const upHandlerProps = {
disabled: isUpDisabled, disabled: isUpDisabled,
@ -777,13 +777,13 @@ export default {
placeholder={this.placeholder} placeholder={this.placeholder}
onClick={this.handleInputClick} onClick={this.handleInputClick}
class={`${prefixCls}-input`} class={`${prefixCls}-input`}
tabIndex={this.tabIndex} tabindex={this.tabindex}
autoComplete={autoComplete} autoComplete={autoComplete}
onFocus={this.onFocus} onFocus={this.onFocus}
onBlur={this.onBlur} onBlur={this.onBlur}
onKeydown={editable ? this.onKeyDown : noop} onKeydown={editable ? this.onKeyDown : noop}
onKeyup={editable ? this.onKeyUp : noop} onKeyup={editable ? this.onKeyUp : noop}
readOnly={this.readOnly} readonly={this.readonly}
disabled={this.disabled} disabled={this.disabled}
max={this.max} max={this.max}
min={this.min} min={this.min}

2
components/vc-menu/SubPopupMenu.jsx
View File

@ -373,7 +373,7 @@ const SubPopupMenu = {
// domProps.id = props.id // domProps.id = props.id
// } // }
if (props.focusable) { if (props.focusable) {
domWrapProps.tabIndex = '0'; domWrapProps.tabindex = '0';
domWrapProps.onKeydown = this.onKeyDown; domWrapProps.onKeydown = this.onKeyDown;
} }
delete domWrapProps.children; delete domWrapProps.children;

2
components/vc-notification/Notice.jsx
View File

@ -78,7 +78,7 @@ export default {
> >
<div class={`${componentClass}-content`}>{getSlot(this)}</div> <div class={`${componentClass}-content`}>{getSlot(this)}</div>
{closable ? ( {closable ? (
<a tabIndex="0" onClick={close} class={`${componentClass}-close`}> <a tabindex="0" onClick={close} class={`${componentClass}-close`}>
{closeIcon || <span class={`${componentClass}-close-x`} />} {closeIcon || <span class={`${componentClass}-close-x`} />}
</a> </a>
) : null} ) : null}

2
components/vc-pagination/Pager.jsx
View File

@ -43,7 +43,7 @@ export default {
onClick={this.handleClick} onClick={this.handleClick}
onKeypress={this.handleKeyPress} onKeypress={this.handleKeyPress}
title={this.showTitle ? this.page : null} title={this.showTitle ? this.page : null}
tabIndex="0" tabindex="0"
class={cls} class={cls}
style={style} style={style}
> >

12
components/vc-pagination/Pagination.jsx
View File

@ -363,7 +363,7 @@ export default {
<li <li
title={this.showTitle ? locale.prev_page : null} title={this.showTitle ? locale.prev_page : null}
onClick={this.prev} onClick={this.prev}
tabIndex={hasPrev ? 0 : null} tabindex={hasPrev ? 0 : null}
onKeypress={this.runIfEnterPrev} onKeypress={this.runIfEnterPrev}
class={`${hasPrev ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`} class={`${hasPrev ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
aria-disabled={!this.hasPrev()} aria-disabled={!this.hasPrev()}
@ -395,7 +395,7 @@ export default {
<li <li
title={this.showTitle ? locale.next_page : null} title={this.showTitle ? locale.next_page : null}
onClick={this.next} onClick={this.next}
tabIndex={this.hasNext ? 0 : null} tabindex={this.hasNext ? 0 : null}
onKeypress={this.runIfEnterNext} onKeypress={this.runIfEnterNext}
class={`${hasNext ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`} class={`${hasNext ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
aria-disabled={!this.hasNext()} aria-disabled={!this.hasNext()}
@ -437,7 +437,7 @@ export default {
title={this.showTitle ? prevItemTitle : null} title={this.showTitle ? prevItemTitle : null}
key="prev" key="prev"
onClick={this.jumpPrev} onClick={this.jumpPrev}
tabIndex="0" tabindex="0"
onKeypress={this.runIfEnterJumpPrev} onKeypress={this.runIfEnterJumpPrev}
class={jumpPrevClassString} class={jumpPrevClassString}
> >
@ -452,7 +452,7 @@ export default {
<li <li
title={this.showTitle ? nextItemTitle : null} title={this.showTitle ? nextItemTitle : null}
key="next" key="next"
tabIndex="0" tabindex="0"
onClick={this.jumpNext} onClick={this.jumpNext}
onKeypress={this.runIfEnterJumpNext} onKeypress={this.runIfEnterJumpNext}
class={jumpNextClassString} class={jumpNextClassString}
@ -590,7 +590,7 @@ export default {
<li <li
title={this.showTitle ? locale.prev_page : null} title={this.showTitle ? locale.prev_page : null}
onClick={this.prev} onClick={this.prev}
tabIndex={prevDisabled ? null : 0} tabindex={prevDisabled ? null : 0}
onKeypress={this.runIfEnterPrev} onKeypress={this.runIfEnterPrev}
class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`} class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
aria-disabled={prevDisabled} aria-disabled={prevDisabled}
@ -601,7 +601,7 @@ export default {
<li <li
title={this.showTitle ? locale.next_page : null} title={this.showTitle ? locale.next_page : null}
onClick={this.next} onClick={this.next}
tabIndex={nextDisabled ? null : 0} tabindex={nextDisabled ? null : 0}
onKeypress={this.runIfEnterNext} onKeypress={this.runIfEnterNext}
class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`} class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
aria-disabled={nextDisabled} aria-disabled={nextDisabled}

8
components/vc-rate/src/Rate.jsx
View File

@ -16,7 +16,7 @@ const rateProps = {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
character: PropTypes.any, character: PropTypes.any,
characterRender: PropTypes.func, characterRender: PropTypes.func,
tabIndex: PropTypes.number, tabindex: PropTypes.number,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
}; };
@ -32,7 +32,7 @@ export default {
allowHalf: false, allowHalf: false,
allowClear: true, allowClear: true,
prefixCls: 'rc-rate', prefixCls: 'rc-rate',
tabIndex: 0, tabindex: 0,
character: '★', character: '★',
}), }),
data() { data() {
@ -164,7 +164,7 @@ export default {
}, },
}, },
render() { render() {
const { count, allowHalf, prefixCls, disabled, tabIndex } = getOptionProps(this); const { count, allowHalf, prefixCls, disabled, tabindex } = getOptionProps(this);
const { sValue, hoverValue, focused } = this; const { sValue, hoverValue, focused } = this;
const { class: className, style } = this.$attrs; const { class: className, style } = this.$attrs;
const stars = []; const stars = [];
@ -194,7 +194,7 @@ export default {
class={classNames(prefixCls, disabledClass, className)} class={classNames(prefixCls, disabledClass, className)}
style={style} style={style}
onMouseleave={disabled ? noop : this.onMouseLeave} onMouseleave={disabled ? noop : this.onMouseLeave}
tabIndex={disabled ? -1 : tabIndex} tabindex={disabled ? -1 : tabindex}
onFocus={disabled ? noop : this.onFocus} onFocus={disabled ? noop : this.onFocus}
onBlur={disabled ? noop : this.onBlur} onBlur={disabled ? noop : this.onBlur}
onKeydown={disabled ? noop : this.onKeyDown} onKeydown={disabled ? noop : this.onKeyDown}

2
components/vc-rate/src/Star.jsx
View File

@ -77,7 +77,7 @@ export default {
aria-checked={value > index ? 'true' : 'false'} aria-checked={value > index ? 'true' : 'false'}
aria-posinset={index + 1} aria-posinset={index + 1}
aria-setsize={count} aria-setsize={count}
tabIndex={0} tabindex={0}
> >
<div class={`${prefixCls}-first`}>{character}</div> <div class={`${prefixCls}-first`}>{character}</div>
<div class={`${prefixCls}-second`}>{character}</div> <div class={`${prefixCls}-second`}>{character}</div>

2
components/vc-select/DropdownMenu.jsx
View File

@ -200,7 +200,7 @@ export default {
transform: 'translateZ(0)', transform: 'translateZ(0)',
}} }}
id={this.$props.ariaId} id={this.$props.ariaId}
tabIndex="-1" tabindex="-1"
onFocus={onPopupFocus} onFocus={onPopupFocus}
onMousedown={preventDefaultEvent} onMousedown={preventDefaultEvent}
onScroll={onPopupScroll} onScroll={onPopupScroll}

2
components/vc-select/PropTypes.js
View File

@ -55,7 +55,7 @@ export const SelectPropTypes = {
dropdownMatchSelectWidth: PropTypes.bool, dropdownMatchSelectWidth: PropTypes.bool,
dropdownMenuStyle: PropTypes.object, dropdownMenuStyle: PropTypes.object,
notFoundContent: PropTypes.oneOfType([String, Number]), notFoundContent: PropTypes.oneOfType([String, Number]),
tabIndex: PropTypes.oneOfType([String, Number]), tabindex: PropTypes.oneOfType([String, Number]),
__propsSymbol__: PropTypes.any, __propsSymbol__: PropTypes.any,
children: PropTypes.array, children: PropTypes.array,
}; };

6
components/vc-select/Select.jsx
View File

@ -95,7 +95,7 @@ const Select = {
combobox: PropTypes.bool.def(false), combobox: PropTypes.bool.def(false),
tokenSeparators: PropTypes.arrayOf(PropTypes.string).def([]), tokenSeparators: PropTypes.arrayOf(PropTypes.string).def([]),
autoClearSearchValue: PropTypes.bool.def(true), autoClearSearchValue: PropTypes.bool.def(true),
tabIndex: PropTypes.any.def(0), tabindex: PropTypes.any.def(0),
dropdownRender: PropTypes.func.def(menu => menu), dropdownRender: PropTypes.func.def(menu => menu),
// onChange: noop, // onChange: noop,
// onFocus: noop, // onFocus: noop,
@ -1541,7 +1541,7 @@ const Select = {
// selectionProps.on.keydown = this.onKeyDown; // selectionProps.on.keydown = this.onKeyDown;
// selectionProps.on.focus = this.selectionRefFocus; // selectionProps.on.focus = this.selectionRefFocus;
// selectionProps.on.blur = this.selectionRefBlur; // selectionProps.on.blur = this.selectionRefBlur;
// selectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex; // selectionProps.attrs.tabindex = props.disabled ? -1 : props.tabindex;
//} //}
const rootCls = { const rootCls = {
[className]: className, [className]: className,
@ -1598,7 +1598,7 @@ const Select = {
onMousedown={this.markMouseDown} onMousedown={this.markMouseDown}
onMouseup={this.markMouseLeave} onMouseup={this.markMouseLeave}
onMouseout={this.markMouseLeave} onMouseout={this.markMouseLeave}
tabIndex={props.disabled ? -1 : props.tabIndex} tabindex={props.disabled ? -1 : props.tabindex}
onBlur={this.selectionRefBlur} onBlur={this.selectionRefBlur}
onFocus={this.selectionRefFocus} onFocus={this.selectionRefFocus}
onClick={this.selectionRefClick} onClick={this.selectionRefClick}

2
components/vc-slick/src/slider.js
View File

@ -163,7 +163,7 @@ export default {
cloneElement(children[k], { cloneElement(children[k], {
key: 100 * i + 10 * j + k, key: 100 * i + 10 * j + k,
attrs: { attrs: {
tabIndex: -1, tabindex: -1,
}, },
style: { style: {
width: `${100 / settings.slidesPerRow}%`, width: `${100 / settings.slidesPerRow}%`,

6
components/vc-slick/src/track.js
View File

@ -109,7 +109,7 @@ const renderSlides = function(spec, children, createElement) {
{ {
key: 'original' + getKey(child, index), key: 'original' + getKey(child, index),
attrs: { attrs: {
tabIndex: '-1', tabindex: '-1',
'data-index': index, 'data-index': index,
'aria-hidden': !slideClasses['slick-active'], 'aria-hidden': !slideClasses['slick-active'],
}, },
@ -142,7 +142,7 @@ const renderSlides = function(spec, children, createElement) {
key: 'precloned' + getKey(child, key), key: 'precloned' + getKey(child, key),
class: classnames(slideClasses, slideClass), class: classnames(slideClasses, slideClass),
attrs: { attrs: {
tabIndex: '-1', tabindex: '-1',
'data-index': key, 'data-index': key,
'aria-hidden': !slideClasses['slick-active'], 'aria-hidden': !slideClasses['slick-active'],
}, },
@ -169,7 +169,7 @@ const renderSlides = function(spec, children, createElement) {
cloneElement(child, { cloneElement(child, {
key: 'postcloned' + getKey(child, key), key: 'postcloned' + getKey(child, key),
attrs: { attrs: {
tabIndex: '-1', tabindex: '-1',
'data-index': key, 'data-index': key,
'aria-hidden': !slideClasses['slick-active'], 'aria-hidden': !slideClasses['slick-active'],
}, },

10
components/vc-slider/src/Handle.jsx
View File

@ -15,7 +15,7 @@ export default {
min: PropTypes.number, min: PropTypes.number,
max: PropTypes.number, max: PropTypes.number,
value: PropTypes.number, value: PropTypes.number,
tabIndex: PropTypes.number, tabindex: PropTypes.number,
className: PropTypes.string, className: PropTypes.string,
reverse: PropTypes.bool, reverse: PropTypes.bool,
// handleFocus: PropTypes.func.def(noop), // handleFocus: PropTypes.func.def(noop),
@ -78,7 +78,7 @@ export default {
min, min,
max, max,
value, value,
tabIndex, tabindex,
} = getOptionProps(this); } = getOptionProps(this);
const className = classNames(this.$props.className, { const className = classNames(this.$props.className, {
[`${prefixCls}-handle-click-focused`]: this.clickFocused, [`${prefixCls}-handle-click-focused`]: this.clickFocused,
@ -102,15 +102,15 @@ export default {
'aria-valuenow': value, 'aria-valuenow': value,
'aria-disabled': !!disabled, 'aria-disabled': !!disabled,
}; };
let _tabIndex = tabIndex || 0; let _tabIndex = tabindex || 0;
if (disabled || tabIndex === null) { if (disabled || tabindex === null) {
_tabIndex = null; _tabIndex = null;
} }
const handleProps = { const handleProps = {
attrs: { attrs: {
role: 'slider', role: 'slider',
tabIndex: _tabIndex, tabindex: _tabIndex,
...ariaProps, ...ariaProps,
}, },
class: className, class: className,

12
components/vc-slider/src/Range.jsx
View File

@ -30,7 +30,7 @@ const rangeProps = {
allowCross: PropTypes.bool, allowCross: PropTypes.bool,
disabled: PropTypes.bool, disabled: PropTypes.bool,
reverse: PropTypes.bool, reverse: PropTypes.bool,
tabIndex: PropTypes.arrayOf(PropTypes.number), tabindex: PropTypes.arrayOf(PropTypes.number),
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
min: PropTypes.number, min: PropTypes.number,
max: PropTypes.number, max: PropTypes.number,
@ -44,7 +44,7 @@ const Range = {
count: 1, count: 1,
allowCross: true, allowCross: true,
pushable: false, pushable: false,
tabIndex: [], tabindex: [],
}), }),
data() { data() {
const { count, min, max } = this; const { count, min, max } = this;
@ -395,15 +395,15 @@ const Range = {
defaultHandle, defaultHandle,
trackStyle, trackStyle,
handleStyle, handleStyle,
tabIndex, tabindex,
} = this; } = this;
const handleGenerator = handle || defaultHandle; const handleGenerator = handle || defaultHandle;
const offsets = bounds.map(v => this.calcOffset(v)); const offsets = bounds.map(v => this.calcOffset(v));
const handleClassName = `${prefixCls}-handle`; const handleClassName = `${prefixCls}-handle`;
const handles = bounds.map((v, i) => { const handles = bounds.map((v, i) => {
let _tabIndex = tabIndex[i] || 0; let _tabIndex = tabindex[i] || 0;
if (disabled || tabIndex[i] === null) { if (disabled || tabindex[i] === null) {
_tabIndex = null; _tabIndex = null;
} }
return handleGenerator({ return handleGenerator({
@ -417,7 +417,7 @@ const Range = {
value: v, value: v,
dragging: sHandle === i, dragging: sHandle === i,
index: i, index: i,
tabIndex: _tabIndex, tabindex: _tabIndex,
min, min,
max, max,
reverse, reverse,

6
components/vc-slider/src/Slider.jsx
View File

@ -14,7 +14,7 @@ const Slider = {
value: PropTypes.number, value: PropTypes.number,
disabled: PropTypes.bool, disabled: PropTypes.bool,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
tabIndex: PropTypes.number, tabindex: PropTypes.number,
reverse: PropTypes.bool, reverse: PropTypes.bool,
min: PropTypes.number, min: PropTypes.number,
max: PropTypes.number, max: PropTypes.number,
@ -159,7 +159,7 @@ const Slider = {
minimumTrackStyle, minimumTrackStyle,
trackStyle, trackStyle,
handleStyle, handleStyle,
tabIndex, tabindex,
min, min,
max, max,
reverse, reverse,
@ -181,7 +181,7 @@ const Slider = {
max, max,
reverse, reverse,
index: 0, index: 0,
tabIndex, tabindex,
style: handleStyle[0] || handleStyle, style: handleStyle[0] || handleStyle,
directives: [ directives: [
{ {

2
components/vc-slider/src/common/createSlider.jsx
View File

@ -299,7 +299,7 @@ export default function createSlider(Component) {
return ( return (
<div <div
ref="sliderRef" ref="sliderRef"
tabIndex="-1" tabindex="-1"
class={sliderClassName} class={sliderClassName}
onTouchstart={disabled ? noop : this.onTouchStart} onTouchstart={disabled ? noop : this.onTouchStart}
onMousedown={disabled ? noop : this.onMouseDown} onMousedown={disabled ? noop : this.onMouseDown}

2
components/vc-steps/Step.jsx
View File

@ -118,7 +118,7 @@ export default {
if (onStepClick && !disabled) { if (onStepClick && !disabled) {
accessibilityProps.role = 'button'; accessibilityProps.role = 'button';
accessibilityProps.tabIndex = 0; accessibilityProps.tabindex = 0;
accessibilityProps.onClick = this.onItemClick; accessibilityProps.onClick = this.onItemClick;
} }
return ( return (

2
components/vc-switch/PropTypes.js
View File

@ -8,7 +8,7 @@ export const switchPropTypes = {
// onChange: PropTypes.func, // onChange: PropTypes.func,
// onMouseUp: PropTypes.func, // onMouseUp: PropTypes.func,
// onClick: PropTypes.func, // onClick: PropTypes.func,
tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
checked: PropTypes.bool, checked: PropTypes.bool,
defaultChecked: PropTypes.bool.def(false), defaultChecked: PropTypes.bool.def(false),
autoFocus: PropTypes.bool.def(false), autoFocus: PropTypes.bool.def(false),

4
components/vc-table/src/BodyTable.jsx
View File

@ -105,12 +105,12 @@ export default {
</div> </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); const useTabIndex = scroll && (scroll.x || scroll.y);
return ( return (
<div <div
tabIndex={useTabIndex ? -1 : undefined} tabindex={useTabIndex ? -1 : undefined}
key="bodyTable" key="bodyTable"
class={`${prefixCls}-body`} class={`${prefixCls}-body`}
style={bodyStyle} style={bodyStyle}

2
components/vc-tabs/src/Sentinel.jsx
View File

@ -31,7 +31,7 @@ export default {
return ( return (
<div <div
tabIndex={0} tabindex={0}
ref={setRef} ref={setRef}
style={sentinelStyle} style={sentinelStyle}
onKeydown={this.onKeyDown} onKeydown={this.onKeyDown}

2
components/vc-tabs/src/TabBarRootNode.jsx
View File

@ -48,7 +48,7 @@ export default {
<div <div
role="tablist" role="tablist"
class={cls} class={cls}
tabIndex="0" tabindex="0"
onKeydown={onKeyDown} onKeydown={onKeyDown}
style={style} style={style}
ref={this.saveRef('root')} ref={this.saveRef('root')}

2
components/vc-time-picker/Header.jsx
View File

@ -165,7 +165,7 @@ const Header = {
value={str} value={str}
placeholder={placeholder} placeholder={placeholder}
onInput={this.onInputChange} onInput={this.onInputChange}
readOnly={!!inputReadOnly} readonly={!!inputReadOnly}
{...{ {...{
directives: [ directives: [
{ {

2
components/vc-time-picker/Select.jsx
View File

@ -83,7 +83,7 @@ const Select = {
class={cls} class={cls}
key={index} key={index}
disabled={item.disabled} disabled={item.disabled}
tabIndex="0" tabindex="0"
onKeydown={onKeyDown} onKeydown={onKeyDown}
> >
{item.value} {item.value}

4
components/vc-time-picker/TimePicker.jsx
View File

@ -315,7 +315,7 @@ export default {
class={`${prefixCls}-clear`} class={`${prefixCls}-clear`}
title={clearText} title={clearText}
onClick={this.onClear} onClick={this.onClear}
tabIndex={0} tabindex={0}
> >
{clearIcon || <i class={`${prefixCls}-clear-icon`} />} {clearIcon || <i class={`${prefixCls}-clear-icon`} />}
</a> </a>
@ -375,7 +375,7 @@ export default {
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}
autoFocus={autoFocus} autoFocus={autoFocus}
readOnly={!!inputReadOnly} readonly={!!inputReadOnly}
id={id} id={id}
/> />
{inputIcon || <span class={`${prefixCls}-icon`} />} {inputIcon || <span class={`${prefixCls}-icon`} />}

2
components/vc-tree-select/src/Base/BasePopup.jsx
View File

@ -282,7 +282,7 @@ const BasePopup = {
} }
return ( return (
<div role="listbox" id={ariaId} onKeydown={onPopupKeyDown} tabIndex={-1}> <div role="listbox" id={ariaId} onKeydown={onPopupKeyDown} tabindex={-1}>
{renderSearch ? renderSearch() : null} {renderSearch ? renderSearch() : null}
{$tree} {$tree}
</div> </div>

10
components/vc-tree-select/src/Base/BaseSelector.jsx
View File

@ -44,10 +44,10 @@ export default function(modeName) {
// Pass by HOC // Pass by HOC
renderSelection: PropTypes.func.isRequired, renderSelection: PropTypes.func.isRequired,
renderPlaceholder: PropTypes.func, renderPlaceholder: PropTypes.func,
tabIndex: PropTypes.number, tabindex: PropTypes.number,
}, },
{ {
tabIndex: 0, tabindex: 0,
}, },
), ),
inject: { inject: {
@ -130,13 +130,13 @@ export default function(modeName) {
ariaId, ariaId,
renderSelection, renderSelection,
renderPlaceholder, renderPlaceholder,
tabIndex, tabindex,
} = this.$props; } = this.$props;
const { const {
vcTreeSelect: { onSelectorKeyDown }, vcTreeSelect: { onSelectorKeyDown },
} = this; } = this;
let myTabIndex = tabIndex; let myTabIndex = tabindex;
if (disabled) { if (disabled) {
myTabIndex = null; myTabIndex = null;
} }
@ -166,7 +166,7 @@ export default function(modeName) {
aria-controls={open ? ariaId : undefined} aria-controls={open ? ariaId : undefined}
aria-haspopup="listbox" aria-haspopup="listbox"
aria-disabled={disabled} aria-disabled={disabled}
tabIndex={myTabIndex} tabindex={myTabIndex}
onFocus={this.onFocus} onFocus={this.onFocus}
onBlur={this.onBlur} onBlur={this.onBlur}
onKeydown={onSelectorKeyDown} onKeydown={onSelectorKeyDown}

2
components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
View File

@ -193,7 +193,7 @@ const MultipleSelector = {
{...{ {...{
props: { props: {
...this.$props, ...this.$props,
tabIndex: -1, tabindex: -1,
showArrow: false, showArrow: false,
renderSelection: this.renderSelection, renderSelection: this.renderSelection,
renderPlaceholder: this._renderPlaceholder, renderPlaceholder: this._renderPlaceholder,

6
components/vc-tree/src/Tree.jsx
View File

@ -34,7 +34,7 @@ const Tree = {
props: initDefaultProps( props: initDefaultProps(
{ {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
children: PropTypes.any, children: PropTypes.any,
treeData: PropTypes.array, // Generate treeNode by children treeData: PropTypes.array, // Generate treeNode by children
showLine: PropTypes.bool, showLine: PropTypes.bool,
@ -647,7 +647,7 @@ const Tree = {
render() { render() {
const { _treeNode: treeNode } = this.$data; 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 domProps = getDataAndAria({ ...this.$props, ...this.$attrs });
const { class: className, style } = this.$attrs; const { class: className, style } = this.$attrs;
return ( return (
@ -659,7 +659,7 @@ const Tree = {
style={style} style={style}
role="tree" role="tree"
unselectable="on" unselectable="on"
tabindex={focusable ? tabIndex : null} tabindex={focusable ? tabindex : null}
> >
{mapChildren(treeNode, (node, index) => this.renderTreeNode(node, index))} {mapChildren(treeNode, (node, index) => this.renderTreeNode(node, index))}
</ul> </ul>

2
components/vc-upload/src/AjaxUploader.jsx
View File

@ -233,7 +233,7 @@ const AjaxUploader = {
const tagProps = { const tagProps = {
...events, ...events,
role: 'button', role: 'button',
tabIndex: disabled ? null : '0', tabindex: disabled ? null : '0',
class: cls, class: cls,
style, style,
}; };