Accessible Web Components Library with Stencil.js and React

A federal authority needed further development of a modern, reusable web components library for accessible digital applications. The goal was to establish a technical foundation that would allow accessible user interfaces to be used consistently, scalably, and across different projects.

The focus was not on creating isolated components from scratch, but on supporting an existing library that needed to be further developed, technically strengthened, and accelerated in its delivery. Our contribution therefore centered on making the existing component base more productive, improving development workflows, and increasing the overall quality of delivery in day-to-day project work.

The main technological decision was to use Stencil.js, as this allows the components to remain as flexible and framework-independent as possible and suitable for use across different public-sector projects. It is publicly visible that the underlying library provides Stencil-based web components as packages and is built on a reusable component architecture.

Accessibility also played a central role. The components were not only developed according to established standards and best practices around W3C, WCAG, and semantic web standards, but were also reviewed and supported by an internal accessibility team. This ensured that accessibility was not only considered from a technical perspective, but systematically validated as well.

In addition to the component work itself, internal processes were also modernized. This included optimizing build and release workflows, maintaining the public documentation, and improving development and delivery processes around CI/CD. Our contribution therefore went well beyond implementation work and accelerated the further development of the library on multiple levels.