Collapsible Navbar

[dday9]

I've been toying around with the idea of creating a collapsible navbar with minimal changes and this is what I came up with.

<header>
  <details open>
    <summary><strong>Site Title</strong></summary>
    <nav aria-label="Toggle global navigation">
      <ul>
        <li><a href="#" aria-current="page">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
      <noscript><span class="mobile-only">JavaScript is disabled, collapse this navigation manually.</span></noscript>
    </nav>
  </details>
</header>

body > header > details > nav > ul,
body > header > details > nav > ul > li {
  display: block;
}
body > header > details > nav > ul > li > a[aria-current] {
  color: var(--pico-primary-hover-background);
  text-decoration: underline;
}
body > header > details > nav > ul > li > a:not([aria-current]) {
  color: var(--pico-secondary-hover-background);
}
body > header > details > nav > ul > li > a:not([aria-current]):hover {
  color: var(--pico-primary-hover-background);
  text-decoration-color: initial;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }

  body > header > details > nav > ul {
    display: flex;
  }
  body > header > details:is(:open) > summary {
    pointer-events: none;
  }
  body > header > details:is(:open) > summary::after {
    background: none;
    pointer-events: none;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const mobileBreakPoint = window.matchMedia('(min-width: 768px)');
  const globalNavigation = document.querySelector('body > header > details');
  if (!mobileBreakPoint.matches) {
    globalNavigation.removeAttribute('open');
  }
});

Demo: https://jsfiddle.net/1hyqmaxL/

There are a couple of features:

1. This uses a details element to allow for the navigation to be hidden
2. The site title is displayed in the summary
3. When not in a mobile view, the user cannot collapse the details thus making the navigation always visible
4. If the user has JavaScript disabled then a noscript is used to tell the user to manually collapse the navigation if they're in a mobile view.

The reason I bring this up as a discussion is because I wanted to get y'all's opinion on how this would behave with assistive technologies and if this conforms to the HTML5 technical specifications.

I feel like it does, but I am doing some stuff like with the site title and the details:is(:open) that make me second guess myself.