From 6ca07fe58742b69ccdd6f50524ac7643306eb8d7 Mon Sep 17 00:00:00 2001 From: leo60228 Date: Wed, 11 Sep 2024 17:36:24 -0400 Subject: [PATCH 1/7] use search result hover styling for focus too --- src/static/css/site.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/static/css/site.css b/src/static/css/site.css index c477fe8c1..7c360fe44 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -632,6 +632,7 @@ summary .group-name { position: relative; display: flex; padding: 4px 3px 4px 6px; + outline: none; } .wiki-search-result:hover { @@ -657,7 +658,7 @@ summary .group-name { border-bottom: 1px solid var(--dim-color); } -.wiki-search-result:hover::before { +.wiki-search-result:hover::before, .wiki-search-result:focus::before { display: block; background: var(--light-ghost-color); } From 7aec29a7d280313351bf2830bdcbc3c51250cc80 Mon Sep 17 00:00:00 2001 From: leo60228 Date: Wed, 11 Sep 2024 17:48:20 -0400 Subject: [PATCH 2/7] search result keyboard focus --- src/static/js/client/sidebar-search.js | 36 +++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js index fd571ac05..433ba0088 100644 --- a/src/static/js/client/sidebar-search.js +++ b/src/static/js/client/sidebar-search.js @@ -325,6 +325,16 @@ export function addPageListeners() { }, settings.stoppedTypingDelay); }); + info.searchInput.addEventListener('keydown', domEvent => { + if (domEvent.key === 'ArrowDown' && info.searchInput.value.length === info.searchInput.selectionStart) { + const elem = info.results?.firstChild; + if (elem && !elem.classList.contains('wiki-search-no-results')) { + domEvent.preventDefault(); + elem.focus(); + } + } + }); + info.endSearchLink.addEventListener('click', domEvent => { domEvent.preventDefault(); clearSidebarSearch(); @@ -589,7 +599,7 @@ function showSidebarSearchResults(results) { } for (const result of flatResults) { - const el = generateSidebarSearchResult(result); + const el = generateSidebarSearchResult(result, info); if (!el) continue; info.results.appendChild(el); @@ -605,7 +615,7 @@ function showSidebarSearchResults(results) { restoreSidebarSearchResultsScrollOffset(); } -function generateSidebarSearchResult(result) { +function generateSidebarSearchResult(result, info) { const preparedSlots = { color: result.data.color ?? null, @@ -676,7 +686,7 @@ function generateSidebarSearchResult(result) { return null; } - return generateSidebarSearchResultTemplate(preparedSlots); + return generateSidebarSearchResultTemplate(preparedSlots, info); } function getSearchResultImageSource(result) { @@ -689,7 +699,7 @@ function getSearchResultImageSource(result) { 'rebaseThumb')); } -function generateSidebarSearchResultTemplate(slots) { +function generateSidebarSearchResultTemplate(slots, info) { const link = document.createElement('a'); link.classList.add('wiki-search-result'); @@ -771,6 +781,24 @@ function generateSidebarSearchResultTemplate(slots) { saveSidebarSearchResultsScrollOffset(); }); + link.addEventListener('keydown', domEvent => { + if (domEvent.key === 'ArrowDown') { + const elem = link.nextElementSibling; + if (elem) { + domEvent.preventDefault(); + elem.focus(); + } + } else if (domEvent.key === 'ArrowUp') { + domEvent.preventDefault(); + const elem = link.previousElementSibling; + if (elem) { + elem.focus(); + } else { + info.searchInput.focus(); + } + } + }); + return link; } From d30e12b2018aa061ee31d85ec75562cfe50a7ffa Mon Sep 17 00:00:00 2001 From: leo60228 Date: Wed, 11 Sep 2024 18:19:50 -0400 Subject: [PATCH 3/7] address review --- src/static/css/site.css | 1 - src/static/js/client/sidebar-search.js | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/static/css/site.css b/src/static/css/site.css index 7c360fe44..37a290fe9 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -632,7 +632,6 @@ summary .group-name { position: relative; display: flex; padding: 4px 3px 4px 6px; - outline: none; } .wiki-search-result:hover { diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js index 433ba0088..7c4cd2d70 100644 --- a/src/static/js/client/sidebar-search.js +++ b/src/static/js/client/sidebar-search.js @@ -326,11 +326,11 @@ export function addPageListeners() { }); info.searchInput.addEventListener('keydown', domEvent => { - if (domEvent.key === 'ArrowDown' && info.searchInput.value.length === info.searchInput.selectionStart) { + if (domEvent.key === 'ArrowDown') { const elem = info.results?.firstChild; if (elem && !elem.classList.contains('wiki-search-no-results')) { domEvent.preventDefault(); - elem.focus(); + elem.focus({focusVisible: true}); } } }); @@ -786,13 +786,13 @@ function generateSidebarSearchResultTemplate(slots, info) { const elem = link.nextElementSibling; if (elem) { domEvent.preventDefault(); - elem.focus(); + elem.focus({focusVisible: true}); } } else if (domEvent.key === 'ArrowUp') { domEvent.preventDefault(); const elem = link.previousElementSibling; if (elem) { - elem.focus(); + elem.focus({focusVisible: true}); } else { info.searchInput.focus(); } From b547351019d8c7e46076c785ce1be9a62cd2d4c9 Mon Sep 17 00:00:00 2001 From: leo60228 Date: Wed, 11 Sep 2024 18:28:06 -0400 Subject: [PATCH 4/7] avoid replacing results after focusing --- src/static/js/client/sidebar-search.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js index 7c4cd2d70..13db34957 100644 --- a/src/static/js/client/sidebar-search.js +++ b/src/static/js/client/sidebar-search.js @@ -301,15 +301,20 @@ export function mutatePageContent() { export function addPageListeners() { if (!info.searchInput) return; + let prevValue = null; info.searchInput.addEventListener('change', _domEvent => { - if (info.searchInput.value) { + if (info.searchInput.value && info.searchInput.value !== prevValue) { activateSidebarSearch(info.searchInput.value); } + prevValue = info.searchInput.value; }); info.searchInput.addEventListener('input', _domEvent => { const {settings, state} = info; + if (prevValue === info.searchInput.value) return; + prevValue = info.searchInput.value; + if (!info.searchInput.value) { clearSidebarSearch(); return; From 8611061c38ec499ab68f1361e01162f8679eeeae Mon Sep 17 00:00:00 2001 From: leo60228 Date: Sat, 14 Sep 2024 17:44:20 -0400 Subject: [PATCH 5/7] address review 2 --- src/static/js/client/sidebar-search.js | 30 ++++++++++++++++++-------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js index 13db34957..2ead555cc 100644 --- a/src/static/js/client/sidebar-search.js +++ b/src/static/js/client/sidebar-search.js @@ -74,6 +74,8 @@ export const info = { stoppedScrollingTimeout: null, indexDownloadStatuses: Object.create(null), + + currentValue: null, }, session: { @@ -298,22 +300,32 @@ export function mutatePageContent() { info.searchBox.appendChild(info.endSearchLine); } +function trackSidebarSearchInputChanged() { + const {state} = info; + + const newValue = info.searchInput.value; + + if (newValue === state.currentValue) { + return false; + } else { + state.currentValue = newValue; + return !!newValue; + } +} + export function addPageListeners() { if (!info.searchInput) return; - let prevValue = null; info.searchInput.addEventListener('change', _domEvent => { - if (info.searchInput.value && info.searchInput.value !== prevValue) { + if (trackSidebarSearchInputChanged()) { activateSidebarSearch(info.searchInput.value); } - prevValue = info.searchInput.value; }); info.searchInput.addEventListener('input', _domEvent => { const {settings, state} = info; - if (prevValue === info.searchInput.value) return; - prevValue = info.searchInput.value; + trackSidebarSearchInputChanged(); if (!info.searchInput.value) { clearSidebarSearch(); @@ -604,7 +616,7 @@ function showSidebarSearchResults(results) { } for (const result of flatResults) { - const el = generateSidebarSearchResult(result, info); + const el = generateSidebarSearchResult(result); if (!el) continue; info.results.appendChild(el); @@ -620,7 +632,7 @@ function showSidebarSearchResults(results) { restoreSidebarSearchResultsScrollOffset(); } -function generateSidebarSearchResult(result, info) { +function generateSidebarSearchResult(result) { const preparedSlots = { color: result.data.color ?? null, @@ -691,7 +703,7 @@ function generateSidebarSearchResult(result, info) { return null; } - return generateSidebarSearchResultTemplate(preparedSlots, info); + return generateSidebarSearchResultTemplate(preparedSlots); } function getSearchResultImageSource(result) { @@ -704,7 +716,7 @@ function getSearchResultImageSource(result) { 'rebaseThumb')); } -function generateSidebarSearchResultTemplate(slots, info) { +function generateSidebarSearchResultTemplate(slots) { const link = document.createElement('a'); link.classList.add('wiki-search-result'); From b8148a6de443fd555be98825b70e7eec596a5bd9 Mon Sep 17 00:00:00 2001 From: leo60228 Date: Sat, 14 Sep 2024 18:04:18 -0400 Subject: [PATCH 6/7] address review 3 --- src/static/css/site.css | 3 ++- src/static/js/client/sidebar-search.js | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/static/css/site.css b/src/static/css/site.css index 37a290fe9..71a8861e8 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -657,7 +657,8 @@ summary .group-name { border-bottom: 1px solid var(--dim-color); } -.wiki-search-result:hover::before, .wiki-search-result:focus::before { +.wiki-search-result:hover::before, +.wiki-search-result:focus::before { display: block; background: var(--light-ghost-color); } diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js index 2ead555cc..77eb7b7eb 100644 --- a/src/static/js/client/sidebar-search.js +++ b/src/static/js/client/sidebar-search.js @@ -67,6 +67,8 @@ export const info = { tidiedSidebar: null, collapsedDetailsForTidiness: null, + currentValue: null, + workerStatus: null, searchStage: null, @@ -74,8 +76,6 @@ export const info = { stoppedScrollingTimeout: null, indexDownloadStatuses: Object.create(null), - - currentValue: null, }, session: { @@ -344,8 +344,8 @@ export function addPageListeners() { info.searchInput.addEventListener('keydown', domEvent => { if (domEvent.key === 'ArrowDown') { - const elem = info.results?.firstChild; - if (elem && !elem.classList.contains('wiki-search-no-results')) { + const elem = info.results.firstChild; + if (elem?.classList?.contains?.('wiki-search-result')) { domEvent.preventDefault(); elem.focus({focusVisible: true}); } From 166968431da6a87063fad65bdfa5aa0f932b4539 Mon Sep 17 00:00:00 2001 From: leo60228 Date: Sat, 14 Sep 2024 18:11:52 -0400 Subject: [PATCH 7/7] cleaner optional chaining --- src/static/js/client/sidebar-search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js index 77eb7b7eb..44ad8b86a 100644 --- a/src/static/js/client/sidebar-search.js +++ b/src/static/js/client/sidebar-search.js @@ -345,7 +345,7 @@ export function addPageListeners() { info.searchInput.addEventListener('keydown', domEvent => { if (domEvent.key === 'ArrowDown') { const elem = info.results.firstChild; - if (elem?.classList?.contains?.('wiki-search-result')) { + if (elem?.classList.contains('wiki-search-result')) { domEvent.preventDefault(); elem.focus({focusVisible: true}); }