kopia lustrzana https://github.com/shoelace-style/shoelace
improve docs search a11y
rodzic
ae0eddfb25
commit
afa715c860
|
@ -1,6 +1,7 @@
|
||||||
{
|
{
|
||||||
"version": "0.2",
|
"version": "0.2",
|
||||||
"words": [
|
"words": [
|
||||||
|
"activedescendant",
|
||||||
"allowfullscreen",
|
"allowfullscreen",
|
||||||
"animationend",
|
"animationend",
|
||||||
"Animista",
|
"Animista",
|
||||||
|
@ -63,6 +64,7 @@
|
||||||
"labelledby",
|
"labelledby",
|
||||||
"Laravel",
|
"Laravel",
|
||||||
"LaViska",
|
"LaViska",
|
||||||
|
"listbox",
|
||||||
"litelement",
|
"litelement",
|
||||||
"lowercasing",
|
"lowercasing",
|
||||||
"Lucide",
|
"Lucide",
|
||||||
|
|
|
@ -52,12 +52,21 @@
|
||||||
siteSearch.hidden = true;
|
siteSearch.hidden = true;
|
||||||
siteSearch.innerHTML = `
|
siteSearch.innerHTML = `
|
||||||
<div class="site-search__overlay"></div>
|
<div class="site-search__overlay"></div>
|
||||||
<div class="site-search__panel">
|
<div
|
||||||
|
id="site-search-panel"
|
||||||
|
class="site-search__panel"
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-owns="site-search-results"
|
||||||
|
aria-activedescendant=""
|
||||||
|
>
|
||||||
<header class="site-search__header">
|
<header class="site-search__header">
|
||||||
<sl-input
|
<sl-input
|
||||||
class="site-search__input"
|
class="site-search__input"
|
||||||
type="search"
|
type="search"
|
||||||
placeholder="Search this site"
|
placeholder="Search this site"
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-controls="site-search-results"
|
||||||
size="large"
|
size="large"
|
||||||
clearable
|
clearable
|
||||||
>
|
>
|
||||||
|
@ -65,7 +74,13 @@
|
||||||
</sl-input>
|
</sl-input>
|
||||||
</header>
|
</header>
|
||||||
<div class="site-search__body">
|
<div class="site-search__body">
|
||||||
<ul class="site-search__results"></ul>
|
<ul
|
||||||
|
id="site-search-results"
|
||||||
|
class="site-search__results"
|
||||||
|
role="listbox"
|
||||||
|
aria-labelledby="site-search-panel"
|
||||||
|
>
|
||||||
|
</ul>
|
||||||
<div class="site-search__empty">No results found.</div>
|
<div class="site-search__empty">No results found.</div>
|
||||||
</div>
|
</div>
|
||||||
<footer class="site-search__footer">
|
<footer class="site-search__footer">
|
||||||
|
@ -100,7 +115,7 @@
|
||||||
isShowing = true;
|
isShowing = true;
|
||||||
document.body.classList.add('site-search-visible');
|
document.body.classList.add('site-search-visible');
|
||||||
siteSearch.hidden = false;
|
siteSearch.hidden = false;
|
||||||
input.focus();
|
requestAnimationFrame(() => input.focus());
|
||||||
updateResults();
|
updateResults();
|
||||||
|
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
|
@ -205,6 +220,9 @@
|
||||||
// Update the selected item
|
// Update the selected item
|
||||||
items.forEach(item => {
|
items.forEach(item => {
|
||||||
if (item === nextEl) {
|
if (item === nextEl) {
|
||||||
|
const a = nextEl.querySelector('a');
|
||||||
|
panel.setAttribute('aria-activedescendant', a.id);
|
||||||
|
|
||||||
item.setAttribute('aria-selected', 'true');
|
item.setAttribute('aria-selected', 'true');
|
||||||
nextEl.scrollIntoView({ block: 'nearest' });
|
nextEl.scrollIntoView({ block: 'nearest' });
|
||||||
} else {
|
} else {
|
||||||
|
@ -237,6 +255,9 @@
|
||||||
const a = document.createElement('a');
|
const a = document.createElement('a');
|
||||||
let icon = 'file-text';
|
let icon = 'file-text';
|
||||||
|
|
||||||
|
a.setAttribute('role', 'option');
|
||||||
|
a.setAttribute('id', `search-result-item-${match.ref}`);
|
||||||
|
|
||||||
if (page.url.includes('getting-started/')) {
|
if (page.url.includes('getting-started/')) {
|
||||||
icon = 'lightbulb';
|
icon = 'lightbulb';
|
||||||
}
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue