update close dropdown menu function

hmillersarah · hmillersarah · commit abdd6ba5ba86 · 2025-04-29T11:56:19.000-04:00
diff --git a/404.html b/404.html
@@ -134,7 +134,7 @@ <h2 class="text-404">404</h2>
 				<div class="ibm-col-1-1">
 				<div class="ibm-footer-corporate-links">
 					<ul>
-					<li><a onfocus="closeNavMenu()" href="https://www.ibm.com/contact/us" target="_blank">Contact</a></li>
+					<li><a href="https://www.ibm.com/contact/us" target="_blank">Contact</a></li>
 					<li><div></div></li>
 					<li><a href="http://www.ibm.com/privacy/us/en/" target="_blank">Privacy</a></li>
 					<li><div></div></li>
diff --git a/archive/ims-makerspace.html b/archive/ims-makerspace.html
@@ -316,7 +316,7 @@ <h1>IMS Makerspace</h1>
 											education assets, design thinking exercises, a potential proof of concept, and production delivery.
 										</p>
 										<div class="pure-u-1 intro-sec-b">
-											<a class="zs-w-button-transparent" target="_blank" rel="noopener noreferrer" onfocus="closeNavMenu()"
+											<a class="zs-w-button-transparent" target="_blank" rel="noopener noreferrer"
 												href="https://www.surveygizmo.com/s3/4453456/IMS-Makerspace-Enrollment-Form" aria-label="Enroll now into the IMS Makerspace framework">
 												Enroll now →
 											</a>
diff --git a/ims-apis.html b/ims-apis.html
@@ -107,8 +107,7 @@ <h2>Call APIs from Z</h2>
 									<p class="apis-section-text">
 										Create application programming interfaces (APIs) in minutes to access IBM Z® applications and data.
 										<p>
-											<a onfocus="closeNavMenu()" 
-												target="_blank" 
+											<a target="_blank" 
 												rel="noopener noreferrer" 
 												href="https://www.ibm.com/downloads/cas/9DQBDQRB"
 												class="apis-link">Download PDF →
diff --git a/ims-db.html b/ims-db.html
@@ -117,7 +117,7 @@ <h2>Managed ACBs</h2>
 										<div class="pure-u-1">
 											<h4>Implementing the IMS catalog and converting to managed ACBs</h4>
 											<p class="macb-p">Ready to migrate to using managed ACBs? We're here to help.</p>
-											<a onfocus="closeNavMenu()" target="_blank" rel="noopener noreferrer" aria-label="Read the whitepaper on managed ACBs"
+											<a target="_blank" rel="noopener noreferrer" aria-label="Read the whitepaper on managed ACBs"
 												href="https://community.ibm.com/community/user/ibmz-and-linuxone/viewdocument/converting-ims-managed-acbs?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560&tab=librarydocuments">
 												Read the whitepaper →</a>
 											<br>
diff --git a/ims-docs.html b/ims-docs.html
@@ -117,7 +117,7 @@ <h3>
 												</h3>
 												<p>Start here to search across IMS or IBM product information.</p>	
 												<br>
-													<a aria-label="Explore IMS Docs" onfocus="closeNavMenu()"
+													<a aria-label="Explore IMS Docs"
 													title="IMS Docs home" target="_blank" rel="noopener noreferrer" 
 													href="https://www.ibm.com/docs/en/ims/latest">Explore →</a>
 											</div>
diff --git a/ims-internship-2025.html b/ims-internship-2025.html
@@ -185,7 +185,6 @@ <h2>Don't miss this opportunity to expand your IMS skills!</h2>
 					<h4>Space is limited. Reserve your spot today!</h4>
 					<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-2 pure-u-lg-1-2 pure-u-xl-1-4">
 						<a class="button button-primary" 
-							onfocus="closeNavMenu()" 
 							target="_blank"
 							aria-label="Register now for the IMS Internship" 
 							href="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html" 
diff --git a/ims-java.html b/ims-java.html
@@ -125,7 +125,7 @@ <h3>Java inside IMS</h3>
 												<p>Cost efficiency with Java on Z/OS through offload to specialty engines</p>
 												<p>Over 15 years of Java support in IMS makes it more than production ready for the enterprise</p>
 												<div class="pure-u-1 pure-u-1 pure-u-md-1-5">
-													<a target="_blank" rel="noopener noreferrer" onfocus="closeNavMenu()"
+													<a target="_blank" rel="noopener noreferrer"
 													aria-label="Learn more about Java inside IMS"
 													href="https://www.ibm.com/docs/en/ims/latest?topic=ims-solutions-java-development-overview" >
 													Learn more →</a>
diff --git a/ims-support.html b/ims-support.html
@@ -110,7 +110,7 @@ <h3>
 													IBM Software Support
 												</h3>
 												<p>View, open cases, or find other valuable support resources.</p>		
-												<a  onfocus="closeNavMenu()" aria-label="Explore IBM software support"
+												<a  aria-label="Explore IBM software support"
 													title="IBM software support" target="_blank" rel="noopener noreferrer" 
 													href="https://www.ibm.com/mysupport/">Explore →
 												</a>
diff --git a/index.html b/index.html
@@ -121,7 +121,7 @@
             <span class="pure-u-1">  
               <div class="banner-container">
                 <img src="wp-content/Icon_02_IMS GoldPage.svg" alt="Blog">
-                <p class="banner-text-left"><a onfocus="closeNavMenu()" href="https://imsdev.github.io/ims-internship-2025.html" rel="noopener noreferrer">Register for the May 2025 Customer Internship!</a> </p> 
+                <p class="banner-text-left"><a href="https://imsdev.github.io/ims-internship-2025.html" rel="noopener noreferrer">Register for the May 2025 Customer Internship!</a> </p> 
                 <p class="banner-text-right"><a href="https://forms.office.com/r/GVb90wUSXf" target="_blank" rel="noopener noreferrer">IMS modernization survey →</a> </p> 
                 <!-- <p class="banner-text-right"><a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a> </p> -->
               </div>
diff --git a/web-components/hero-section/hero-section.html b/web-components/hero-section/hero-section.html
@@ -6,8 +6,7 @@ <h6 class="section"></h6>
         <h2 class="name"></h2>
         <span class="desc"></span>
         <div class="links">
-            <a  onfocus="closeNavMenu()" 
-                rel="noopener noreferrer"
+            <a  rel="noopener noreferrer"
                 class="button button-primary"
             >
                 <span class="button-primary-text"></span>
diff --git a/web-components/hero-section/hero-section.js b/web-components/hero-section/hero-section.js
@@ -58,7 +58,7 @@ function createComponent(html) {
         // Invoked when element is added to document
         connectedCallback() {
             // Create shadow root for element
-            const shadow = this.attachShadow({mode: 'closed'});
+            const shadow = this.attachShadow({mode: 'open'});
             shadow.innerHTML = html;
 
             // Set content
diff --git a/web-components/nav-header/nav-header.js b/web-components/nav-header/nav-header.js
@@ -31,12 +31,14 @@ function createComponent(html) {
             // Variables
             // --------------------------------------------------------------------------------------------------
                 const contentBody = document.querySelector('#content');
-                const firstLink = document.querySelector('a');
                 // Dropdown navigation menu
                 const menuButton = shadow.querySelector('.hamburger-menu'); 
                 const menuToggle = shadow.getElementById('menu-toggle'); 
                 const dropdownMenu = shadow.querySelector('.dropdown-menu'); 
                 const menuItems = dropdownMenu.querySelectorAll('a'); 
+                const documentationMenuItem = menuItems[menuItems.length - 2];
+                const supportMenuItem = menuItems[menuItems.length - 1];
+                
                 // Search
                 const searchForm = shadow.getElementById('search-form'); 
                 const searchInput = shadow.getElementById('search-input'); 
@@ -52,7 +54,9 @@ function createComponent(html) {
                 // Hide search results if hamburger menu is focused
                 menuButton.addEventListener('focus', () => {searchResults.style.display = 'none';})
                 // Hide dropdown menu for keyboard navigation when first link in document is focused
-                firstLink.addEventListener('focus', () => {if (menuToggle.checked) {toggleMenu()}});
+                supportMenuItem.addEventListener('focusout', (event) => {
+                    if (event.relatedTarget != documentationMenuItem) {toggleMenu()};
+                })
 
             // Event listeners for all menus
             // --------------------------------------------------------------------------------------------------
diff --git a/wp-includes/js/navbar.js b/wp-includes/js/navbar.js
@@ -13,13 +13,4 @@ $(document).ready(function() {
             $('.nav-item').attr('tabindex', toggleNum);
         })
     });
-});
-
-// Closes navigation menu when item after menu is in focus
-function closeNavMenu() {
-    document.getElementById("toggle1").checked = false;
-    $(document).ready(function() {
-        // Menu items set to not focusable unless hamburger menu checkbox is checked
-        $('.nav-item').attr('tabindex', -1);
-    })
-}
+});
