ActionList.Group should allow for TrailingActions

[mattcosta7]

Describe the bug

ActionList.Group should allow for a TrailingAction, potentially with an api similar to this one, to maintain consistency with ActionList.Item

<ActionList.Group>
  <ActionList.GroupHeader>
    Title
    <ActionList.TrailingVisual>
      {/* reviewer dropdown */}
    </ActionList.TrailingVisual>
  </ActionList.GroupHeader>

  <ActionList.Item>
    {/* ... */}
  </ActionList.Item>

  {/* ... */}
</ActionList.Group>

Expected behavior

A user can define a trailing action for a group which appears as a button/link on the end of the group header, similar to the provided sample screenshot

Screenshots

Additional context

Slack thread

[lesliecdubs]

Thanks for filing! We're going to explore the accessibility implications of this and will get back to you.

[siddharthkp]

Leaving notes for the future:

The mock up here is a perfect use case for NavigationList, so we could pick this up with the upcoming work. cc @colebemis

Because NavigationList uses ActionList under the hood, we would need to add this to ActionList.

However, we should add safe guards in place for ActionMenu (which also uses ActionList) because a button next to group title inside role=group would need different semantics (maybe even a different design pattern).

For now, we can choose to simply no allow a trailingAction inside an ActionMenu Group

[mattcosta7]

Definitely @siddharthkp ! We actually mocked this up as an implementation of navigationlist since there wasn't a component for it yet :-)

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[mattcosta7]

Not stale

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[dylanatsmith]

Adding some additional use cases:

Search workflows

This is live in the repo Actions tab (ex: https://github.com/github/github/actions)

Manage knowledge bases

This is from a new design for Copilot chat

[github-actions]

Uh oh! @dylanatsmith, the image you shared is missing helpful alt text. Check #2043 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[dylanatsmith]

Ha, this actually came up today due to the ✏️ on the categories sidebar in Discussions.

[github-actions]

Uh oh! @dylanatsmith, the image you shared is missing helpful alt text. Check #2043 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[lesliecdubs]

Thanks for letting us know @dylanatsmith, and sorry this is coming up for you again!

We're going to bring this up at the next Primer Patterns session (thank you @mperrotti!) to discuss whether this change is something we'd want to bake in. Feel free to join if you're able/want to; you can request an invite in #primer on Slack.

[mperrotti]

@dylanatsmith @siddharthkp - during the Primer patterns session we agreed this is a good pattern, but we're not sure if it's worth building into the component.

What's the benefit of handling this in Primer instead of having consumers do it manually? Here's an example of how it would be done manually:

<ActionList.GroupHeading as="h3">
  <Stack direction="horizontal" align="center">
    <Stack.Item grow>Repositories</Stack.Item>
    <Stack.Item>
      <ActionList.TrailingAction label="Expand sidebar" icon={ArrowLeftIcon} />
    </Stack.Item>
  </Stack>
</ActionList.GroupHeading>

[dylanatsmith]

What's the benefit of handling this in Primer instead of having consumers do it manually?

Consistency I guess. Is it a button with a label, an IconButton, a button with an icon and a label? Is it small or default size? Does the engineer align it properly? What about some links? If they smash a whole Dialog or other elements inside of that h3 are we in a bad place for accessibility? etc.

But I don’t feel strongly, I’m good with whatever decision you all make. Some of those questions above probably point toward not being able to support the range of use cases with the component alone anyway.