Inline ActionList.Description can result in horizontal overflow

[khiga8]

Description

When <ActionList.Description variant="inline"> contains very long content and we're on a small viewport, the content overflows and causes a horizontal scrollbar to appear. This is an accessibility WCAG Reflow issue.

Notably, <ActionList.Description variant="inline"> currently wraps the content with Truncate which also poses accessibility concerns since keyboard users aren't able to access the truncated content.

One option that comes to mind is to not truncate at all, and have the content wrap. This would resolve the horizontal overflow concern and the truncate concern. This also aligns with what the Primer Rails ActionList currently does:

However, this would be a visual change to Primer React ActionList, and may benefit from designer input. As of right now, there are around ~40 instances of ActionList.Description variant="inline" according to primer query (source 1 + source 2)

Steps to reproduce

See storybook example from #4665!

I also tried Code Sandbox but I could not get the latest version of primer/react to run.

Version

v36.21.0

Browser

Chrome

[joshblack]

Hey there! Going through this in backlog cleaning today for PRC. Wanted to include design here to double-check on the change for horizontal overflow to not wrapping 👀

[broccolinisoup]

Hello! @mperrotti suggested that we can wrap the content as we do in PVC. Since this is a rare case, we are okay with that.

@khiga8 Feel free to push a PR if you already have, otherwise we will move this in our backlog.