Material-ui: [Chips] Can Only Delete Chips via the Mouse; Not the Keyboard (enter/space)

[billfienberg]

I can only delete a Chip using the mouse. I am unable to delete a Chip by tabbing to the delete icon to give it focus, and pressing enter/space.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

As a keyboard user, I expected to be able to delete a Chip by tabbing to the delete icon to give it focus, and pressing enter/space to delete it.

Current Behavior

As a keyboard user, when I tab to the delete icon on a Chip to give it focus, and I press enter/space, nothing happens. The Chip is not deleted.

Steps to Reproduce (for bugs)

CodeSandbox link: https://codesandbox.io/s/5yykkq6nkk

Steps to reproduce:

1. Navigate to https://codesandbox.io/s/5yykkq6nkk
2. Use the tab key to navigate to the delete icon
3. Once the delete icon has focus, press enter and/or space to try to delete the Chip

Context

This issue has affected me because I prefer to use the keyboard over the mouse, but now I am forced to use the mouse. I am trying to improve the accessibility of this component.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.36 |
| React | 16.0.40 |
| browser | 64.0.3282.186 (Official Build) (64-bit) |
| operating system | macOS High Sierra 10.13.3 (17D102) |

[mbrookes]

@billfienberg You delete the chip with the delete key.

[oliviertassinari]

Some benchmark:

• https://material.angular.io/components/chips/overview
• https://material-components-web.appspot.com/chips.html
• https://vuetifyjs.com/en/components/chips

[billfienberg]

@mbrookes, thank you. https://github.com/mui-org/material-ui/issues/10598#issuecomment-372034399 worked. I was able to successfully delete the chip by tabbing to it, and then pressing delete. Closing this issue.