GitHub

Progress Indicator

Block
Visual progress indicator for multi-step assessments

Installation

pnpm add @corew500/feature-assessment

Usage

import { ProgressIndicator } from "@corew500/feature-assessment"

<ProgressIndicator>Content</ProgressIndicator>

API Reference

Props

PropTypeDefaultDescription
styleenumStyle applied to the element, or a function that returns a style object based on the component’s state.
classNameenumCSS class applied to the element, or a function that returns a class based on the component’s state.
renderenumAllows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Accessibility

Screen Readers

  • - Uses `role="progressbar"` automatically
  • Sets `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
  • Indeterminate state (value=null) sets `aria-busy="true"`
  • ProgressLabel is associated with the progress bar via ARIA
  • Screen readers announce progress updates

Localization

Translatable Content

  • - ProgressLabel children should be pre-translated

Locale-Specific Formatting

  • ProgressValue format can be customized via `format` function