10000 docs: Fixing Focus Order by Rearranging Element Sequence (#19241) · eslint/eslint@b36ca0a · GitHub
[go: up one dir, main page]
Skip to content

Commit b36ca0a

Browse files
amareshsmamareshsm
authored
docs: Fixing Focus Order by Rearranging Element Sequence (#19241)
* chore: Fixing Focus Order by Rearranging Element Sequence * hide results on focus
1 parent d122c8a commit b36ca0a

File tree

3 files changed

+18
-9
lines changed

3 files changed

+18
-9
lines changed

‎docs/src/_includes/components/search.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,18 @@
99
<p class="visually-hidden" id="search-hint">Results will be shown and updated as you type.</p>
1010
<div class="search__inner-input-wrapper">
1111
<input type="search" id="search" class="search__input" autocomplete="off" aria-describedby="search-hint" pattern="\S+">
12+
<div id="search-results" class="search-results"></div>
13+
<button class="search__clear-btn" id="search__clear-btn" hidden>
14+
<span class="visually-hidden">Clear search</span>
15+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false">
16+
<path d="M9 3L3 9M3 3L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
17+
</svg>
18+
</button>
1219
<a class="search_powered-by-wrapper"
1320
href="https://www.algolia.com/developers/?utm_source=eslint&amp;utm_medium=referral&amp;utm_content=powered_by&amp;utm_campaign=docsearch" target="_blank"
1421
rel="noopener noreferrer">
1522
<div class="search__powered-by">
16-
<span class="powered-by-text">Powered by</span>
23+
<span class="powered_by-text">Powered by</span>
1724
<svg width="77" height="19" aria-label="Algolia" role="img" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
1825
viewBox="0 0 2196.2 500">
1926
<path class="algolia-logo"
@@ -44,14 +51,9 @@
4451
</svg>
4552
</div>
4653
</a>
47-
<button class="search__clear-btn" id="search__clear-btn" hidden>
48-
<span class="visually-hidden">Clear search</span>
49-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false">
50-
<path d="M9 3L3 9M3 3L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
51-
</svg>
52-
</button>
54+
5355
</div>
5456
</div>
5557
<div id="search-results-announcement" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
56-
<div id="search-results" class="search-results"></div>
58+
5759
</div>

‎docs/src/assets/js/search.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const resultsElement = document.querySelector('#search-results');
2222
const resultsLiveRegion = document.querySelector('#search-results-announcement');
2323
const searchInput = document.querySelector('#search');
2424
const searchClearBtn = document.querySelector('#search__clear-btn');
25+
const poweredByLink = document.querySelector('.search_powered-by-wrapper');
2526
let activeIndex = -1;
2627
let searchQuery;
2728

@@ -210,6 +211,12 @@ if (searchClearBtn)
210211
searchClearBtn.setAttribute('hidden', '');
211212
});
212213

214+
if (poweredByLink) {
215+
poweredByLink.addEventListener('focus', function () {
216+
clearSearchResults();
217+
});
218+
}
219+
213220
document.addEventListener('keydown', function (e) {
214221

215222
const searchResults = Array.from(document.querySelectorAll('.search-results__item'));

‎docs/src/assets/scss/components/search.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
padding: 10px 6px 0 0;
7575
align-items: center;
7676

77-
.powered-by-text {
77+
.powered_by-text {
7878
color: var(--body-text-color);
7979
margin-right: 5px;
8080
margin-top: -2px;

0 commit comments

Comments
 (0)
0