SearchResultGroup and SearchResultItem

Wiersze i sekcje dowolnej listy wyników, wewnątrz GlobalSearch albo we własnym ListBox, na przykład na pełnej stronie wyników. Pozycja z href jest linkiem.

SearchResultGroup
SearchResultItem

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: SearchResultGroup and SearchResultItem

Noc, podgląd: SearchResultGroup and SearchResultItem

Wysoki kontrast, podgląd: SearchResultGroup and SearchResultItem

UżycieLink do sekcji Użycie

tsx

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

tsx

<ListBox aria-label="Results">
  <SearchResultGroup id="issues" title="Issues" count={14} countLabel="14 issues">
    <SearchResultItem id="SK-12" href="/issues/SK-12" textValue="Draft lost" title="Draft lost" description="Website" meta="SK-12" />
  </SearchResultGroup>
</ListBox>

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ść

Każda grupa ma etykietę z tytułu; każda pozycja jest nazwana całym swoim widocznym tekstem, tytułem na początku, aby sterowanie głosem mogło powiedzieć to, co widzi.
Wiersze są wyraźnie wyższe niż rozmiar celu 24 px, także w zwartej gęstości.
Wiersz z fokusem lub najechany zmienia tło, a w trybie wymuszonych kolorów wiersz z fokusem dostaje obwódkę Highlight.
Długie tytuły są obcinane do jednej linii, ale zachowują pełną nazwę.

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