[accordion bug]: Adding elements to an accordion-item (without open attribute) causes overflow

[alexpeverett]

The problem

The accordion-item does not automatically scale when elements are added if the accordion item is opened from a closed state. When the accordion is assigned an open attribute, the accordion-item scales correctly but if closed and re-opened, the bug persists.

Screen.Recording.2024-06-26.at.10.58.11.mov

The following video is when the accordion-item has an 'open' attribute assigned to it.

Screen.Recording.2024-06-26.at.10.59.05.mov

The solution

I have no idea what the solution is but the accordion-item should be able to scale up in size whether the open attribute is declared or not.

After doing some digging it appears that a div with the class name "cds--accordion__wrapper" applies a fixed size to the accordion item (max-block-size). However, when the open attribute is used, max-block-size is set to 'fit-content'. There is no part attribute that I can use to access the "cds--accordion__wrapper" div in the shadow root so I cannot (with my current knowledge) change the max-block-size CSS.

Application/website

St4sd registry UI

Business priority

Very high Priority

What time frame would this ideally be needed by (if applicable)

Very high priority.

Examples

Examples are above.

Code of Conduct

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

[alexpeverett]

We temporarily fixed this by running the following function when we add a new item to the accordion.

export function fixAccordionStyle(id) {
  document
    .getElementById(id)
    .shadowRoot.querySelector(
      ".cds--accordion__wrapper",
    ).style.webkitMaxLogicalHeight = "fit-content";
}