GlobalSearch

Pole wyszukiwania w górnym pasku. Aplikacja filtruje po swojej stronie, często na serwerze, i przekazuje pogrupowane wyniki; Enter bez podświetlonej pozycji wysyła zapytanie na pełną stronę wyników.

GlobalSearch
SearchResultGroup
SearchResultItem
Highlight

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: GlobalSearch

Try “board”, “sk-3” or “pri”.

Noc, podgląd: GlobalSearch

Try “board”, “sk-3” or “pri”.

Wysoki kontrast, podgląd: GlobalSearch

Try “board”, “sk-3” or “pri”.

UżycieLink do sekcji Użycie

tsx

import { GlobalSearch, SearchResultGroup, SearchResultItem, Highlight } from '@skribly/ui/search'

tsx

<GlobalSearch label="Search" value={q} onChange={setQ} onSubmit={openResults}
  shortcutKey="/" shortcutHint="/" emptyLabel="No results" resultsLabel={`${count} results`}>
  <SearchResultGroup id="issues" title="Issues">
    <SearchResultItem id="SK-12" textValue="Draft lost" title="Draft lost" href="/issues/SK-12" />
  </SearchResultGroup>
</GlobalSearch>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Combobox wewnątrz landmarku wyszukiwania z ukrytą etykietą.
Klawisz / ustawia na nim fokus z dowolnego miejsca, chyba że fokus ma inne pole, a aria-keyshortcuts informuje czytniki ekranu.
Strzałka w górę i w dół przechodzi po wynikach, a fokus zostaje w polu; Enter otwiera podświetlony wynik; Escape zamyka listę, a potem ją czyści.
Grupy mają etykiety z tytułów.
Liczba wyników, ładowanie i błędy są odczytywane z regionu na żywo typu polite, a błąd ma ikonę razem z tekstem.
Lista ma szerokość pola i nigdy nie wychodzi poza wąski ekran.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.