fix: Deleteable chips forcing tab order

mui · Nov 13, 2019 · 0b160e3 · 0b160e3
1 parent 2633d78
commit 0b160e3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
@@ -303,6 +303,7 @@ const Chip = React.forwardRef(function Chip(props, ref) {
     onDelete,
     onKeyUp,
     size = 'medium',
+    tabIndex = 0,
     variant = 'default',
     ...other
   } = props;
@@ -363,7 +364,7 @@ const Chip = React.forwardRef(function Chip(props, ref) {
           className={clsx(classes.deleteIconButton, { [classes.deleteIconButtonSmall]: small })}
           onMouseDown={event => event.stopPropagation()}
           onClick={handleDeleteIconClick}
-          tabIndex={clickable ? -1 : 0}
+          tabIndex={clickable ? -1 : tabIndex}
         >
           <CancelIcon className={clsx(classes.deleteIcon, customClasses)} viewBox="2 2 20 20" />
         </ButtonBase>
@@ -419,7 +420,7 @@ const Chip = React.forwardRef(function Chip(props, ref) {
         className,
       )}
       aria-disabled={disabled ? true : undefined}
-      tabIndex={clickable ? 0 : undefined}
+      tabIndex={clickable ? tabIndex : undefined}
       onClick={onClick}
       onKeyUp={handleKeyUp}
       ref={handleRef}
@@ -512,6 +513,11 @@ Chip.propTypes = {
    * The size of the chip.
    */
   size: PropTypes.oneOf(['small', 'medium']),
+  /**
+   * Tab index of the element that should be in tab order. By
+   * using `-1` no Chip will be on tab order.
+   */
+  tabIndex: PropTypes.number,
   /**
    * The variant to use.
    */

diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
@@ -156,6 +156,25 @@ describe('<Chip />', () => {
       expect(getByRole('button')).to.have.property('tabIndex', 0);
       expect(container.querySelector('#avatar')).to.be.ok;
     });
+
+    it('should apply user value of tabIndex', () => {
+      const { container, getByRole } = render(
+        <Chip
+          avatar={<Avatar id="avatar">MB</Avatar>}
+          label="Text Avatar Chip"
+          onDelete={() => {}}
+          // eslint-disable-next-line jsx-a11y/tabindex-no-positive
+          tabIndex={5}
+        />,
+      );
+
+      expect(getByRole('button')).to.have.property('tabIndex', 5);
+      const elementsInTabOrder = Array.from(container.querySelectorAll('[tabIndex]')).filter(
+        element => element.tabIndex >= 0,
+      );
+      expect(elementsInTabOrder).to.have.length(1);
+    });
+
     it('fires onDelete when clicking the delete button', () => {
       const handleDelete = spy();
       const { getByRole } = render(