Skip to content

Commit

Permalink
address comments and accessibility updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@kewitham
kewitham committed Apr 16, 2024
1 parent 4a00d4c commit 9d9d33f
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 56 deletions.
15 changes: 8 additions & 7 deletions _includes/search-box.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<div class="search-box-wrapper {% if include.mobile %} mobile-search-box {% else %} desktop-search-box {% endif %}">
<div class="display-flex flex-row flex-align-center">
<div role="region" aria-label="In page search" class="search-box-wrapper {% if include.mobile %} mobile-search-box {% else %} desktop-search-box {% endif %}">
<label class="text-bold search-label" for="{% if include.mobile %} in-page-search-mobile {% else %} in-page-search {% endif %}">Search this page</label>
<div class="display-flex flex-row flex-align-center position-relative">
<svg class="usa-icon search mobile:display-none" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{{ '/assets/images/uswds/sprite.svg' | relative_url }}#search"></use>
</svg>
<input class="usa-input radius-lg searchbox" placeholder="Search this page" >
<input aria-label="Screen reader users use regions to move back and forth from search field to results" id="{% if include.mobile %} in-page-search-mobile {% else %} in-page-search {% endif %}" class="usa-input radius-lg searchbox" placeholder="Search this page" >
<div class="icon-container">
<div class="result-nav display-flex display-none flex-align-center">
<span class="result-number" tabindex="0" aria-label="number of in page search results"><span class="current" tabindex="0" aria-label="current result number"></span>/<span class="total" tabindex="0" aria-label="total results" aria-live="assertive"></span></span>
<a href="#" class="prev-result display-flex flex-align-center flex-row flex-justify disabled" id="prev-result" tabindex="0" aria-label="go to previous result">
<span class="result-number" aria-live="assertive" aria-label="number of in page search results"><span class="current" aria-label="current result number"></span>/<span class="total" aria-label="total results"></span></span>
<a href="#" class="prev-result display-flex flex-align-center flex-row flex-justify disabled" id="prev-result" tabindex="-1" aria-label="go to previous result">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{{ '/assets/images/uswds/sprite.svg' | relative_url }}#expand_less"></use>
</svg>
Expand All @@ -27,13 +28,13 @@
{% endif %}
</a>
</div>
{% if include.mobile==false %}
{% unless include.mobile %}
<a href="#" class="mobile:display-none display-flex display-none searchbtn flex-align-center flex-row flex-justify" id="submit-search" aria-label="search in page">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{{ '/assets/images/uswds/sprite.svg' | relative_url }}#arrow_forward"></use>
</svg>
</a>
{% endif %}
{% endunless %}
</div>
{% if include.mobile %}
<a href="#" class="desktop:display-none display-flex mobile-searchbar flex-align-center flex-row flex-justify-center" id="submit-search" tabindex="0" aria-label="search in page">
Expand Down
1 change: 0 additions & 1 deletion _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
87 changes: 53 additions & 34 deletions assets/js/laws-regs-parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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));
}

Expand All @@ -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);
});
}

Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down Expand Up @@ -399,6 +414,7 @@ function removeHighlights(section) {
.replaceAll('<span class="search-term" tabindex="0">', '')
.replaceAll('</span>', '');
section.innerHTML = innerHTML;
return section;
}

function updateSection(section, searchQuery) {
Expand All @@ -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) {
Expand All @@ -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);
});
}
46 changes: 32 additions & 14 deletions assets/sass/custom/_page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%;
Expand All @@ -129,8 +140,12 @@
}

.icon-container {
right: 48px;
top: 34px;
right: 12px;
top: 18px;
}

.close-search {
display: none;
}

&.visible {
Expand All @@ -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;
}
}
}
Expand Down

0 comments on commit 9d9d33f

Please sign in to comment.