shadcn.io is not affiliated with official shadcn/ui
Accordion Accessibility Pledge About Block for React
An accessibility pledge for a checker product: an accordion of the four principles with a conformance word and how each is met, beside an audit history rail of four audits.
Installation
Overview
An accessibility pledge for React with Base UI, written for Inclusio, a fictional accessibility checker. A split with a divider: at the start, a header and an accordion of the four principles, Perceivable, Operable, Understandable and Robust. Each row has a drawn initial, the principle, one conformance word in a badge ("Supports", "Partially supports") and what it asks in a line; it opens to how Inclusio meets it, and the one partial row names its known gap and when it is due. One row is open at a time and the first is open on load. At the end, an audit history: four audits as a numbered rail, newest first, each with what was found and fixed. On a phone the history sits under the accordion. It's built from Accordion, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For an about page or a trust page. The conformance words and the audits are example data, not a real statement.
FAQ
How do I change the principles and the audits?
PRINCIPLES holds each principle with its conformance word, what it asks and how it is met; AUDITS holds the history, newest first. The first audit gets the filled node. Write a gap as a plain line in a principle's list, as the example does, rather than hiding it. The words and numbers here are example data.
Which conformance words should I use?
The example uses the words an accessibility report usually does: Supports, Partially supports and Does not support. Use the ones your own review gives you, and say what is missing for any partial row.
How does the keyboard work?
Tab moves between the four rows; Enter or Space opens and closes one. The arrow keys do not move between rows on this library, so Tab does the moving. Opening a row closes the one that was open.
What happens on a phone?
The audit history drops under the accordion, behind a rule from rail to rail, and the badge wraps under the principle's name when the row is narrow.
Related
- Pro
Status Grouped Compliance Badges About
Security and platformA compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.
- Pro
Domain Tabs Security Practices About
Security and platformSecurity practices for a password manager in four domain tabs, each a list of controls marked Done or Rolling out, under a security score worked out from the controls.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
Vertical Tabs Data Privacy About
Security and platformA data-flow explainer for a backup service: vertical tabs for what we collect, where it lives and your rights, each panel a four-column table, with a ghost link to request your data.
- Pro
Accessibility Statement Footer
Trust and complianceA footer for a lesson reader with a conformance statement at the start (a drawn seal, the standard, the level and the review cadence, and a report-a-barrier link) and three link columns at the end.