Briley Creative LLC — Example Audit Report

Fieldstone Analytics

Design System Audit — Minimal findings scenario

Client: Fieldstone Analytics
Product: Fieldstone Data Platform
Audit dates: February 3–7, 2026
Report date: February 10, 2026
Prepared by: Joshua Briley, Briley Creative LLC
WCAG target: WCAG 2.1 Level AA

Findings

0 Critical0 High2 Medium2 Low

1. Executive summary

Fieldstone's design system is in strong condition. The component library is well-structured, token usage is consistent across all reviewed components, and Storybook coverage is thorough and current. Accessibility compliance is solid, with only minor gaps in ARIA labeling for two icon-only controls.

The system reflects a mature, actively maintained codebase. The four findings in this report are low-stakes items that represent normal incremental improvement work, not structural problems.

Critical: 0
High: 0
Medium: 2
Low: 2

2. What is working well

Token coverage is comprehensive. Every component reviewed references the token system for color, spacing, and typography. No hard-coded values were found in the components sampled.
Storybook is current and thorough. Every component has stories for all major variants and interactive states, and the documented behavior matches the live product.
Keyboard navigation is clean throughout the application. Focus order is logical, focus indicators are visible in all three browsers tested, and no keyboard traps were found.
Component naming in both Figma and the repository is consistent and predictable. A new developer could orient themselves in the library without asking for help.

3. Findings

3a — Accessibility

ACC-01

Icon-only toolbar buttons lack accessible labels

Medium

Location: DataTable toolbar — actions/DataTableToolbar.tsx
Description: The Export, Filter, and Column Visibility buttons in the DataTable toolbar render as icon-only controls with no aria-label or visually hidden text. VoiceOver announces these as unlabeled buttons. Keyboard users navigating the toolbar cannot determine the purpose of each control without activating it.
Remediation: Add aria-label attributes to each icon button: aria-label="Export data", aria-label="Filter rows", aria-label="Show or hide columns". Alternatively, add a visually hidden <span> inside each button using the existing sr-only utility class.

3b — Component consistency

CON-01

Card component border radius inconsistent between Figma and live product

Medium

Location: Card component — Figma library page 2 vs. /dashboard and /reports
Description: The Card component in Figma specifies a border radius of 8px. The rendered card in the live product applies 6px, matching the border-radius-md token. The Figma component has not been updated to reflect the token value adopted during the Q3 2025 token consolidation. This creates a minor but consistent mismatch during design handoff.
Remediation: Update the Figma Card component's corner radius to 6px to match the border-radius-md token (--radius-md: 6px). No code change required.

3c — Documentation

DOC-01

Toast component does not document the auto-dismiss timing behavior

Low

Location: Toast — Storybook docs tab
Description: The Toast component auto-dismisses after 5 seconds by default and accepts a duration prop for overrides. Neither the default value nor the prop is documented in Storybook. A developer implementing toasts for the first time would discover this only by reading the source or testing in the browser.
Remediation: Add a props table to the Toast Storybook story documenting the duration prop, its type (number, milliseconds), its default value (5000), and a note that passing 0 disables auto-dismiss.

3d — Handoff process

HND-01

No versioning or changelog process exists for the component library

Low

Location: github.com/fieldstone/ui — package.json, repository root
Description: The component library package version has not been incremented in six months despite several component updates merged during that period. There is no CHANGELOG.md or release notes process. Consuming application teams have no way to know what changed between the version they are running and the current main branch without reading git history.
Remediation: Adopt a changelog convention, such as the Keep a Changelog format. Increment the npm package version on every merge to main using semantic versioning: patch for fixes, minor for new components or non-breaking changes, major for breaking changes. Consider automating this with a tool such as semantic-release or changesets.

4. Remediation roadmap

Remediation roadmap: severity, finding ID, description, and recommended timeline for each finding
Severity	ID	Finding	Timeline
Medium	ACC-01	Icon-only toolbar buttons lack accessible labels	Next sprint
Medium	CON-01	Card border radius mismatch between Figma and live product	Next 1–2 sprints
Low	DOC-01	Toast auto-dismiss behavior undocumented	Backlog
Low	HND-01	No versioning or changelog process for the component library	Backlog

5. Scope and methodology

Inputs reviewed

FigmaFieldstone Design System v4 (shared library)
Repositorygithub.com/fieldstone/ui — /packages/components
Storybookstorybook.fieldstone.internal
Live productapp.fieldstone.io (production)

Accessibility testing tools and browsers

axe DevToolsChrome, Firefox, Edge
axe LinterComponent source
VoiceOvermacOS, Chrome and Safari
Keyboard navChrome, Firefox, Edge

Automated tool coverage

Automated tools detect approximately 30 to 40 percent of real accessibility issues. All findings reflect both automated scan results and manual review. ACC-01 was identified through VoiceOver testing and confirmed manually.

What comes after an audit?

Depending on what your system needs most, the next engagement is typically one of these.

Component Library Starter20 accessible, documented components built to your design tokens.Design-to-Code WorkflowFix the handoff process once so your team stops losing time to it every sprint.

Prefer ongoing oversight? Ask me about a monthly retainer covering accessibility review, token checks, and ad hoc guidance for your team.

This is an example report. All company names, product names, and repository paths are fictional. Any resemblance to real businesses is coincidental and unintended.

Back to design system audits