PT
@jtmdias/react-a11y-tools cover image

@jtmdias/react-a11y-tools

An open-source library that packages focus management, keyboard navigation, announcements and semantic structure into reusable React components and hooks.

Project Information

Tech stack

  • react
  • typescript
  • cypress-component-testing
  • vite
  • docusaurus

Context

I created React A11y Tools while working at Feedzai, where teams build software for financial institutions and accessibility cannot be treated as a finishing touch. Engineers generally wanted to do the right thing, but complex interaction patterns require specialist knowledge and time that a delivery team may not always have.

The same challenges kept returning: managing focus in dialogs, implementing roving tabindex, announcing route changes and preserving a meaningful heading structure. Different teams solved them differently, and under pressure some patterns risked being simplified or skipped.

Process and decisions

I turned those recurring solutions into a dedicated library of React components and hooks. The primitives provide behaviour for focus management, keyboard navigation, announcements, skip links and semantic headings while leaving visual design to the consuming product or design system.

The library was designed around WCAG 2.1 guidance and the WAI-ARIA Authoring Practices. Cypress component and integration tests exercise behaviour in a real browser, including keyboard interaction and automated accessibility checks.

Adoption depended on more than a reliable API. I built interactive Docusaurus documentation with live examples and code samples so engineers could understand both how to use a primitive and which interaction problem it solved.

Result

The library was adopted quickly inside Feedzai and became an accessibility foundation for Escudo, its internal design system. Reusing the same patterns gave product teams a more consistent starting point and kept difficult interaction behaviour out of one-off implementations.

I was the library’s sole creator and maintainer at Feedzai. I now maintain the public @jtmdias/react-a11y-tools fork and use it regularly across personal and professional projects. The current package remains available on npm with primitives for route and message announcements, focus management, roving tabindex, keyboard-only testing, skip links, semantic headings and tabbable-element discovery.

Learning

Accessibility scales more effectively when the difficult behaviour is reusable, tested and documented, while teams still retain responsibility for how it works in the finished product.

Back to Projects