From 9d9d33f199cd02e6d6c17cfb329af4631326d261 Mon Sep 17 00:00:00 2001 From: kewitham Date: Tue, 16 Apr 2024 15:38:02 -0500 Subject: [PATCH] address comments and accessibility updates --- _includes/search-box.html | 15 +++--- _layouts/default.html | 1 - assets/js/laws-regs-parser.js | 87 +++++++++++++++++++++-------------- assets/sass/custom/_page.scss | 46 ++++++++++++------ 4 files changed, 93 insertions(+), 56 deletions(-) diff --git a/_includes/search-box.html b/_includes/search-box.html index 19f0ada03..bc3fb8467 100644 --- a/_includes/search-box.html +++ b/_includes/search-box.html @@ -1,13 +1,14 @@ -
-
+
+ +
- +
- {% if include.mobile==false %} + {% unless include.mobile %} - {% endif %} + {% endunless %}
{% if include.mobile %} diff --git a/_layouts/default.html b/_layouts/default.html index 2689e6472..e920bd9a4 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -18,7 +18,6 @@ {% include back-to-top.html %} {% endunless %} {% if page.interactive-headers %} - {% include mobile-search-button.html %} {% endif %} {% unless page.title == "Give Us Feedback" %} {% include touchpoints.html %} diff --git a/assets/js/laws-regs-parser.js b/assets/js/laws-regs-parser.js index 6f147640f..ba12b64f7 100644 --- a/assets/js/laws-regs-parser.js +++ b/assets/js/laws-regs-parser.js @@ -44,12 +44,14 @@ export default function parseLawsAndRegs(mainContent) { : currentSubpart; if (i !== 0 && Array.from(section.childNodes).length >= 2 && !subpartIndices.includes(i)) { const btnDiv = buildBtns(i, '.section'); - section.firstChild.after(btnDiv); + section.firstChild.firstChild.after(btnDiv); const jumpLink = document.createElement('a'); jumpLink.id = 'section' + i.toString(); section.prepend(jumpLink); } - currentSubpart.appendChild(section); + const sectionWrapper = createDiv('section-wrapper'); + sectionWrapper.appendChild(section); + currentSubpart.appendChild(sectionWrapper); }); const newMainContent = buildMainContent(subparts); @@ -58,47 +60,55 @@ export default function parseLawsAndRegs(mainContent) { mainContent.remove(); if (window.matchMedia('(max-width: 1023px)').matches) { setUpMobileSearch(); - } else { - const searchBoxWrapper = document.querySelector('.desktop-search-box'); - const searchInput = searchBoxWrapper.querySelector('.searchbox'); - const searchGo = searchBoxWrapper.querySelector('#submit-search'); - const searchNav = searchBoxWrapper.querySelector('.result-nav'); - const searchBox = searchBoxWrapper.querySelector('.searchbox'); - setUpButtons(searchGo, searchNav, searchBox); - searchInput.addEventListener('input', () => initSearch(searchBoxWrapper, searchGo, searchNav)); + return; } + const searchBoxWrapper = document.querySelector('.desktop-search-box'); + const searchInput = searchBoxWrapper.querySelector('.searchbox'); + const searchGo = searchBoxWrapper.querySelector('#submit-search'); + const searchNav = searchBoxWrapper.querySelector('.result-nav'); + const searchBox = searchBoxWrapper.querySelector('.searchbox'); + setUpButtons(searchGo, searchNav, searchBox); + searchInput.addEventListener('input', () => + initSearch(searchInput, searchBoxWrapper, searchGo, searchNav) + ); } function setUpMobileSearch() { - const mobileSearchBtn = document.querySelector('#mobile-search-button'); const searchBoxWrapper = document.querySelector('.mobile-search-box'); const searchInput = searchBoxWrapper.querySelector('.searchbox'); const searchGo = searchBoxWrapper.querySelector('#submit-search'); const searchNav = searchBoxWrapper.querySelector('.result-nav'); const searchBox = searchBoxWrapper.querySelector('.searchbox'); setUpButtons(searchGo, searchNav, searchBox); - searchInput.addEventListener('input', () => initSearch(searchBoxWrapper, searchGo, searchNav)); - mobileSearchBtn.addEventListener('click', () => { + searchInput.addEventListener('click', () => { + if (searchBoxWrapper.classList.contains('visible')) return; searchBoxWrapper.classList.add('visible'); searchInput.focus(); - const overlay = document.querySelector('.overlay'); + let overlay = document.querySelector('.overlay'); if (overlay) { overlay.classList.remove('display-none'); - } else { - const overlay = document.createElement('div'); - overlay.classList.add('overlay'); - document.body.appendChild(overlay); - overlay.addEventListener('click', () => { - closeSearch(overlay, searchBoxWrapper, searchInput); - }); + return; } - mobileSearchBtn.classList.add('display-none'); + overlay = document.createElement('div'); + overlay.classList.add('overlay'); + document.body.appendChild(overlay); + overlay.addEventListener('click', () => { + closeSearch(overlay, searchBoxWrapper, searchInput); + }); }); + searchInput.addEventListener('input', () => + initSearch(searchInput, searchBoxWrapper, searchGo, searchNav) + ); } -function initSearch(searchBoxWrapper, searchGo, searchNav) { +function initSearch(searchInput, searchBoxWrapper, searchGo, searchNav) { searchGo.classList.remove('display-none'); searchNav.classList.add('display-none'); + searchInput.addEventListener('keydown', (e) => { + if (e.key == 'Enter') { + search(searchBoxWrapper); + } + }); searchGo.addEventListener('click', () => search(searchBoxWrapper)); } @@ -108,16 +118,16 @@ function closeSearch(overlay, searchBoxWrapper, searchInput) { const searchBox = searchBoxWrapper.querySelector('.searchbox'); clearSearch(searchGo, searchNav, searchBox); searchGo.classList.remove('display-none'); - const mobileSearchBtn = document.querySelector('#mobile-search-button'); overlay.classList.add('display-none'); searchBoxWrapper.classList.remove('visible'); searchBoxWrapper.classList.remove('active'); searchInput.value = ''; - mobileSearchBtn.classList.remove('display-none'); const sections = document.querySelectorAll('.section'); sections.forEach((section) => { - removeHighlights(section); - section.classList.remove('searched'); + let newSection = section.cloneNode(true); + newSection = removeHighlights(newSection); + newSection.classList.remove('searched'); + section.parentNode.replaceChildren(newSection); }); } @@ -320,9 +330,11 @@ function navResults(e, dir, prevBtn, nextBtn, searchNav) { const direction = dir === 'next' ? 1 : -1; const newCount = count + direction; const canGoNext = newCount <= total; - const canGoPrev = newCount >= 0; + const canGoPrev = newCount >= 1; nextBtn.classList.toggle('disabled', !canGoNext || newCount === total); - prevBtn.classList.toggle('disabled', !canGoPrev || newCount === 0); + prevBtn.classList.toggle('disabled', !canGoPrev || newCount === 1); + nextBtn.setAttribute('tabIndex', !canGoNext || newCount === total ? -1 : 0); + prevBtn.setAttribute('tabIndex', !canGoPrev || newCount === 1 ? -1 : 0); if (dir === 'next' && !canGoNext) return; if (dir !== 'next' && !canGoPrev) return; @@ -353,8 +365,10 @@ function search(searchBoxWrapper) { } const sections = document.querySelectorAll('.section'); sections.forEach((section) => { - removeHighlights(section); - updateSection(section, searchQuery); + let newSection = section.cloneNode(true); + newSection = removeHighlights(newSection); + newSection = updateSection(newSection, searchQuery); + section.parentNode.replaceChildren(newSection); }); const results = document.querySelectorAll('.search-term'); if (results.length === 0) { @@ -370,7 +384,8 @@ function search(searchBoxWrapper) { searchGo.classList.add('display-none'); searchNav.classList.remove('display-none'); totalCount.innerText = results.length; - currentCount.innerText = '0'; + currentCount.innerText = '1'; + location.hash = '#inPageResult1'; } function highlightTerm(text, section) { @@ -399,6 +414,7 @@ function removeHighlights(section) { .replaceAll('', '') .replaceAll('', ''); section.innerHTML = innerHTML; + return section; } function updateSection(section, searchQuery) { @@ -412,6 +428,7 @@ function updateSection(section, searchQuery) { const detailEls = section.querySelectorAll('details'); detailEls.forEach((detailEl) => detailEl.removeAttribute('open')); } + return section; } function setUpButtons(searchGo, searchNav, searchBox) { @@ -437,7 +454,9 @@ function clearSearch(searchGo, searchNav, searchBox, e = null) { searchNav.classList.add('display-none'); searchBox.value = ''; sections.forEach((section) => { - removeHighlights(section); - section.classList.remove('searched'); + let newSection = section.cloneNode(true); + newSection = removeHighlights(newSection); + newSection.classList.remove('searched'); + section.parentNode.replaceChildren(newSection); }); } diff --git a/assets/sass/custom/_page.scss b/assets/sass/custom/_page.scss index 5ddb40898..460d717d9 100644 --- a/assets/sass/custom/_page.scss +++ b/assets/sass/custom/_page.scss @@ -91,8 +91,19 @@ } @media(max-width: 1023px) { - .search-box-wrapper { - display: none; + .search-box-wrapper.mobile-search-box { + bottom: 0; + position: fixed; + margin-right: 0.5rem; + right: 50%; + transform: translateX(50%); + width: auto; + z-index: 9999; + display: block; + + .search-label { + display: none; + } a.searchbtn { display: none; @@ -111,8 +122,8 @@ background-color: #005EA2; color: white; position: absolute; - right: 1em; - bottom: 1em; + right: 0; + bottom: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; width: 15%; @@ -129,8 +140,12 @@ } .icon-container { - right: 48px; - top: 34px; + right: 12px; + top: 18px; + } + + .close-search { + display: none; } &.visible { @@ -144,31 +159,34 @@ transform: translateX(-20%); box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.1); width: 90%; + bottom: auto; + right: auto; + border-radius: 0.25rem; - .close-search { - display: none; + .search-label { + display: block; } &.active { - bottom: 50px; + bottom: 75px; top: auto; padding-right: 3em; - .mobile-searchbar { - right: 3em; - } - .clear { font-size: 8px; color: #71767A; text-decoration: none; } + .result-number { + display: block; + } + .close-search { display: block; position: absolute; right: 8px; - top: 32px; + top: 50px; } } }