FindingRow and ScoreBadge

Audit results: a score out of 100 with its grade, and findings with severity, rule and place that can be picked to send on together. Pick it for security, accessibility or SEO reports.

FindingRow
ScoreBadge

UsageLink to the section Usage

tsx

import { FindingRow, ScoreBadge } from '@skribly/ui/ops'

tsx

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

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The score is a meter named by its label and reads the number with the grade word; the grade also shows as an icon and a word, so the ring colour is never the only clue, and it fills without motion under reduced motion.
Severity is a word with a glyph that climbs with the level.
Each finding has a checkbox named "Select" plus its title; Space selects, Enter shows the details.
On a narrow row the place moves under the title and long selectors wrap.

This demo runs through axe in all three themes on every test run. See what the tests check.