Accordion: focus on closed panel child element

[omaxel]

When a panel of the accordion has a focusable child element, it gains focus even if the panel is not opened. This happens because the closed panel has max-height: 0 instead of display: none or the hidden attribute.

When evaluating a solution, consider that display can't be used in animation which probably is the main reason for which max-height has been used.

[zetareticoli]

@omaxel please could you make an example of child focusable element and the described behavior?

I tried adding a <a href=""> link inside the first panel but I cant' reproduce any bug.

[omaxel]

Sure, follow these steps:

• add any focusable element inside the first panel (a <button> in my case);
• click on the header panel to expand its content;
• click the header again to collapse it;
• press the tab key.

You will notice that the element gains the focus and it's displayed on top of the panel header (see image below)

[zetareticoli]

That's bad!

[zetareticoli]

Resolved in cd7003a