shadcn.io is not affiliated with official shadcn/ui
Accessibility Score Changelog Block for Ark UI
An accessibility scorecard split by a divider: a ring with the chosen release's score and its change since the release before, and Tabs for four releases over a table of audit items.
Installation
Overview
An accessibility scorecard for React with Ark UI, written for Auditlight, a fictional audit tool. A divider splits the block with the figure on the start side: the chosen release's score, large, in a Circular Progress ring with its change since the release before it. At the end sit the header and Tabs for four releases (v4.2 to v3.9) over a table of that audit's items: the WCAG 2.2 criterion in mono, the issue, a severity word and a status word, Fixed or Open. The score is not typed in. It is 100 minus 10 for each open critical item, 6 for serious, 3 for moderate and 1 for minor, worked out from the table, and the change is the difference from the release below. It's built from Circular Progress, Tabs, Guides and a native table. The audits are example data.
FAQ
How is the score worked out?
scoreOf starts at 100 and subtracts each open item's cost: critical 10, serious 6, moderate 3, minor 1. Fixed items cost nothing. The change shown is the score minus the score of the release below, and the oldest release says it is the first audit in the log. Edit RELEASES and the figure, the text and the sentence all follow.
What happens when I pick a release?
The ring, the score, the change and the table swap together, and a polite line says the new score. Every table is also present unseen in the same cell, so the frame's height never changes. Arrow keys move between the tabs.
Is this a conformance score?
No. It is a simple count of open items by severity for an example product, not a measure defined by WCAG, and the block claims no conformance level.