FindingRow and ScoreBadge
Wyniki audytu: wynik ze 100 z jego oceną oraz ustalenia z poziomem ważności, regułą i miejscem, które można wybrać, aby wysłać razem. Wybierz go dla raportów bezpieczeństwa, dostępności albo SEO.
- FindingRow
- ScoreBadge
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: FindingRow and ScoreBadge
secret/generic-api-keysrc/lib/tokens.ts:14label#signup > form > input:nth-child(2)color-contrast.release-card > p.mutedmeta-descriptionhttps://docs.example.com/guides/a-very-long-guide-slug-for-the-autumn-releasemodern-image-formatspublic/hero.pngForm field has no label
#signup > form > input:nth-child(2)Press Enter on a finding to show it here. Select several and send them to an agent in one go.
Noc, podgląd: FindingRow and ScoreBadge
secret/generic-api-keysrc/lib/tokens.ts:14label#signup > form > input:nth-child(2)color-contrast.release-card > p.mutedmeta-descriptionhttps://docs.example.com/guides/a-very-long-guide-slug-for-the-autumn-releasemodern-image-formatspublic/hero.pngForm field has no label
#signup > form > input:nth-child(2)Press Enter on a finding to show it here. Select several and send them to an agent in one go.
Wysoki kontrast, podgląd: FindingRow and ScoreBadge
secret/generic-api-keysrc/lib/tokens.ts:14label#signup > form > input:nth-child(2)color-contrast.release-card > p.mutedmeta-descriptionhttps://docs.example.com/guides/a-very-long-guide-slug-for-the-autumn-releasemodern-image-formatspublic/hero.pngForm field has no label
#signup > form > input:nth-child(2)Press Enter on a finding to show it here. Select several and send them to an agent in one go.
UżycieLink do sekcji Użycie
import { FindingRow, ScoreBadge } from '@skribly/ui/ops'<ScoreBadge value={report.score} label={t('audit.score')} gradeLabels={{ good: t('grade.good'), fair: t('grade.fair'), poor: t('grade.poor') }} />
<List aria-label={t('audit.findings')} items={findings} selectionMode="multiple"
selectedKeys={picked} onSelectionChange={setPicked} onAction={showDetails}>
{(f) => <FindingRow id={f.id} severity={f.severity} severityLabel={t(`severity.${f.severity}`)}
title={f.title} rule={f.rule} location={f.file ?? f.target} selectLabel={t('common.select')} />}
</List>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ść
- Wynik jest miernikiem nazwanym przez label i odczytuje liczbę ze słowem oceny; ocena pokazuje się też jako ikona i słowo, więc kolor pierścienia nigdy nie jest jedyną wskazówką, a przy ograniczonym ruchu pierścień wypełnia się bez ruchu.
- Poziom ważności jest słowem ze znakiem, który rośnie wraz z poziomem.
- Każde ustalenie ma pole wyboru nazwane „Select” i jego tytułem; Spacja zaznacza, Enter pokazuje szczegóły.
- W wąskim wierszu miejsce przechodzi pod tytuł, a długie selektory się zawijają.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.