Accessibility of responsive menu - css

Question

I want to deepen my knowledge about accessibility. So I appreciate any feedback. Please check this code whether it fulfills (hopefully high) standards of accessibility for a responsive menu. I think that there may be some issues with keyboard navigation – but I don’t know.
First the HTML. Pls. notice the comments inside the HTML:
For convenience I list them here too:
Wrap navigation in nav tag. Don't use <div class="navigation">
Give navigation a role="navigation"
Don't wrap button in a tag or div. Instead use button
Give screenreader a hint, whether menu is expanded or hidden with area-expanded="Boolean". Add hint dynamically with JS.
So the complete HTML is:
<header class="header">
<!-- role=navigation to ensure better support, since not all browsers/screen readers will recognize the <nav> element. -->
<nav role="navigation" class="navbar">
companyLogo
<ul class="nav-menu">
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">nav</a></li>
</ul>
<!-- By using aria-expanded attribute, the user will be able to know that the button content is expanded or collapsed. At first, we will add the attribute by default and then JavaScript will help changing the value.
https://www.a11ymatters.com/pattern/mobile-nav/ -->
<button class="hamburger" aria-expanded="false">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</nav>
</header>
I reduce the CSS part to this:
.hamburger {
display: none;
}
Is it appropriate to hide the .hamburger in the DOM? (I also gave it an area-expanded – does it make sense?)
The JS: Here I am primarily interested whether the if statement changing the area-expanded dynamically works as intended.
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", openMenu);
function openMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
// Not sure whether, this is correct
if (navMenu.classList.contains("active")) {
hamburger.setAttribute("aria-expanded", "true");
} else {
hamburger.setAttribute("aria-expanded", "false");
}
}
It would be great, if:
you could provide feedback, which makes this menu more accessible.
you could give me an idea how to optimize the keyboard input.
you comment whether it is approppriate to hide the the hamburger with display: none
you could tell me whether the JS which dynamically changes the Boolean in area-expanded is correct.
Thank you for your time.