Accessibility

Overview

All MetricUI components include:

• forwardRef — attach refs to any component root
• id and data-testid props on every component
• Keyboard-accessible interactive elements
• ARIA labels for screen readers
• prefers-reduced-motion support
• Global focus-visible ring styling
• Colorblind-safe default chart palette

Keyboard Navigation

All interactive elements (drill-down links, copy buttons, toggleable legend items, pagination controls, sortable table headers) are reachable via Tab and activatable with Enter or Space.

// KpiCard with keyboard-accessible drill-down
<KpiCard
  title="Revenue"
  value={142300}
  drillDown={{ label: "View details", onClick: handleDrill }}
  copyable // Copy button is keyboard accessible
/>

// Legend items toggle on Enter/Space
<AreaChart data={data} legend={{ toggleable: true }} />

ARIA Labels & Roles

Components use semantic ARIA attributes. Toggle switches use role="switch" with aria-checked. Description popovers use proper trigger/content pairing. Error boundaries include data-component and data-error attributes.

Reduced Motion

MetricUI respects the prefers-reduced-motion media query. When enabled, chart animations, count-up effects, and spring transitions are automatically disabled.

// You can also disable animation globally
<MetricProvider animate={false}>

// Or per-component
<KpiCard animate={false} title="Revenue" value={42000} />

Color Blind Safe

The default chart color palette (8 colors) is designed to be distinguishable for the most common forms of color blindness. The palette uses a mix of hue, saturation, and lightness differences — not just hue alone.

Focus Management

MetricUI includes a global focus-visible ring style. Interactive elements show a visible focus indicator only when navigating via keyboard — not on mouse click.

Testing Attributes

Every component accepts id and data-testid props for integration with testing frameworks.

<KpiCard
  id="revenue-card"
  data-testid="revenue-kpi"
  title="Revenue"
  value={42000}
/>

// In your test:
screen.getByTestId("revenue-kpi")