Accessible components with Reakit

The most common thing in a React application is the reusability of components. We have been using and reusing the same components in different parts of an application and this is one of the most fantastic features that we have in React applications.

Having reusability in mind we can build amazing things, we can create a whole design system that can be used by different teams in different projects that follow the same standards and principles. As a result, we can notice that the productivity will increase because now there’s no need to create a specific component from scratch if there’s one available in the design system.

Since React was released and adopted by the community as the most used JavaScript library to create web applications, we can notice that the number of design systems, component libraries, and UI libraries has increased. We have a lot of different options to build React applications and we can choose different design systems or component libraries to do that.

Reakit is one of these libraries, but it came with an important concept in mind — accessibility. Now more than ever, accessibility is an important topic and should be treated as a priority by every developer that wants their application to be available to everyone.

Before we learn about the Reakit component library and what makes it so special, let’s learn about accessibility and why it’s so important in the modern web.

Web content accessibility guidelines (WCAG)

Accessibility has not been treated as a top priority by many companies and developers, but it has an important role in modern applications in order to create more accessible applications for everyone.

Accessibility is so important for the web that W3C created a standard guideline for it called the Web Content Accessibility Guideline (WCAG). It’s a set of standards and principles for web content accessibility to build and provide more accessible applications for different people.

To notice the importance of accessibility, according to the World Bank:

One billion people, or 15% of the world’s population, experience some form of disability, and disability prevalence is higher for developing countries. One-fifth of the estimated global total, or between 110 million and 190 million people, experience significant disabilities. Persons with disabilities are more likely to experience adverse socioeconomic outcomes than persons without disabilities, such as less education, poorer health outcomes, lower levels of employment, and higher poverty rates.

Providing an application that everyone can access without problems is very important. This is where Reakit can help us to create more accessible, composable, and fast applications in React.

Reakit

Reakit is a low-level component library that helps us to create more accessible React components, libraries, design systems, and applications. Created by Diego Haz, Reakit was released under the MIT license and it’s gaining more adopters who want to build more accessible React applications.

Reakit provides a variety of accessible, composable, and customizable components that follow the WAI-ARIA standards. It means that we can have a lot of accessible components that are used a lot in many applications such as Button, Checkbox, Input, etc.

One of the nicest things about Reakit is that it already manages to focus on keyboard integrations out of the box, so there’s no need to integrate it into your components. It also comes with no default CSS style, so you can bring your own CSS and use any CSS solution you want to.

Accessibility

We know that accessibility is very important, and we know that working with a component library that has fully accessible components can make a huge difference in an application.

Reakit follows strictly the WAI-ARIA standards, it means that all components are designed and developed with accessibility in mind, providing real accessible components and improving the user experience.

Reakit also comes with focus and keyboard integrations out of the box, for example:

• A Button should respond when you press the Enter keyboard
• You can navigate easily in a Tab component just using the arrow keys from the keyboard

Composable

React is a very good solution to work with a variety of different components because it allows us to reuse components in different parts of our application easily.

Reakit comes with composition in mind to make our job easier to build different components. We can use the as prop to compose components and change the underlying element of a Reakit component.

Imagine that we have a Radio component and we want to compose this component as a Button, we can do that very easily by just passing the as prop as a Button.

import { useRadioState, Radio, RadioGroup, Button } from "reakit";

const App = () => {
  const radio = useRadioState();
  return (
    <div>
      <h1>App</h1>
      <RadioGroup {...radio} aria-label="cars" as={Button}>
        <label>
          <Radio {...radio} value="tesla" /> Tesla
        </label>
      </RadioGroup>
    </div>
  );
}

export default App;

Customizable

Reakit does not come with any default CSS, making the components very customizable and easy to style.

Importing a simple Button from Reakit, you will notice that there’s no default CSS in it:

import { Button } from "reakit";

const MyButton = () => (
  <Button>Reakit Button</Button>
);

export default MyButton;

We can integrate it very easily with any CSS solution we want, for example, a CSS-in-JS library:

import styled from 'styled-components';
import { Button } from "reakit";

const StyledButton = styled(Button)`
  width: 100px;
  height: 30px;
  background: turquoise;
  border-radius: 5px;
  color: white;
`;

const MyButton = () => (
  <StyledButton>Reakit Button</StyledButton>
);

export default MyButton;

Size

When it comes to matters of bundle size, Reakit has a very nice bundle size and it’s not a heavy library compared to other React component libraries that we have available today.

Reakit has around 31 kB and each component has an average size of 1 kB. Compared to other component libraries such as Material UI and Ant, Reakit is a very lightweight solution.

Getting started

Now that we know about the features that Reakit has, let’s build something from scratch. We are going to build a todo app with just a few accessible components.

Before we get started, we need to make sure that we have react and react-dom installed:

yarn add react react-dom

Now, we can install reakit:

yarn add reakit

We are going to import two components from Reakit, Input and Button. In this example, we are going to need just these two components, but in a real-world application, Reakit provides you a lot of different components to help you achieve your result.

Let’s create a new create-react-app application:

npx create-react-app reakit-example --template typescript

Inside our application, on our App.ts, we are going to create our todo app using Reakit. Let’s import both Input and Button and create our state logic:

import React, { useState } from 'react';
import { Input, Button } from "reakit";

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [text, setText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text) return;
    addTask(text);
    setText("");
  };

  const addTask = (text) => {
    const newTasks = [...tasks, { text }];
    setTasks(newTasks);
  };

  const deleteTask = (index) => {
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };
};

export default App;

Reakit has some components that are in an experimental mode such as Form, FormLabel, and FormInput. We are not going to use these components in this example because they might introduce breaking changes or even be removed in a future version.

Now, we are going to use both Input and Button from Reakit. This is what our todo app will look like:

import React, { useState } from 'react';
import { Input, Button } from "reakit";

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [text, setText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text) return;
    addTask(text);
    setText("");
  };

  const addTask = (text) => {
    const newTasks = [...tasks, { text }];
    setTasks(newTasks);
  };

  const deleteTask = (index) => {
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };

  return (
    <form onSubmit={handleSubmit}>
    <Input
      placeholder="Add a task"
      value={text}
      onChange={e => setText(e.target.value)}
    />

    <Button onClick={handleSubmit}>Add</Button>
    {tasks.map((task: any, index: number) => (
      <div key={index} onClick={() => deleteTask(index)}>
        <h1>{task.text}</h1>
      </div>
    ))}
   </form>
  )
};
export default App;

A nice feature about Reakit is that when you are using the Button component for example and you want to pass it as disabled, the aria-disabled will already be set to true.

Especially for those who want to create a new design system and want to create accessible components, Reakit is a very good option. You can create a very nice and robust design system using Reakit under the hood for some components and still have decent results, especially with accessibility.

Conclusion

Building accessible applications is not an easy task and it demands hard work, today we have a few component libraries that can help us achieve a nice result and provide an accessible application for everyone. Reakit is a component library that can help us do that, by providing us a variety of components with accessibility in mind and without any default CSS.