[Bug]: Child accordion's expand/collapse not working

[soumen-roy-001]

Package

@carbon/react

Browser

Chrome

Package version

1.53.1

React version

18.2.0

Description

In nested accordions any child accordion's expand/collapse not working.

Reproduction/example

https://stackblitz.com/edit/github-tb1sze

Steps to reproduce

Create any nested accordions. Click on any child accordion to expand/collapse and that's not working.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

IBM OpenPages

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [ ] I checked the current issues for duplicate problems

[tay1orjones]

@soumen-roy-001 Hi there, nested accordions aren't a supported use case

When organizing large amounts of information that can be nested, consider using tree view instead.

[tay1orjones]

@soumen-roy-001 @fbarroso24 Following up after our discussion during office hours just now - if you could share here the workaround you've made, I'd be up for reopening this to evaluate if we could add the fix to accordion.

It wouldn't be a formal endorsement of supporting nested accordions, but I'd love to at least unblock your use case if possible.

[fbarroso24]

@soumen-roy-001 Hi there, nested accordions aren't a supported use case

When organizing large amounts of information that can be nested, consider using tree view instead.

Hi @tay1orjones, the nested accordion pattern came from our designers. Our use case calls for users to be able to build up their own view. In this scenario, a view is a custom form that they can dynamically build. These views can contain fields, grids & we allow them to group fields into various sections etc. Below is a screenshot.

Since users are able to drag-n-drop fields & sections around on the page, our designers deemed it very important to be able to expand/collapse various sections & subsections (i.e. nested-accordions) of the view designer page to make drag-n-drop more manageable. The workaround we found was to add a class to a div that is a wrapper for the accordion. The workaround code is below.

1) 1st we needed to have 2 separate render functions. 1 is for when accordion is expanded and the other is for when it is collapsed (see below)

2) For the collapsed render function, we added a wrapper div element around the Accordion (see below)

3) Then we use CSS selector to override the OOTB behavior for collapsed nested accordions like so

[tay1orjones]

Thanks! I think the general concern with the pattern is usability regarding information overload especially for those using assistive technologies, including screenreaders. Here's a good explainer on this from Nielsen Norman Group:

When the content has a deep hierarchy with multiple sublevels, it can be too complex to be displayed in a flat-hierarchy format like accordions. Users may feel confused and lose track of where they are within the accordion structure. In such cases, consider alternatives such as tabs or vertical local navigation to better accommodate the hierarchical nature of the content.

That said, this functionality isn't something that should be disallowed or blocked by the system.[^1] We won't recommend or document it for reasons like the one above, but getting your workaround (or a similar one) baked into the accordion and adding a unit test for it makes sense.

[^1]: Based on a brief internal team discussion

[github-actions[bot]]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!