Transitioning an accordion content with "allow-discrete" value for "display" property

Question

I have an accordion in which content is visually hidden and shown using transitions on grid-template-rows from 0fr to 1fr values.

It's inspired by a solution made by Kevin Powell on its youtube channel.

The html code is:

 <div class="accordion">
   <div class="accordion-panel">
    <h3 id="panel_heading_vaku" class="accordion-header"><button type="button" aria-expanded="false" aria-controls="panel_content_vaku">Heading</button></h3>
    <div id="panel_content_vaku" class="accordion-content" aria-hidden="true" aria-labelledby="panel_heading_vaku" role="region">
     <div>
      <div class="details">
       <p>lorem ipsum dolor sit amet</p>
      </div>
     </div>
    </div>
   </div>
  </div>

The key part of the animation trick is:

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms;

    &[aria-hidden="false"] {
        grid-template-rows: 1fr;
    }
}

This works fine "visually" but is not perfect for accessibiliy reasons because the accordion-content is only "compacted" and not hidden when closed, and in this way, during keyboard navigation, eventual inside links are targeted by "tab" clicks.

I thought to improve this solution using the new transition-behavior: allow-discrete for display property (for browsers different from Firefox) modifying the code in the following way:

.accordion-content {
    display: none;
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms, display 500ms allow-discrete;

    &[aria-hidden="false"] {
        grid-template-rows: 1fr;
        display: grid;
    }
}

Unfortunately it does not run as expected, at least opening the accordion (while closing is correctly animated). I tried also with @starting-style rule but without success.

Have you some suggestions?

Answer 1

Ok, I think that I found the issue.

The transition is ok "opening" the accordion but not closing because the display property is changed from grid to none and so the grid-template-rows is not defined in this last case.

My issue is that I'd need to hide the accordion content to avoid possible keyboard navigation in links present inside that region.

I solved this, not changing display property anymore, and simply toggling the inert attribute via js on accordion opening/closing.

Not the ideal solution that I'd like but... js was anyway present to manage aria-attributes switches