Expandable Tile: Interaction Constraints

[dbollinger]

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

[jnm2377]

@dbollinger you bring up a very good point about a11y and nesting interactive elements within an interactive element. We have ran into this issue with other components and ended up refactoring. I will bring this up to our designers to see if we want to refactor here or instead update our usage guidelines to follow a11y rules.

Thanks for bringing this to our attention!

cc: @carbon-design-system/design please read comment above. This is a big issue for a11y. We've fixed issues like this in MultiSelect, Tooltip. Definitely needs to be addressed for expandable tile. Perhaps an alternate design would be to have an expandable button much smaller in the corner (like CodeSnippet, or Accordion), and the rest of the tile isn't actually a button. This would mean the clickable portion wouldn't be the whole tile anymore, but rather just that one area. Otherwise, we should update our usage guidelines to specifically call out that no interactive elements should be nested in here.

[jnm2377]

I've created an issue for this: #9442

[dbollinger]

Awesome!

I recently ran into some similar (but less severe) issues with the ClickableTile component. I ended up implementing my own workaround for that one, because it was fairly simple and didn't require any super crazy overrides.

Let me know if it'd be worth starting another discussion, but here's the overview:

Key challenges:

1. Focusing the ClickableTile navigation element reads all tile content to a screen reader.
2. Integrating with react-router-dom is challenging (although this might be due my own inexperience with react-router-dom)

My workaround:

// Custom component

const CustomClickableTile = () => {
  return  <Tile
       {...rest}
        className="bx--tile--clickable"
      />
}

// sass

.bx--tile--clickable 
  &:focus-within {
    outline: 2px solid $focus;
  }
}


.bx--tile--clickable a {
  text-decoration: none;
  color: inherit;

  &:focus {
    outline: none;
  }
}

// usage
import { Link } from "react-router-dom";

<CustomClickableTile>
   <Link>Tile Content Goes Here</Link>
</CustomClickableTile>

or

<CustomClickableTile>
   <Link>Link Content</Link>
  <div>Rest of Tile Content Goes Here</div>
</CustomClickableTile>

[jnm2377]

I think we will have to take a look at all our interactive tiles: clickable, expandable, multiselect, radio. Since it would be possible for people to add interactive elements to any of these. I think any discussion about interactive tiles is within scope here. 👍🏽

[thyhmdo]

@jnm2377 FYI, I have seen a lot of IBM products adding interactive elements on clickable and selectable (multi select and radio) tiles. Common elements are overflow menu and icon buttons for sure.
I would also say that button, or tags make more sense for read-only tile (or default tile). If we implement buttons here, our team and IBM.com agreed that we would use the button in full size or half size of the tile like this example: https://pages.github.ibm.com/MSC-Cloud/hc_fractal/components/detail/14a--default.html