aria-hidden should be replaced with native hidden attribute

[JackieHayduk]

When transitioning height - display none is removed and the aria-hidden causes issues with panels that have focusable content within them - aria-hidden should be replaced with the native hidden attribute

[JackieHayduk]

I understand that this has been updated in version 5.0 but when working on a project that doesn't use react 18 you have to use version4.0 - any way a patch can be added that uses native HTML without requiring React 18?

[ScorpAL]

@JackieHayduk How did you calculate max height of hidden panels?

[JackieHayduk]

@ScorpAL we calculate the height of the inner content (within the inner-panel) in JS and use it as a CSS variable --max-height. See these screen shots. the "standard-container" class wraps the inner component in the panel which has a height but is hidden by the parents.

[ScorpAL]

@JackieHayduk Thank you.

Found another solution to resolve my problem.
Resolved just with CSS.

Great article from @nemzes Nelson Menezes
Animating height: auto - Posted Oct 31, 2021; updated Dec 15, 2021

Minimum reproducible example:

SCSS:

.panel {
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s;

    > .inner {
        min-height: 0;
        visibility: visible;
        opacity: 1;
        transition: opacity 0.35s;
    }

    &[hidden] {
        grid-template-rows: 0fr;

        > .inner {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.35s, visibility 0s 0.35s;
        }
    }
}

TSX

...
<AccordionItemPanel className={styles.panel}>
    <div className={styles.inner}>
        Your content
    </div>
</AccordionItemPanel>
...