fix[accordion]: nested Accordions not working as expected

[jpbyrne]

fix[accordion]: nested Accordions not working as expected

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

Vanilla Carbon Accordions are not functional when placed inside of another Accordion. Nested Accordions do not expand and collapse.

Is this issue related to a specific component?

Yes. Accordion.

What did you expect to happen? What happened instead? What would you like to
see changed?

That Carbon Accordions can be placed one within another and function normally.

What browser are you working in?

Chromium Edge (but applicable to all!)

What version of the Carbon Design System are you using?

v10.24.0 (latest)

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Social Program Management

Steps to reproduce the issue

1. Update carbon/packages/components/src/components/accordion/accordion.hbs to include one Accordion component within another.
2. Run yarn dev.
3. Navigate to http://localhost:3000/demo/accordion.
4. Observe that nested Accordions.

Additional information

Example of current behaviour

[dakahn]

Changed this to a proposal instead of a bug report since this feature is specifically unsupported by our system.

@aagonzales I know when nested accordions have come up in the past we've decided against support for this feature. With a Carbon Treeview coming soon I assume that's still the case. I don't actually know if a Vanilla Treeview implementation is being worked on in parallel to the React though.

[aagonzales]

@jpbyrne Can you share a screenshot of design that uses the nested accordion for context please.

[jpbyrne]

Sure thing @aagonzales.

In SPM we have a UI templating system called UIM which our customers use to build custom interfaces. We're currently in the process of migrating the output of UIM to Carbon components.

Customers use something called a UIM CLUSTER element to create multi-column layouts. The default variant of Cluster comes with a collapsible header. We were planning to reimplement our Cluster using Carbon grid and Accordion components.

However, as it's possible to nest Cluster elements one inside another, Accordions would also need to support this capability for use to use them in this way.

[vpicone]

Going to close this one out for inactivity. This is really challenging for user's content discoverability and accessibility. We recommend flattening your information architecture as much as possible.