Improve accessibility of the search option by adding results page#90
Improve accessibility of the search option by adding results page#90kurapativyshnavi wants to merge 3 commits intowpaccessibility:mainfrom
Conversation
|
Thank you @kurapativyshnavi |
|
Hi @rianrietveld and @joedolson, I've been looking into the failed "Deploy PR Preview" check on this pull request. The logs show a permissions error: It seems like the automated deployment process is being blocked because the GitHub Actions bot doesn't have permission to write to the I've also addressed the issue itself in the code, but the check will continue to fail until the permissions are updated. Thanks for your help! |
|
hi @kurapativyshnavi, thanks for reporting. I created an issue for the failing Github actions. |
joedolson
left a comment
joedolson
left a comment
There was a problem hiding this comment.
This is a good start; there are some further changes that I think would make this better. Thank you!
| autocomplete="off" | ||
| > | ||
|
|
||
| <button type="submit" class="search-submit">Search</button> |
There was a problem hiding this comment.
As part of this change, let's also update the CSS to make the submit button visible.
| const query = urlParams.get("q"); | ||
|
|
||
| if (query) { | ||
| const resultsContainer = document.getElementById("search-results-page"); |
There was a problem hiding this comment.
We should use the query to re-populate the search input. It will need to be sanitized before being inserted into the text field.
| } else { | ||
| resultsContainer.innerHTML = `<p>No results found for "<strong>${query}</strong>".</p>`; | ||
| } | ||
| } |
There was a problem hiding this comment.
Should also generate an error if the searchIndex or searchDocs properties are not present.
| // --------------------------- | ||
| // Full Search Results Page | ||
| // --------------------------- | ||
| document.addEventListener("DOMContentLoaded", function () { |
There was a problem hiding this comment.
The jtd.onReady method is a wrapper for DOMContentLoaded in this script package, so let's just use that.
| const resultsContainer = document.getElementById("search-results-page"); | ||
| if (resultsContainer) { | ||
| // Ensure index and docs exist | ||
| if (window.jtdSearchIndex && window.jtdSearchDocs) { |
There was a problem hiding this comment.
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.
|
@kurapativyshnavi Are you going to have a chance to finish this up? It's a great start, and would love to see you get it in! |
|
yes,i am willing to do @joedolson. |
|
Great, thank you! |
|
Closing this, as we don't need two PRs open for the same issue. Copy of #205 |
|
3 participants
Related issue: #2
This PR improves the accessibility of the search functionality by:
Adding a dedicated search.html page to display search results with proper headings and regions.
Updating the search form to include a submit action (action="/search/") so users can navigate to a full search results page.
Ensuring screen reader feedback is available for both the dropdown and the results page (aria-live="polite").
Why
Previously, search only displayed a dropdown with results and provided limited screen reader feedback. With these changes, users (especially screen reader users) can now:
Submit a search query and access results on a separate page.
Navigate results more easily with semantic HTML and ARIA support.