Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb36ca0a

Browse files
authored
docs: Fixing Focus Order by Rearranging Element Sequence (#19241)
* chore: Fixing Focus Order by Rearranging Element Sequence* hide results on focus
1 parentd122c8a commitb36ca0a

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
<pclass="visually-hidden"id="search-hint">Results will be shown and updated as you type.</p>
1010
<divclass="search__inner-input-wrapper">
1111
<inputtype="search"id="search"class="search__input"autocomplete="off"aria-describedby="search-hint"pattern="\S+">
12+
<divid="search-results"class="search-results"></div>
13+
<buttonclass="search__clear-btn"id="search__clear-btn"hidden>
14+
<spanclass="visually-hidden">Clear search</span>
15+
<svgwidth="12"height="12"viewBox="0 0 12 12"fill="none"aria-hidden="true"focusable="false">
16+
<pathd="M9 3L3 9M3 3L9 9"stroke="currentColor"stroke-linecap="round"stroke-linejoin="round"/>
17+
</svg>
18+
</button>
1219
<aclass="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
<divclass="search__powered-by">
16-
<spanclass="powered-by-text">Powered by</span>
23+
<spanclass="powered_by-text">Powered by</span>
1724
<svgwidth="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
<pathclass="algolia-logo"
@@ -44,14 +51,9 @@
4451
</svg>
4552
</div>
4653
</a>
47-
<buttonclass="search__clear-btn"id="search__clear-btn"hidden>
48-
<spanclass="visually-hidden">Clear search</span>
49-
<svgwidth="12"height="12"viewBox="0 0 12 12"fill="none"aria-hidden="true"focusable="false">
50-
<pathd="M9 3L3 9M3 3L9 9"stroke="currentColor"stroke-linecap="round"stroke-linejoin="round"/>
51-
</svg>
52-
</button>
54+
5355
</div>
5456
</div>
5557
<divid="search-results-announcement"class="visually-hidden"aria-live="polite"aria-atomic="true"></div>
56-
<divid="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
constresultsLiveRegion=document.querySelector('#search-results-announcement');
2323
constsearchInput=document.querySelector('#search');
2424
constsearchClearBtn=document.querySelector('#search__clear-btn');
25+
constpoweredByLink=document.querySelector('.search_powered-by-wrapper');
2526
letactiveIndex=-1;
2627
letsearchQuery;
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
constsearchResults=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:10px6px00;
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)
[8]ページ先頭
©2009-2025 Movatter.jp