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 https://github.com/primer/react/pull/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