fix(Timeline): render as unordered list

[francinelucca]

Closes https://github.com/github/primer/issues/3354

Currently the Timeline component lacks semantic structure, in that it renders like a div with divs inside of it. This doesn't convey appropriate structural meaning accessibility-wise. This PR introduces a new API under a FF to have the Timeline render as an unordered list with listitems inside of it

Introduces a new rendering behavior for Timeline under feature flag:

• if FF is off (default):
  • Timeline renders as per usual: as a div with inner divs
• if FF is on:
  • Timeline renders as per usual: as a div
  • Timeline.Item renders as an li
  • It is expected that all Timeline.Item will be wrapped inside a Timeline.Group (new component) that renders as an ul

Changelog

New

• primer_react_timeline_as_list feature flag (defaults to false)
• New Timeline.Group subcomponent (used to wrap Timeline.Items within a list when FF is on
• Add new Timeline.Group subcomponent to Timeline *.docs.json
• Tests for new Timeline behaviors

Changed

• Turn on new primer_react_timeline_as_list FF in SB Timeline stories, use new API
• Added css styles to Timeline to avoid visual changes when switching to ul
• Render TimelineItem as li if primer_react_timeline_as_list FF is on (div otherwise)
• Add aria-hidden to Timeline.Break if primer_react_timeline_as_list FF is on
• Update Timeline snapshot
• Updated TimelineItem types

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

1- Release new API under FF (this PR)
2 - Move dotcom to new API (upcoming separate PR, after this is merged)
3 - Deprecate "old" API
4 - Remove old API in next major

Testing & Reviewing

Revise deployment stories, see DOM renders as list and no visual regressions

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 05c6b08

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	98.63 KB (+0.14% 🔺)
packages/react/dist/browser.umd.js	99.05 KB (+0.25% 🔺)

[francinelucca]

Taking a page out of Branchname here, open to suggestions

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/350532

[joshblack]

Sorry for the delay! Just wanted to ask, would it be possible for the behavior of Timeline.Group to live inside of Timeline? Basically have the flag turn Timeline into a ul and Timeline.Item into an li

If I remember right, when we last talked about this that would have a problem when we needed to make separate lists, is that right? If that's the case, could we recommend folks do multiple timelines?

My only hesitation with Timeline.Group is that it seems like it would always be necessary which made me think if we could have it baked into Timeline or not. Let me know what you think!

[francinelucca]

If I remember right, when we last talked about this that would have a problem when we needed to make separate lists, is that right? If that's the case, could we recommend folks do multiple timelines?

Yeah I think we can do that, the thing is we need Timeline.Break outside of the list, so to replicate something like this, with that approach the code would look like this:

 <Timeline>
      <Timeline.Item>
        <Timeline.Badge sx={{
        bg: 'done.emphasis'
      }}>
          <Octicon icon={GitMergeIcon} color="fg.onEmphasis" aria-label="Merged" />
        </Timeline.Badge>
        <Timeline.Body>This is a message</Timeline.Body>
      </Timeline.Item>
</Timeline>
<Timeline.Break />
<Timeline>
    <Timeline.Item>
      <Timeline.Badge>
        <Octicon icon={GitBranchIcon} aria-label="Branch" />
      </Timeline.Badge>
      <Timeline.Body>This is a message</Timeline.Body>
    </Timeline.Item>
</Timeline>

I originally added the Timeline.Group because I just thought it looked more "neat" to have it all under one top-level element, but if that looks good to you I'm happy to implement it this way instead @joshblack

[francinelucca]

Decided to close issue, closing PR