Skip to content

🐛 [BUG] - PricingOptions accordions do not individually open/close with keyboard interaction #1188

@alexislucio

Description

@alexislucio

Describe the bug

Context

This is a continuation from https://github.com/github/githubuniverse.com/issues/2526 . While this part of the Universe website does not exist anymore, @rezrah confirmed that it's reproducible on Primer Brand.

Original content from issue

How to reproduce

  1. Visit the "Save your seat" section on https://githubuniverse.com/.
  2. Observe that each of the four ticket types under Individual/Group passes have a details/summary disclosure labeled identically as "What's included" with an <h4> element inside the summary.
  3. Activate/collapse one summary
  4. Notice the adjacent disclosure automatically opens/collapses.

A11y Impact

  • The identical summary labels make it difficult for screen reader users and those with cognitive disabilities to differentiate which ticket's details are being revealed.
  • The linked collapse/expand behavior is not standard for details/summary, potentially hurting discoverability and navigation.

Recommendation

  • Update each summary to provide unique context, e.g., "What's included with general admission", "What's included with group pass", etc.
  • Remove the linked collapse/expand functionality so users can open or close each details independently, as expected with native details/summary.
  • Optionally, if the design requires collapsing the content, use a single control (e.g., "Hide what's included") that toggles visibility for both.
  • Consider removing details/summary entirely and presenting this information as plain text for maximum clarity and accessibility.

Reproduction steps

1. Go to [Primer Brand Storybook component PricingOptions](https://stunning-chainsaw-j82glqz.pages.github.io/?path=/story/components-pricingoptions--default).
2. Using your keyboard only, navigate to any accordion.
3. Select `ENTER`.
4. All columns open.
5. Select `CLOSE`. All columns close.

Expected behavior

Selecting `ENTER` on a specific row should only open that row.

Screenshots

![DESCRIPTION](LINK.png)

Browsers

No response

OS

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions