Skip to content

Improve accessibility of the search option by adding results page #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Improve accessibility of the search option by adding results page #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fe4142d
Update search_header.html
kurapativyshnavi Sep 13, 2025
6c23ff4
Create search.html
kurapativyshnavi Sep 13, 2025
9aecdad
Update wp-a11y-docs.js
kurapativyshnavi Sep 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions _includes/components/search_header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@

<div class="search">
<form class="search-input-wrap" role="search">
<input type="text" id="search-input" name="q" class="search-input" placeholder="Search {{site.title}}" autocomplete="off">
<form class="search-input-wrap" role="search" action="/search/" method="get">
<label for="search-input" class="search-label">
<span class="screen-reader-text">Search {{site.title}}</span>
<svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
<span class="screen-reader-text">Search {{ site.title }}</span>
<svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true">
<use xlink:href="#svg-search"></use>
</svg>
</label>

<input
type="search"
id="search-input"
name="q"
class="search-input"
placeholder="Search {{ site.title }}"
aria-label="Search {{ site.title }}"
autocomplete="off"
>

<button type="submit" class="search-submit">Search</button>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As part of this change, let's also update the CSS to make the submit button visible.

</form>

<div id="search-results" class="search-results"></div>
</div>
54 changes: 49 additions & 5 deletions assets/js/wp-a11y-docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ function initSearch() {
});

searchLoaded(index, docs);
window.jtdSearchIndex = index;
window.jtdSearchDocs = docs;

} else {
console.log('Error loading ajax request. Request status:' + request.status);
}
Expand Down Expand Up @@ -429,11 +432,12 @@ function searchLoaded(index, docs) {
var active = document.querySelector('.search-result.active');
if (active) {
active.click();
} else {
var first = document.querySelector('.search-result');
if (first) {
first.click();
}
}
else {
var inputValue = searchInput.value.trim();
if (inputValue.length > 0) {
window.location.href = '/search/?q=' + encodeURIComponent(inputValue);
}
}
return;
}
Expand Down Expand Up @@ -560,3 +564,43 @@ jtd.onReady(function(){
});

})(window.jtd = window.jtd || {});

// ---------------------------
// Full Search Results Page
// ---------------------------
document.addEventListener("DOMContentLoaded", function () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The jtd.onReady method is a wrapper for DOMContentLoaded in this script package, so let's just use that.

const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get("q");

if (query) {
const resultsContainer = document.getElementById("search-results-page");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use the query to re-populate the search input. It will need to be sanitized before being inserted into the text field.

if (resultsContainer) {
// Ensure index and docs exist
if (window.jtdSearchIndex && window.jtdSearchDocs) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If initSearch hasn't completed, then these will be empty when the DOM loads. I think we probably need to defer this to ensure that initSearch is finished? As the content gets larger, that function is likely to take longer to execute.

const index = window.jtdSearchIndex;
const docs = window.jtdSearchDocs;

let results = index.search(query);

if (results.length > 0) {
resultsContainer.innerHTML = `
<p>${results.length} results found for "<strong>${query}</strong>"</p>
<ul>
${results.map(r => {
const doc = docs[r.ref];
return `
<li>
<a href="${doc.url}">${doc.title}</a><br>
<small>${doc.relUrl}</small>
</li>`;
}).join("")}
</ul>
`;
} else {
resultsContainer.innerHTML = `<p>No results found for "<strong>${query}</strong>".</p>`;
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should also generate an error if the searchIndex or searchDocs properties are not present.

}
}
});

8 changes: 8 additions & 0 deletions search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
layout: default
title: Search Results
---
<h1>Search Results</h1>
<div id="search-results-page" role="region" aria-live="polite">
<p>Loading search results…</p>
</div>
Loading