Expandable Tile - no interactive elements inside interactive elements

[jnm2377]

Discussed in #9003

TO-DO:

• either update usage guidelines and examples for this to clearly state NO interactive elements nested within expandable tile
• or refactor component so that the whole tile isn't a button, rather just one part of it, and the interactive elements aren't nested within the button

Current workaround is to not use interactive elements within expandable tiles.

^{Originally posted by dbollinger June 23, 2021}

Usage questions

I am currently implementing some expandable tiles using the react carbon component library (links to storybook). The design system documentation mentions support for including "CTAs (like links)" in the content area below the fold. This seems a little misleading because the entire Tile component is implemented as a button, which means certain types of CTAs (like buttons) explicitly aren't supported, as button elements should not be nested within other button elements.

A specific use case I was looking for was to include filter tags on an expandable tile that could be clicked to remove a given filter from the item represented on the expandable tile.

Are my assumptions about CTAs correct here? It may be helpful to update the documentation to clarify these constraints, especially with respect to accessibility.

General accessibility concerns

This might be more appropriate as a separate discussion, but in addition to the concern about which elements are semantically appropriate, I am also concerned about how screen readers might interact with static content like lists. In the design system documentation, the expandable example shows a recipe for guacamole, with a semantic layout that guides the user through the steps.

When the content is all inside a button, some screen readers (VoiceOver, in particular) will not interpret any of the semantic meaning of the button's inner HTML. For example, list metadata (i.e. "list, 3 items") and arial-labels won't be read by the screen reader, nor will heading levels or other element roles. Instead, the screen reader will read the entire contents of the Button's inner HTML with no pauses or breaks.

It also seems that it is not possible to use a mouse to select text in the expandable tiles, both above and below the fold. (I am using MacOS and trackpad, and this is the case in Safari, FF, and Chrome)

Related issues and PRs

• [tile] expandable tile with links #7552
• ExpandableTile collapsed unexpectedly when hitting Space key in an INPUT field #6314
• [React component Tile - Expandable] It's impossible to expand or collapse the tile by focusing the chevron and hitting space / enter #5557
• fix(tile): change expandable tile to button #5609

[tay1orjones]

Based on some internal discussions^{1 2}, the plan here is to make two variants of the expanded tile.

1. As it is with the whole tile as a click target and no interactive elements allowed
   • The useNoInteractiveChildren hook can be used for warnings in dev environments
2. The expand action is limited to just the chevron and other interactive elements can be included.

Footnotes

1. https://ibm-studios.slack.com/archives/GSCEH4RSP/p1635794801020800 ↩

2. https://ibm-studios.slack.com/archives/GD8JG6JR3/p1628526600005600 ↩

[davidmenendez]

tagging designer @keesa12

moving here from #10218

[davidmenendez]

Just wanted to follow up. Any status update on this issue?

[davidmenendez]

bump for status update

[tay1orjones]

@davidmenendez No updates to share, this is currently in our backlog and we'd like to tackle it as soon as we can.

If you'd like to kickstart it, the intended direction outlined above is still valid as to how we think this can be tackled.