Skip to content

Commit c1ae61a

Browse files
hmillersarahhmillersarah
committed
hide menu for keyboard nav
1 parent 2f8eb73 commit c1ae61a

4 files changed

Lines changed: 15 additions & 33 deletions

File tree

‎ims-advocacy.html‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -78,34 +78,18 @@
7878

7979
<!-- Web components -->
8080
<script src="web-components/nav-header/nav-header.js" type="module"></script>
81-
<script src="web-components/nav-header/search.js"></script>
8281
</head>
8382

8483
<!-- MASTHEAD_SITENAV_BEGIN -->
8584
<body id="ibm-com" class="ibm-com ibm-type">
8685
<nav-header></nav-header>
87-
<!-- <div id="tipue_search_content" class="search_content search-dropdown"></div> -->
88-
89-
<script>
90-
// window.addEventListener('load', function() {
91-
// const navHeader = document.querySelector('nav-header');
92-
// const searchInput = navHeader.shadowRoot.querySelector('#tipue_search_input');
93-
// console.log(searchInput);
94-
// }), '1000';
95-
96-
// $(document).ready(function() {
97-
// $('#tipue_search_input').tipuesearch();
98-
// });
99-
</script>
10086

10187
<!-- <script>
10288
$(document).ready(function() {
10389
$('#tipue_search_input').tipuesearch("q", "#tipue_search_input", "#tipue_search_content");
10490
});
10591
</script> -->
10692

107-
108-
10993
<div id="content" class="main-content">
11094
<main id="main">
11195
<!-- =========================== Hero =========================== -->

‎web-components/nav-header/nav-header.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,6 @@ form div > img {
217217
.skip-link:focus {
218218
background-color: #f1f1f1;
219219
border-radius: 3px;
220-
/* box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); */
221220
clip: auto !important;
222221
color: #21759b;
223222
display: block;
@@ -227,7 +226,6 @@ form div > img {
227226
left: 0.3125em;
228227
line-height: normal;
229228
padding: 1em;
230-
/* padding: 15px 23px 14px; */
231229
text-decoration: none;
232230
top: 0.3125em;
233231
width: auto;

‎web-components/nav-header/nav-header.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,18 +49,19 @@ function createComponent(html) {
4949
const menuItems = dropdownMenu.querySelectorAll('a');
5050

5151
// Toggle dropdown menu on hamburger menu click
52-
menuButton.addEventListener('click', () => {this.toggleMenu(menuToggle, dropdownMenu, searchResults, menuItems)});
52+
menuButton.addEventListener('click', () => {this.toggleMenu(menuToggle, dropdownMenu, menuItems)});
5353
menuButton.addEventListener('keydown', (event) => {
54-
if (event.key === 'Enter') {this.toggleMenu(menuToggle, dropdownMenu, searchResults, menuItems)};
54+
if (event.key === 'Enter') {this.toggleMenu(menuToggle, dropdownMenu, menuItems)};
5555
})
56-
menuButton.addEventListener('focus', () => {searchResults.style.display = 'none';})
56+
// Hide search results
57+
menuButton.addEventListener('focus', () => {searchResults.style.display = 'none';})
5758

5859
// Hide nav dropdowns when user clicks outside of menu
5960
const contentBody = document.querySelector('#content');
6061
contentBody.addEventListener('click', () => {
6162
// Hide menu if open
6263
if (menuToggle.checked) {
63-
this.toggleMenu(menuToggle, dropdownMenu, searchResults, menuItems);
64+
this.toggleMenu(menuToggle, dropdownMenu, menuItems);
6465
}
6566
// Hide search results
6667
searchResults.style.display = 'none';
@@ -75,7 +76,7 @@ function createComponent(html) {
7576
searchBar.classList.add('search-bar-focused');
7677
// Hide menu if open
7778
if (menuToggle.checked) {
78-
this.toggleMenu(menuToggle, dropdownMenu, searchResults, menuItems);
79+
this.toggleMenu(menuToggle, dropdownMenu, menuItems);
7980
}
8081
// Display search results
8182
searchResults.style.display = 'block';
@@ -103,18 +104,25 @@ function createComponent(html) {
103104
const input = searchInput.value;
104105
// Make search call
105106
$(searchInput).tipuesearch(input, searchInput, searchResults, 'web-component');
106-
// const result = search(input, searchInput, searchResults);
107107
// Get dropdown search results
108108
const accordions = shadow.querySelectorAll('.cordion');
109109
accordions.forEach(accordion => {
110110
accordion.addEventListener('click', this.handleResultsDropdown.bind(this));
111111
})
112112
});
113113

114+
// Hide dropdown menu for keyboard navigation
115+
const firstLink = document.querySelector('a');
116+
firstLink.addEventListener('focus', () => {
117+
// Hide menu if open
118+
if (menuToggle.checked) {
119+
this.toggleMenu(menuToggle, dropdownMenu, menuItems);
120+
}
121+
})
114122
}
115123

116124
// Toggle dropdown menu
117-
toggleMenu(menuToggle, dropdownMenu, searchResults, menuItems) {
125+
toggleMenu(menuToggle, dropdownMenu, menuItems) {
118126
// Update checked state of menuToggle
119127
var checkedState = menuToggle.checked ? false : true;
120128
menuToggle.checked = checkedState;
@@ -130,10 +138,6 @@ function createComponent(html) {
130138
menuItems[i].tabIndex = '-1';
131139
}
132140
}
133-
// Hide search results if menu is open
134-
// if (menuToggle.checked) {
135-
// searchResults.classList.add('hide-results');
136-
// }
137141
}
138142

139143
// Handle search result dropdown interaction

‎web-components/nav-header/search.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)