Accordion: focus on closed panel child element
omaxel opened this issue · comments
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.
@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.
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
tabkey.
You will notice that the element gains the focus and it's displayed on top of the panel header (see image below)
That's bad!
Resolved in cd7003a