Building an accessible and customizable datepicker component using React and React Aria

Abstract

This thesis documents the design and implementation of an accessible, customizable DatePicker component using React and React Aria. The aim was to create a DatePicker that complies with accessibility standards, integrates into the company’s component library, and allows full control over design and behavior without reliance on external libraries. The theoretical framework focused on React and React Aria libraries, accessibility standards such as WCAG 2.1, and modern component-driven development practices. React was introduced as the foundation for building interactive user interfaces, while React Aria was presented as a tool for implementing accessibility behaviors without visual styling constraints. The role of supporting tools such as Storybook, GitHub, and Figma in the development process was also discussed.

The DatePicker was built using React Aria hooks, including useDatePicker, useDateField, useCalendar, and useCalendarCell. The components were developed and tested in isolation using Storybook and integrated into the company’s monorepo structure. Manual testing was combined with automated accessibility validation to ensure the component met usability and accessibility requirements. The result was a functional and accessible DatePicker component that aligns with the company’s design principles and future token-based styling. The work demonstrated the complexity of building fully accessible UI components from low-level hooks and highlighted the importance of careful structure, state management, and design-system alignment. Future improvements were identified, particularly related to mobile optimization, localization issues, and final design token integration.