mui · oliviertassinari · Sep 9, 2017 · Sep 9, 2017 · Sep 9, 2017
diff --git a/docs/src/pages/demos/lists/CheckboxList.js b/docs/src/pages/demos/lists/CheckboxList.js
@@ -47,7 +47,7 @@ class CheckboxList extends React.Component {
             <ListItem dense button key={value} onClick={event => this.handleToggle(event, value)}>
               <Checkbox
                 checked={this.state.checked.indexOf(value) !== -1}
-                tabIndex="-1"
+                tabIndex={-1}
                 disableRipple
               />
               <ListItemText primary={`Line item ${value + 1}`} />

diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -247,7 +247,7 @@ class EnhancedTable extends React.Component {
                   onKeyDown={event => this.handleKeyDown(event, n.id)}
                   role="checkbox"
                   aria-checked={isSelected}
-                  tabIndex="-1"
+                  tabIndex={-1}
                   key={n.id}
                   selected={isSelected}
                 >

diff --git a/src/ButtonBase/ButtonBase.d.ts b/src/ButtonBase/ButtonBase.d.ts
@@ -20,7 +20,7 @@ export interface ButtonBaseProps {
   onTouchEnd?: React.TouchEventHandler<any>;
   onTouchStart?: React.TouchEventHandler<any>;
   role?: string;
-  tabIndex?: string;
+  tabIndex?: number | string;
   type?: string;
 }
 

diff --git a/src/ButtonBase/ButtonBase.js b/src/ButtonBase/ButtonBase.js
@@ -129,7 +129,7 @@ export type Props = {
   /**
    * @ignore
    */
-  tabIndex?: string,
+  tabIndex?: number | string,
   /**
    * @ignore
    */
@@ -149,7 +149,7 @@ class ButtonBase extends React.Component<AllProps, State> {
     centerRipple: false,
     focusRipple: false,
     disableRipple: false,
-    tabIndex: '0',
+    tabIndex: 0,
     type: 'button',
   };
 
@@ -379,7 +379,7 @@ class ButtonBase extends React.Component<AllProps, State> {
         onMouseUp={this.handleMouseUp}
         onTouchEnd={this.handleTouchEnd}
         onTouchStart={this.handleTouchStart}
-        tabIndex={disabled ? '-1' : tabIndex}
+        tabIndex={disabled ? -1 : tabIndex}
         className={className}
         {...buttonProps}
         {...other}

diff --git a/src/ButtonBase/ButtonBase.spec.js b/src/ButtonBase/ButtonBase.spec.js
@@ -45,7 +45,7 @@ describe('<ButtonBase />', () => {
       const wrapper = shallow(<ButtonBase component="span" role="checkbox" aria-checked={false} />);
       assert.strictEqual(wrapper.name(), 'span');
       assert.strictEqual(wrapper.props().role, 'checkbox', 'should be role checkbox');
-      assert.strictEqual(wrapper.props().tabIndex, '0', 'should be 0');
+      assert.strictEqual(wrapper.props().tabIndex, 0, 'should be 0');
     });
 
     it('should spread props on button', () => {
@@ -350,7 +350,7 @@ describe('<ButtonBase />', () => {
   describe('prop: disabled', () => {
     it('should apply the right tabIndex', () => {
       const wrapper = shallow(<ButtonBase disabled>Hello</ButtonBase>);
-      assert.strictEqual(wrapper.props().tabIndex, '-1', 'should not receive the focus');
+      assert.strictEqual(wrapper.props().tabIndex, -1, 'should not receive the focus');
     });
 
     it('should also apply it when using component', () => {

diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.js
@@ -94,7 +94,7 @@ export type Props = {
   /**
    * @ignore
    */
-  tabIndex?: string,
+  tabIndex?: number | string,
   /**
    * The value of the component.
    */

diff --git a/src/Chip/Chip.d.ts b/src/Chip/Chip.d.ts
@@ -6,7 +6,7 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   label?: React.ReactNode;
   onKeyDown?: React.EventHandler<React.KeyboardEvent<any>>;
   onRequestDelete?: React.EventHandler<any>;
-  tabIndex?: number;
+  tabIndex?: number | string;
 }
 
 export default class Chip extends StyledComponent<ChipProps> {}
diff --git a/src/Chip/Chip.js b/src/Chip/Chip.js
@@ -115,7 +115,7 @@ export type Props = {
   /**
    * @ignore
    */
-  tabIndex?: number,
+  tabIndex?: number | string,
 };
 
 type AllProps = DefaultProps & Props;

diff --git a/src/Input/Textarea.js b/src/Input/Textarea.js
@@ -217,7 +217,7 @@ class Textarea extends React.Component<AllProps, State> {
         <textarea
           ref={this.handleRefSinglelineShadow}
           className={classnames(classes.shadow, classes.textarea)}
-          tabIndex="-1"
+          tabIndex={-1}
           rows="1"
           readOnly
           aria-hidden="true"
@@ -226,7 +226,7 @@ class Textarea extends React.Component<AllProps, State> {
         <textarea
           ref={this.handleRefShadow}
           className={classnames(classes.shadow, classes.textarea)}
-          tabIndex="-1"
+          tabIndex={-1}
           rows={rows}
           aria-hidden="true"
           readOnly

diff --git a/src/Menu/MenuItem.js b/src/Menu/MenuItem.js
@@ -79,7 +79,7 @@ function MenuItem(props: AllProps) {
     <ListItem
       button
       role={role}
-      tabIndex="-1"
+      tabIndex={-1}
       className={className}
       component={component}
       {...other}

diff --git a/src/Menu/MenuItem.spec.js b/src/Menu/MenuItem.spec.js
@@ -45,7 +45,7 @@ describe('<MenuItem />', () => {
 
   it('should have a tabIndex of -1 by default', () => {
     const wrapper = shallow(<MenuItem />);
-    assert.strictEqual(wrapper.props().tabIndex, '-1', 'should have a -1 tabIndex');
+    assert.strictEqual(wrapper.props().tabIndex, -1, 'should have a -1 tabIndex');
   });
 
   describe('event callbacks', () => {

diff --git a/src/Menu/MenuList.js b/src/Menu/MenuList.js
@@ -172,7 +172,7 @@ class MenuList extends React.Component<Props, State> {
           }
 
           return React.cloneElement(child, {
-            tabIndex: index === this.state.currentTabIndex ? '0' : '-1',
+            tabIndex: index === this.state.currentTabIndex ? 0 : -1,
             ref: child.props.selected
               ? node => {
                   this.selectedItem = node;

diff --git a/src/Radio/Radio.d.ts b/src/Radio/Radio.d.ts
@@ -15,7 +15,7 @@ export interface RadioProps extends SwitchBaseProps {
   inputRef?: React.Ref<any>;
   name?: string;
   onChange?: (event: React.ChangeEvent<{}>, checked: boolean) => void;
-  tabIndex?: string;
+  tabIndex?: number | string;
   value?: string;
 }
 

diff --git a/src/Radio/Radio.js b/src/Radio/Radio.js
@@ -96,7 +96,7 @@ export type Props = {
   /**
    * @ignore
    */
-  tabIndex?: string,
+  tabIndex?: number | string,
   /**
    * The value of the component.
    */

diff --git a/src/Select/SelectInput.js b/src/Select/SelectInput.js
@@ -309,7 +309,7 @@ class SelectInput extends React.Component<AllProps, State> {
             classNameProp,
           )}
           aria-pressed={this.state.open ? 'true' : 'false'}
-          tabIndex={disabled ? null : '0'}
+          tabIndex={disabled ? null : 0}
           role="button"
           aria-owns={this.state.open ? `menu-${name || ''}` : null}
           aria-haspopup="true"

diff --git a/src/Switch/Switch.d.ts b/src/Switch/Switch.d.ts
@@ -14,7 +14,7 @@ export interface SwitchProps extends SwitchBaseProps {
   inputProps?: object;
   name?: string;
   onChange?: (event: React.ChangeEvent<{}>, checked: boolean) => void;
-  tabIndex?: string;
+  tabIndex?: number | string;
   value?: string;
 }
 

diff --git a/src/Switch/Switch.js b/src/Switch/Switch.js
@@ -131,7 +131,7 @@ export type Props = {
   /**
    * @ignore
    */
-  tabIndex?: string,
+  tabIndex?: number | string,
   /**
    * The value of the component.
    */

diff --git a/src/Tabs/TabScrollButton.js b/src/Tabs/TabScrollButton.js
@@ -29,7 +29,7 @@ function TabScrollButton(props) {
   }
 
   return (
-    <ButtonBase className={className} onClick={onClick} tabIndex="-1" {...other}>
+    <ButtonBase className={className} onClick={onClick} tabIndex={-1} {...other}>
       {direction === 'left' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
     </ButtonBase>
   );

diff --git a/src/internal/Modal.js b/src/internal/Modal.js
@@ -396,7 +396,7 @@ class Modal extends React.Component<AllProps, State> {
     }
 
     if (tabIndex === undefined) {
-      childProps.tabIndex = tabIndex == null ? '-1' : tabIndex;
+      childProps.tabIndex = tabIndex == null ? -1 : tabIndex;
     }
 
     let backdropProps;

diff --git a/src/internal/SwitchBase.d.ts b/src/internal/SwitchBase.d.ts
@@ -16,7 +16,7 @@ export interface SwitchBaseProps {
   inputRef?: React.Ref<any>;
   name?: string;
   onChange?: (event: React.ChangeEvent<{}>, checked: boolean) => void;
-  tabIndex?: string;
+  tabIndex?: number | string;
   value?: string;
 }
 

diff --git a/src/internal/SwitchBase.js b/src/internal/SwitchBase.js
@@ -111,7 +111,7 @@ export type Props = {
   /**
    * @ignore
    */
-  tabIndex?: string,
+  tabIndex?: number | string,
   /**
    * The value of the component.
    */

diff --git a/src/internal/SwitchBase.spec.js b/src/internal/SwitchBase.spec.js
@@ -110,9 +110,9 @@ describe('<SwitchBase />', () => {
   });
 
   it('should pass tabIndex to the input so it can be taken out of focus rotation', () => {
-    const wrapper = shallow(<SwitchBase tabIndex="-1" />);
+    const wrapper = shallow(<SwitchBase tabIndex={-1} />);
     const input = wrapper.find('input');
-    assert.strictEqual(input.props().tabIndex, '-1');
+    assert.strictEqual(input.props().tabIndex, -1);
   });
 
   it('should pass value, disabled, checked, and name to the input', () => {

diff --git a/test/integration/MenuList.spec.js b/test/integration/MenuList.spec.js
@@ -13,11 +13,11 @@ function assertMenuItemTabIndexed(wrapper, tabIndexed) {
 
   items.forEach((item, index) => {
     if (index === tabIndexed) {
-      assert.strictEqual(item.prop('tabIndex'), '0', 'should have the tab index');
+      assert.strictEqual(item.prop('tabIndex'), 0, 'should have the tab index');
     } else {
       assert.strictEqual(
         item.prop('tabIndex'),
-        '-1',
+        -1,
         `item at index ${index} should not be tab focusable`,
       );
     }

diff --git a/test/regressions/tests/List/PrimaryActionCheckboxListItem.js b/test/regressions/tests/List/PrimaryActionCheckboxListItem.js
@@ -9,14 +9,14 @@ export default function PrimaryActionCheckboxListItem() {
   return (
     <div style={{ background: '#fff', width: 300 }}>
       <ListItem button>
-        <Checkbox tabIndex="-1" disableRipple />
+        <Checkbox tabIndex={-1} disableRipple />
         <ListItemText primary="Primary" />
         <ListItemSecondaryAction>
           <IconButton>comment</IconButton>
         </ListItemSecondaryAction>
       </ListItem>
       <ListItem button dense>
-        <Checkbox tabIndex="-1" disableRipple />
+        <Checkbox tabIndex={-1} disableRipple />
         <ListItemText primary="Primary" />
         <ListItemSecondaryAction>
           <IconButton>comment</IconButton>

diff --git a/test/typescript/components.spec.tsx b/test/typescript/components.spec.tsx
@@ -354,7 +354,7 @@ const ListTest = () => (
         key={value}
         onClick={(e: React.SyntheticEvent<any>) => log(e)}
       >
-        <Checkbox checked={true} tabIndex="-1" disableRipple />
+        <Checkbox checked={true} tabIndex={-1} disableRipple />
         <ListItemText primary={`Line item ${value + 1}`} />
         <ListItemSecondaryAction>
           <IconButton aria-label="Comments">