Blog

Accessible Color Descriptions for Improved Color Pickers

By Devon Govett

Recently, we released a suite of color picker components in React Aria and React Spectrum. Since colors are inherently visual, ensuring these components are accessible to users with visual impairments presented a significant challenge. In this post, we'll discuss how we developed an algorithm that generates clear color descriptions for screen readers in multiple languages, while minimizing bundle size.

Creating a pointer-friendly submenu experience

By Reid Barber

We are excited to announce support for submenus in the latest release of React Spectrum and React Aria! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.

Date and Time Pickers for All

By Devon Govett

We are very excited to announce the release of the React Aria and React Spectrum date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes @internationalized/date, a brand new framework-agnostic library for locale-aware date and time manipulation.

Creating an accessible autocomplete experience

By Daniel Lu

After many months of research, development, and testing, we’re excited to announce that the React Spectrum ComboBox component and React Aria useComboBox hook are now available! In this post we'll take a deeper look into some of the challenges we faced when building an accessible and mobile friendly ComboBox.

How we internationalized our number field

By Rob Snow

Number fields are commonly used form components, but are frequently not a great user experience. They often lack support for advanced formatting, such as currency and unit values, and do not provide a localized experience for users around the world. In this post, we'll discuss how we approached building our number field component with support for formatting and internationalization in mind.

Building a Button Part 2: Hover Interactions

By Devon Govett

This is the second post in our three part series on building a button component. In the first post, we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. Today, we’ll cover hover interactions.

Building a Button Part 1: Press Events

By Devon Govett

Buttons seem like simple components at first, but they hide a lot of complexity under the hood. In the first part of this series, we'll look at how React Spectrum and React Aria implement adaptive press interactions that work across a wide variety of devices and interaction models.