Creación de aplicaciones React accesibles con componentes React Aria

React Aria Components es una biblioteca que contiene una colección de componentes sin estilo creados sobre los ganchos de React Aria.

Está desarrollado por Adobe y es parte del proyecto React Spectrum, cuyo objetivo es crear una solución integral. colección de bibliotecas y herramientas que ayudan a los desarrolladores a crear usuarios adaptables, accesibles y robustos. experiencias.

Comprender los componentes de React Aria

Reaccionar componentes de Aria proporciona accesibilidad, interacciones de usuario y comportamiento de acuerdo con las mejores prácticas WAI-ARIA (Iniciativa de Accesibilidad Web - Aplicaciones de Internet enriquecidas accesibles). A diferencia de la biblioteca React Aria, que utiliza ganchos de reacción para construir sus componentes.

La biblioteca de componentes de React Aria ofrece un conjunto de componentes prediseñados, incluidos botones, casillas de verificación, controles deslizantes, etc. Estos componentes no tienen estilo, lo que le permite diseñar la apariencia de la aplicación como desee.

Beneficios de usar componentes React Aria

La biblioteca de componentes React Aria ofrece muchos beneficios, que incluyen:

• Accesibilidad: Los componentes de React Aria siguen las mejores prácticas de WAI-ARIA, lo que garantiza que su aplicación sea accesible para todos los usuarios, incluidos aquellos que utilizan tecnologías de asistencia.
• Flexibilidad: Los componentes de React Aria no tienen estilo, lo que le permite implementar su sistema de diseño sin restricciones.
• Interacciones del usuario: React Aria proporciona un manejo sólido de las interacciones del usuario, incluidas las interacciones táctiles y del teclado.
• Internacionalización: React Aria admite idiomas de derecha a izquierda, formato de fecha y número, y más, lo que facilita la creación de aplicaciones internacionalizadas.

Creación de aplicaciones React con componentes React Aria

Veamos cómo crear una aplicación React simple usando los componentes React Aria. Antes de utilizar la biblioteca de componentes React Aria en sus aplicaciones React, debe crear un proyecto React. Vite es una excelente manera de hacer esto..

Creando su aplicación React

Para crear su aplicación React usando Vite, ejecute el siguiente código en su terminal:

npm init vite

Al ejecutar el código anterior, se iniciará una serie de indicaciones para ayudarlo a crear su nuevo proyecto de React.

Por ejemplo:

Después de crear su proyecto, deberá instalar las dependencias necesarias. Para hacer esto, ejecute el siguiente código en su terminal:

cd react-aria-app

npm install

Cambiará su directorio actual al directorio del proyecto y luego instalará las dependencias necesarias. Una vez que haya creado su aplicación React, puede instalar la biblioteca de componentes React Aria para agregar funciones de accesibilidad a su aplicación.

Instalación de componentes de React Aria

Puede instalar la biblioteca de componentes React Aria usando npm o hilo. Para instalarlo a través de npm, ejecute el siguiente comando en su terminal:

npm install react-aria-components

Alternativamente, para instalar mediante hilo, ejecute este código:

yarn add react-aria-components

Ahora que ha instalado la biblioteca de componentes React Aria, puede usar sus componentes en su aplicación.

Usando los componentes de React Aria

La biblioteca de componentes React Aria ofrece una variedad de componentes que hacen que el proceso de desarrollo sea más fácil y rápido. Para utilizar el componente de la biblioteca, impórtelo a su aplicación y renderícelo.

Por ejemplo:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




Click Me</Button>

You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

El bloque de código de arriba importa el Botón, popover, Disparador de diálogo, y Diálogo componentes de la componentes-reaccion-aria módulo. Todos los componentes importados crean un botón simple que muestra una ventana emergente cuando se hace clic.

El Disparador de diálogo El componente controla la visibilidad de un cuadro de diálogo o ventana emergente. Dentro de Disparador de diálogo, ahí está el Botón componente. Este botón activa la visibilidad del popover y Diálogo.

El popover El componente es un contenedor que aparece sobre el resto de la interfaz de usuario, mientras que el Diálogo El componente muestra el contenido en una capa encima de la aplicación. Dentro de popover componente es un Diálogo componente con el texto "Hiciste clic en el botón."

Al hacer clic en el botón se mostrará una ventana emergente con el texto "Hiciste clic en el botón" en su pantalla, dándole a su interfaz una apariencia similar a la imagen a continuación.

Como puedes ver en la imagen de arriba, los componentes de la biblioteca vienen sin estilo para que puedas elegir tu estilo preferido.

Diseñar tus componentes

Dado que los componentes de React Aria no tienen estilo, puedes diseñarlos como quieras. Puedes usar Hojas de estilo en cascada (CSS), Tailwind CSS, componentes con estilo o cualquier otro método de estilo que prefiera.

Puedes pasar diferentes costumbres. nombres de clase a los componentes y luego defina las clases CSS en su archivo CSS.

Aquí hay un ejemplo:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




"button">Click Me</Button>
"popover">
"dialog">You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

En este ejemplo, usted define un nombre de la clase Para el Botón, popover, y Diálogo componentes. Ahora puede diseñar los componentes en su archivo CSS.

.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}

Después de definir los estilos para sus componentes, su botón y ventana emergente deberían verse así.

Si no quieres definir una costumbre nombre de la clase para sus componentes, la biblioteca de componentes React Aria incluye un valor predeterminado nombre de la clase para cada componente. El valor por defecto nombre de la clase es reaccionar-aria-nombre-componente, dónde Nombre del componente es el nombre del componente al que desea aplicar estilo.

Por ejemplo:

.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}

Tenga en cuenta que el bloque de código CSS anterior aplicará estos estilos a cada Botón, popover, y Diálogo componente que utiliza en su aplicación.

Cree aplicaciones React accesibles e interactivas

React Aria Components es una poderosa biblioteca para crear aplicaciones React accesibles e interactivas. Proporciona componentes que manejan las interacciones del usuario y la accesibilidad de acuerdo con las mejores prácticas de WAI-ARIA. Si está buscando una biblioteca de componentes que ofrezca muchos componentes y flexibilidad, React Aria Components es una excelente opción.

Además de la biblioteca de componentes React Aria, existen otras bibliotecas de componentes sin estilo que puede utilizar para crear hermosas aplicaciones React. Una de estas bibliotecas incluye Radix UI. Radix UI es una biblioteca de componentes sin estilo para crear aplicaciones React de alta calidad. Es una gran alternativa a los componentes React Aria.