[Tile] Add rules of interactive elements in actionable tiles

[thyhmdo]

Acceptance criteria

Discussions with Michael Gower prompted the below additions to the Tile Usage tab documentation:

Max number of interactive elements per tile

• Add guidance for having a max number of how many interactive elements people can have within one actionable tile. This needs to be considered for clickable, selectable, and expandable tiles (fully clickable and chevron button).
  • Provide suggestion for interactive element on clickable tiles instead of completely blocking the usage

---

Complex expandable tiles

• Add rules for when expandable tiles when there is a complicated/complex pattern of multiple interactive elements/components inside of an actionable tile:
  • It takes time for users to move through the entire card content
  • There are lots of tab stops for keyboard users
  • It can cause confusion of multiple click targets within a card
  • Provide meaningful ways to understand hidden interactive elements within the expandable tiles

“If you want users to be able to navigate tiles efficiently, do not put a whole bunch of click targets in tiles. Remember that actionable children within tiles add additional tab stops for keyboard users, which leads to much longer time on task. In an ideal world we’d recommend no more than one (two?) actions on a tile." - Michael Gower

"There seem to be no visuals or examples for a tile with multiple targets inside. So when someone goes and makes a clickable target with a target inside, there’s not really anything to refer them to to let them see design possibilities." - Michael Gower

---

Clickable expandable tiles versus chevron button expandable tiles

• Draw more distinction between what the difference is of clickable expandable tiles and chevron button expandable tiles.
• Images: See this early iteration Figma file of Tile, to find use case examples images we could use to support this new content.
• Would be helpful to add another do/don’t image.

---

Review and playback

• Review feedback from the PAL community: [Tile] Expandable tiles: Adding guidance and rules for interactive elements #3499
• Playback to Michael Gower and the design team

---

Resources

• Original issue
• Interesting Tile finding(This link doesn’t work anymore...)