[Feature request] riverAccordion

[nsolerieu]

Context

We often stack our river to create a product features et narrative. This leads to long pages that spread small amount of incremental information over lots of scroll and many demos. By condensing the content of multiple river into an accordion we could create a stronger condensed narrative.

Here is an example of both approach side by side:

@simmonsjenna has been exploring similar UX for the homepage section

Design suggestion

The component relies structurally on up 4 text+image internal units (with a minimum of 2, 1 being a regular river) and an active state rotation setting focus on one unit at the time. It would not be proper accordion that the extent that it would have a single active element at any time.

• Similarly to the riverStoryScroll we could combine multiple rivers
• Create a variant of the river with multiple image+content internal units
• Create a net new component

Component props:

Each props would apply equally to all units:

• Autoplay (default: true - 5s)
• Link (default: false)
• Status icon (default: true) = + or - depending on active item
• Description (default: false)
• leadingIcon (default: false)

Timing/urgency

Homepage is likely going to need a quick build with very specific styling led by brand refactoring thus will be custom built. I suggest that this should inform the definition phase in parallel.

[rezrah]

Triaged at planning on 28th October.

• @simmonsjenna will present the pattern at a11y office hours
  • Some ambiguity around motion and auto-scrolling behaviours
• @jesussandreas will review the existing designs for accuracy and provide a design file diffing any changes
• Primer Brand able to take on this request in Q2

[simmonsjenna]

@rezrah Following up with my notes from the A11y Design pairing session with @ericwbailey and @janmaarten-a11y:

• Advice: simplify by getting rid of the definition lists and let the buttons themselves be the enumeration
• Suppress tab focus on child links when in collapsed state (e.g. when tabbing through and the item is not expanded, the child links like "Download GitHub Mobile" are still getting focused)

We also discussed autoplay and how that might be approached. I think we should leave autoplay out of this component and revisit it in the future if needed due to the complexities it introduces.

[jesussandreas]

Hellooo, here's the reviewed design for us to apply on other pages.

It follows patterns that are close to the river container in order to ensure it feels part of the component ecosystem.

Figma

---

Screenshots.