[React component Tile - Expandable] It's impossible to expand or collapse the tile by focusing the chevron and hitting space / enter

[xrissot-ibm]

It's impossible using the keyboard to expand or collapse the tile by focusing the chevron and hitting the space bar or the enter key

Environment

Operating system

Windows 10

Browser

Chrome/FF

Detailed description

What version of the Carbon Design System are you using?

"@carbon/grid": "^10.3.0",
"@carbon/icons-react": "^10.6.0",
"@carbon/type": "^10.2.0",
"carbon-components": "^10.9.1",
"carbon-components-react": "^7.9.1",
"carbon-icons": "^7.0.7",

What did you expect to happen?

When selecting the chevron using the keyboard I can expand/collapse the tile. And the icon is also outlined on focus.

What happened instead?

It's not working and the icon is not outlined on focus.

Steps to reproduce the issue

1. Open official playground https://react.carbondesignsystem.com/?path=/story/tile--expandable
2. Use tab key to select the chevron in the tile
3. Hit Enter key or Space bar.
4. The tile is not keeping the expand or collapse state

[abbeyhrt]

Hi @xrissot-ibm! 👋 Thanks for making this issue! The tile can be opened and closed when the whole tile, not the chevron, is focused using enter or space. Since the information can still be accessed with a keyboard, I believe it is still accessible. We do not intend for the chevron to control open/close of the tile or receive focus. Let me know if this resolves this issue or if you have any other questions!

[xrissot-ibm]

Hi @abbeyhrt in that case why is the chevron focusable? If you can focus on a button, then the button must work. That's why we open this issue :)
So the choice I guess is either to make the chevron work (ie expand/collapse) the tile or to remove the focus on it.

[abbeyhrt]

@xrissot-ibm Could you provide a sandbox recreating your problem? Out of the box, the chevron should not be receiving focus so that might be the issue here!

[xrissot-ibm]

@abbeyhrt I just made the test and it seems that the pb is only encountered with firefox on windows.
To reproduce click on the tile (you then have the focus blue border) and press the TAB key.
On Edge/Chrome you're right the chevron is not selected.
On FF (73.0.1) the chevron is selected and the tile loose its focus (ie blue border).

[abbeyhrt]

@xrissot-ibm ah I see! You are completely right, the chevron is still receiving focus on some browsers. Thanks for bringing this to our attention! I will open a PR to address this soon!

[xrissot-ibm]

@abbeyhrt thanks !