//Finding the height of the header
let headerHeight = document.querySelector('header');
let height = headerHeight.offsetHeight;
//Adjusting the #navbarNav's top margin to accommodate the header
let nn = document.getElementById("navbarNav");
nn.style.top = height.toString() + "px";
let hamburger = document.getElementById("hamMenuButton");
let shown = false;
hamburger.addEventListener("click", function () {
if (shown) { //if #navbarNav is showing
hideNN();
} else { //if not
showNN();
}
});
let i = document.getElementById("ham-img");
let memberUN = document.getElementById("member-un");
function showNN() {
//********************This causes an issue********************
memberUN.style.display = "none";
shown = true;
}
function hideNN() {
//********************This causes an issue********************
memberUN.style.display = "flex";
shown = false;
}header {
display: flex;
}
#hamMenuButton:focus {
border: 1px solid black;
}
.navbar-toggler {
outline: none!important;
box-shadow: none!important;
border: none!important;
}
.navbar-toggler:active,
.navbar-toggler:focus {
outline: none!important;
box-shadow: none!important;
border: 1px solid black!important;
}
#navbarNav {
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
z-index: 2;
cursor: pointer;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SOF</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908f908d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21424e534461130f180f13">[email protected]</a>/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010657e617e63">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="18687768687d6a36726b582936292e3628">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6a706a706f">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<header>
<section class="dropdown my-1" id="member-un">
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" tabindex="0" aria-expanded="false">
<p>Hello, John Smith</p>
</button>
<!-- The problematic code -->
<section class="dropdown-menu dropdown-menu-right p-0" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item py-3" href="" id="drop-logout">Logout</a>
</section>
</section>
<nav class="navbar" id="hamburger-menu">
<button class="navbar-toggler"
id="hamMenuButton"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-expanded="false"
aria-controls="navbarNav">
Menu
</button>
</nav>
</header>
<section class="collapse py-5" id="navbarNav">
<p>Hello, John Smith</p>
</section>
<main>
<!--Remaining code-->
</main>
</body>
</html>I am currently using NVDA screen reader to assess website accessibility while utilizing Bootstrap. I am trying to implement an overlay menu activated by a hamburger button that toggles between visibility and hidden states without obscuring the header section of the site.
When the overlay menu appears, I intend to conceal the element 'member-un'. Although the functionality works as expected, introducing the lines ‘memberUN.style.display = "none";’ and ‘memberUN.style.display = "flex";’ disrupts the screen reader's ability to announce "Expanded" and "Collapsed". Any suggestions on resolving this issue?